archtracker-mcp 0.5.0 → 0.7.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 writeFile3, mkdir as mkdir3 } from "fs/promises";
-import { join as join8 } from "path";
+import { writeFile as writeFile4, mkdir as mkdir4 } from "fs/promises";
+import { join as join10 } from "path";
 
 // src/analyzer/analyze.ts
 import { resolve as resolve3 } from "path";
@@ -1569,6 +1569,8 @@ var en = {
   "diff.reasonRemoved": 'Dependency "{file}" was removed',
   "diff.reasonModified": 'Dependency "{file}" had its dependencies changed',
   "diff.reasonAdded": 'New dependency "{file}" was added',
+  "diff.testSummary": "  ... and {count} test/fixture file(s)",
+  "diff.testAffectedSummary": "  ... and {count} test/fixture-related review(s)",
   // Search
   "search.pathMatch": 'Path matches "{pattern}"',
   "search.affected": 'May be affected by changes to "{file}" (via: {via})',
@@ -1630,6 +1632,12 @@ var en = {
   "web.watching": "Watching {dir}/ for changes...",
   "web.reloading": "File change detected, reloading...",
   "web.reloaded": "Graph reloaded",
+  // History
+  "history.title": "# Snapshot History\n",
+  "history.empty": "No snapshots found. Run `archtracker init` to create one.",
+  "history.entry": "  {ts}  |  {files} files, {edges} edges, {circular} circular{layers}",
+  "history.count": "{count} snapshot(s) recorded",
+  "history.snapshotNotFound": "Snapshot not found for timestamp: {ts}",
   // Errors
   "error.analyzer": "[Analysis Error] {message}",
   "error.storage": "[Storage Error] {message}",
@@ -1662,6 +1670,8 @@ var ja = {
   "diff.reasonRemoved": '\u4F9D\u5B58\u5148 "{file}" \u304C\u524A\u9664\u3055\u308C\u307E\u3057\u305F',
   "diff.reasonModified": '\u4F9D\u5B58\u5148 "{file}" \u306E\u4F9D\u5B58\u95A2\u4FC2\u304C\u5909\u66F4\u3055\u308C\u307E\u3057\u305F',
   "diff.reasonAdded": '\u65B0\u3057\u3044\u4F9D\u5B58\u5148 "{file}" \u304C\u8FFD\u52A0\u3055\u308C\u307E\u3057\u305F',
+  "diff.testSummary": "  ... \u4ED6 {count}\u4EF6\u306E\u30C6\u30B9\u30C8/\u30D5\u30A3\u30AF\u30B9\u30C1\u30E3\u30D5\u30A1\u30A4\u30EB",
+  "diff.testAffectedSummary": "  ... \u4ED6 {count}\u4EF6\u306E\u30C6\u30B9\u30C8/\u30D5\u30A3\u30AF\u30B9\u30C1\u30E3\u95A2\u9023\u306E\u78BA\u8A8D\u9805\u76EE",
   // Search
   "search.pathMatch": '\u30D1\u30B9\u304C "{pattern}" \u306B\u30DE\u30C3\u30C1',
   "search.affected": '"{file}" \u306E\u5909\u66F4\u306B\u3088\u308A\u5F71\u97FF\u3092\u53D7\u3051\u308B\u53EF\u80FD\u6027\uFF08\u7D4C\u7531: {via}\uFF09',
@@ -1723,6 +1733,12 @@ var ja = {
   "web.watching": "{dir}/ \u3092\u76E3\u8996\u4E2D...",
   "web.reloading": "\u30D5\u30A1\u30A4\u30EB\u5909\u66F4\u3092\u691C\u51FA\u3001\u30EA\u30ED\u30FC\u30C9\u4E2D...",
   "web.reloaded": "\u30B0\u30E9\u30D5\u3092\u66F4\u65B0\u3057\u307E\u3057\u305F",
+  // History
+  "history.title": "# \u30B9\u30CA\u30C3\u30D7\u30B7\u30E7\u30C3\u30C8\u5C65\u6B74\n",
+  "history.empty": "\u30B9\u30CA\u30C3\u30D7\u30B7\u30E7\u30C3\u30C8\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3002`archtracker init` \u3067\u4F5C\u6210\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+  "history.entry": "  {ts}  |  {files}\u30D5\u30A1\u30A4\u30EB, {edges}\u30A8\u30C3\u30B8, \u5FAA\u74B0{circular}\u4EF6{layers}",
+  "history.count": "{count}\u4EF6\u306E\u30B9\u30CA\u30C3\u30D7\u30B7\u30E7\u30C3\u30C8\u3092\u8A18\u9332",
+  "history.snapshotNotFound": "\u6307\u5B9A\u306E\u30BF\u30A4\u30E0\u30B9\u30BF\u30F3\u30D7\u306E\u30B9\u30CA\u30C3\u30D7\u30B7\u30E7\u30C3\u30C8\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093: {ts}",
   // Errors
   "error.analyzer": "[\u89E3\u6790\u30A8\u30E9\u30FC] {message}",
   "error.storage": "[\u30B9\u30C8\u30EC\u30FC\u30B8\u30A8\u30E9\u30FC] {message}",
@@ -1807,14 +1823,14 @@ var LAYER_COLORS = [
   "#ffa657",
   "#7ee787"
 ];
-async function analyzeMultiLayer(projectRoot, layerDefs) {
+async function analyzeMultiLayer(projectRoot, layerDefs, globalExclude) {
   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,
+      exclude: def.exclude ?? globalExclude,
       language: def.language
     });
     const language = def.language ?? await detectLanguage(targetDir) ?? "javascript";
@@ -2175,62 +2191,422 @@ function mergeLayerGraphs(projectRoot, layers) {
   };
 }
 
-// src/storage/snapshot.ts
-import { mkdir, writeFile, readFile as readFile2, access } from "fs/promises";
+// 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/storage/graph-cache.ts
+import { readFile as readFile3, writeFile as writeFile2, mkdir as mkdir2, stat as stat4 } from "fs/promises";
+import { join as join6, resolve as resolve5 } from "path";
+import { readdir as readdir3 } from "fs/promises";
+import { createHash } from "crypto";
+var CACHE_FILE = "graph.json";
+var ARCHTRACKER_DIR2 = ".archtracker";
+async function hashFile(filePath) {
+  const content = await readFile3(filePath);
+  return createHash("sha256").update(content).digest("hex");
+}
+async function collectFileFingerprints(dir, exclude = []) {
+  const fingerprints = {};
+  const excludeRegexes = exclude.map((p) => new RegExp(p));
+  async function walk(currentDir) {
+    let entries;
+    try {
+      entries = await readdir3(currentDir, { withFileTypes: true });
+    } catch {
+      return;
+    }
+    for (const entry of entries) {
+      const fullPath = join6(currentDir, entry.name);
+      const relativePath = fullPath.slice(dir.length + 1);
+      if (entry.name.startsWith(".") || entry.name === "node_modules") continue;
+      if (excludeRegexes.some((r) => r.test(relativePath))) continue;
+      if (entry.isDirectory()) {
+        await walk(fullPath);
+      } else if (entry.isFile()) {
+        try {
+          const s = await stat4(fullPath);
+          const hash = await hashFile(fullPath);
+          fingerprints[relativePath] = { mtime: s.mtimeMs, hash };
+        } catch {
+        }
+      }
+    }
+  }
+  await walk(dir);
+  return fingerprints;
+}
+async function saveGraphCache(projectRoot, graph, options, extra) {
+  const absRoot = resolve5(projectRoot);
+  const dir = join6(absRoot, ARCHTRACKER_DIR2);
+  await mkdir2(dir, { recursive: true });
+  let fingerprints;
+  if (extra?.layerDirs?.length) {
+    fingerprints = {};
+    for (const layerDir of extra.layerDirs) {
+      const layerPath = resolve5(absRoot, layerDir);
+      const layerFp = await collectFileFingerprints(layerPath, options.exclude);
+      for (const [key, value] of Object.entries(layerFp)) {
+        fingerprints[`${layerDir}/${key}`] = value;
+      }
+    }
+  } else {
+    fingerprints = await collectFingerprintsForGraph(absRoot, options);
+  }
+  let layersJsonHash;
+  try {
+    layersJsonHash = await hashFile(join6(dir, "layers.json"));
+  } catch {
+  }
+  const mtimes = {};
+  for (const [k, v] of Object.entries(fingerprints)) {
+    mtimes[k] = v.mtime;
+  }
+  const cache = {
+    version: "1.0",
+    timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+    options: {
+      targetDir: options.targetDir,
+      projectRoot: options.projectRoot,
+      language: options.language,
+      exclude: options.exclude
+    },
+    fileMtimes: mtimes,
+    fileHashes: Object.fromEntries(
+      Object.entries(fingerprints).map(([k, v]) => [k, v.hash])
+    ),
+    graph,
+    multiLayer: extra?.multiLayer,
+    layerMetadata: extra?.layerMetadata,
+    layerDirs: extra?.layerDirs,
+    layersJsonHash
+  };
+  await writeFile2(join6(dir, CACHE_FILE), JSON.stringify(cache), "utf-8");
+}
+async function loadGraphCache(projectRoot) {
+  const absRoot = resolve5(projectRoot);
+  const filePath = join6(absRoot, ARCHTRACKER_DIR2, CACHE_FILE);
+  try {
+    const raw = await readFile3(filePath, "utf-8");
+    const data = JSON.parse(raw);
+    if (data?.version !== "1.0" || !data?.graph || !data?.fileMtimes) {
+      return null;
+    }
+    return data;
+  } catch {
+    return null;
+  }
+}
+async function isGraphCacheValid(cache, projectRoot, options) {
+  if (cache.options.targetDir !== options.targetDir || cache.options.projectRoot !== options.projectRoot || (cache.options.language ?? "") !== (options.language ?? "") || JSON.stringify(cache.options.exclude ?? []) !== JSON.stringify(options.exclude ?? [])) {
+    return false;
+  }
+  const absRoot = resolve5(projectRoot);
+  const targetPath = resolve5(absRoot, options.targetDir);
+  const isMultiLayer = (cache.layerDirs?.length ?? 0) > 0;
+  let currentLayersHash;
+  try {
+    currentLayersHash = await hashFile(join6(absRoot, ARCHTRACKER_DIR2, "layers.json"));
+  } catch {
+  }
+  if ((cache.layersJsonHash ?? "") !== (currentLayersHash ?? "")) return false;
+  let currentMtimes;
+  if (isMultiLayer) {
+    currentMtimes = {};
+    for (const layerDir of cache.layerDirs) {
+      const layerPath = resolve5(absRoot, layerDir);
+      const dirMtimes = await collectFileMtimes(layerPath, options.exclude);
+      for (const [key, value] of Object.entries(dirMtimes)) {
+        currentMtimes[`${layerDir}/${key}`] = value;
+      }
+    }
+  } else {
+    currentMtimes = await collectFileMtimes(targetPath, options.exclude);
+  }
+  const cachedKeys = new Set(Object.keys(cache.fileMtimes));
+  const currentKeys = new Set(Object.keys(currentMtimes));
+  if (cachedKeys.size !== currentKeys.size) return false;
+  for (const key of cachedKeys) {
+    if (!currentKeys.has(key)) return false;
+  }
+  const mtimeChanged = [];
+  for (const key of cachedKeys) {
+    if (Math.abs(cache.fileMtimes[key] - currentMtimes[key]) > 1) {
+      mtimeChanged.push(key);
+    }
+  }
+  if (mtimeChanged.length === 0) return true;
+  if (!cache.fileHashes) return false;
+  for (const key of mtimeChanged) {
+    const cachedHash = cache.fileHashes[key];
+    if (!cachedHash) return false;
+    try {
+      const fullPath = isMultiLayer ? join6(absRoot, key) : join6(targetPath, key);
+      const currentHash = await hashFile(fullPath);
+      if (currentHash !== cachedHash) return false;
+    } catch {
+      return false;
+    }
+  }
+  return true;
+}
+async function collectFileMtimes(dir, exclude) {
+  const mtimes = {};
+  const excludeRegexes = (exclude ?? []).map((p) => new RegExp(p));
+  async function walk(currentDir) {
+    let entries;
+    try {
+      entries = await readdir3(currentDir, { withFileTypes: true });
+    } catch {
+      return;
+    }
+    for (const entry of entries) {
+      const fullPath = join6(currentDir, entry.name);
+      const relativePath = fullPath.slice(dir.length + 1);
+      if (entry.name.startsWith(".") || entry.name === "node_modules") continue;
+      if (excludeRegexes.some((r) => r.test(relativePath))) continue;
+      if (entry.isDirectory()) {
+        await walk(fullPath);
+      } else if (entry.isFile()) {
+        try {
+          const s = await stat4(fullPath);
+          mtimes[relativePath] = s.mtimeMs;
+        } catch {
+        }
+      }
+    }
+  }
+  await walk(dir);
+  return mtimes;
+}
+async function collectFingerprintsForGraph(absRoot, options) {
+  const targetPath = resolve5(absRoot, options.targetDir);
+  return collectFileFingerprints(targetPath, options.exclude);
+}
+
+// src/analyzer/resolve.ts
+async function resolveGraph(opts) {
+  if (!opts.noCache) {
+    const cache = await loadGraphCache(opts.projectRoot);
+    if (cache) {
+      const valid = await isGraphCacheValid(cache, opts.projectRoot, {
+        targetDir: opts.targetDir,
+        projectRoot: opts.projectRoot,
+        language: opts.language,
+        exclude: opts.exclude
+      });
+      if (valid) {
+        const result2 = {
+          graph: cache.graph,
+          multiLayer: cache.multiLayer,
+          layerMetadata: cache.layerMetadata,
+          fromCache: true
+        };
+        if (cache.multiLayer) {
+          const layerConfig2 = await loadLayerConfig(opts.projectRoot);
+          if (layerConfig2) {
+            const autoConnections = detectCrossLayerConnections(
+              cache.multiLayer.layers,
+              layerConfig2.layers
+            );
+            const manualConnections = layerConfig2.connections ?? [];
+            const manualKeys = new Set(manualConnections.map(
+              (c) => `${c.fromLayer}/${c.fromFile}\u2192${c.toLayer}/${c.toFile}`
+            ));
+            result2.crossLayerEdges = [
+              ...manualConnections,
+              ...autoConnections.filter(
+                (c) => !manualKeys.has(`${c.fromLayer}/${c.fromFile}\u2192${c.toLayer}/${c.toFile}`)
+              )
+            ];
+          }
+        }
+        return result2;
+      }
+    }
+  }
+  const layerConfig = await loadLayerConfig(opts.projectRoot);
+  let result;
+  if (layerConfig) {
+    const multi = await analyzeMultiLayer(opts.projectRoot, layerConfig.layers, opts.exclude);
+    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}`)
+      )
+    ];
+    result = {
+      graph: multi.merged,
+      multiLayer: multi,
+      layerMetadata: multi.layerMetadata,
+      crossLayerEdges: merged
+    };
+  } else {
+    const graph = await analyzeProject(opts.targetDir, {
+      exclude: opts.exclude,
+      language: opts.language
+    });
+    result = { graph };
+  }
+  try {
+    await saveGraphCache(
+      opts.projectRoot,
+      result.graph,
+      {
+        targetDir: opts.targetDir,
+        projectRoot: opts.projectRoot,
+        language: opts.language,
+        exclude: opts.exclude
+      },
+      {
+        multiLayer: result.multiLayer,
+        layerMetadata: result.layerMetadata,
+        layerDirs: layerConfig?.layers.map((l) => l.targetDir)
+      }
+    );
+  } catch {
+  }
+  return result;
+}
+
+// src/storage/snapshot.ts
+import { mkdir as mkdir3, writeFile as writeFile3, readFile as readFile4, readdir as readdir4, access } from "fs/promises";
+import { join as join7 } from "path";
+import { z as z2 } from "zod";
 
 // src/types/schema.ts
 var SCHEMA_VERSION = "1.1";
 
 // src/storage/snapshot.ts
-var ARCHTRACKER_DIR = ".archtracker";
+var ARCHTRACKER_DIR3 = ".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 HISTORY_DIR = "history";
+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.enum([SCHEMA_VERSION, "1.0"]),
-  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, multiLayer) {
-  const dirPath = join5(projectRoot, ARCHTRACKER_DIR);
-  const filePath = join5(dirPath, SNAPSHOT_FILE);
+async function saveSnapshot(projectRoot, graph, multiLayer, analysisOptions) {
+  const dirPath = join7(projectRoot, ARCHTRACKER_DIR3);
+  const filePath = join7(dirPath, SNAPSHOT_FILE);
   const snapshot = {
     version: SCHEMA_VERSION,
     timestamp: (/* @__PURE__ */ new Date()).toISOString(),
     rootDir: graph.rootDir,
     graph,
-    ...multiLayer ? { multiLayer } : {}
+    ...multiLayer ? { multiLayer } : {},
+    ...analysisOptions ? { analysisOptions } : {}
   };
-  await mkdir(dirPath, { recursive: true });
-  await writeFile(filePath, JSON.stringify(snapshot, null, 2), "utf-8");
+  await mkdir3(dirPath, { recursive: true });
+  const json = JSON.stringify(snapshot, null, 2);
+  await writeFile3(filePath, json, "utf-8");
+  try {
+    const historyPath = join7(dirPath, HISTORY_DIR);
+    await mkdir3(historyPath, { recursive: true });
+    const safeTs = snapshot.timestamp.replace(/[:.]/g, "-");
+    await writeFile3(join7(historyPath, `${safeTs}.json`), json, "utf-8");
+  } catch {
+  }
   return snapshot;
 }
 async function loadSnapshot(projectRoot) {
-  const filePath = join5(projectRoot, ARCHTRACKER_DIR, SNAPSHOT_FILE);
+  const filePath = join7(projectRoot, ARCHTRACKER_DIR3, SNAPSHOT_FILE);
   let raw;
   try {
-    raw = await readFile2(filePath, "utf-8");
+    raw = await readFile4(filePath, "utf-8");
   } catch (error) {
-    if (isNodeError(error) && error.code === "ENOENT") {
+    if (isNodeError2(error) && error.code === "ENOENT") {
       return null;
     }
     throw new StorageError(
@@ -2255,13 +2631,74 @@ async function loadSnapshot(projectRoot) {
   }
   return result.data;
 }
+async function listSnapshots(projectRoot) {
+  const historyPath = join7(projectRoot, ARCHTRACKER_DIR3, HISTORY_DIR);
+  let entries;
+  try {
+    entries = await readdir4(historyPath);
+  } catch {
+    return [];
+  }
+  const jsonFiles = entries.filter((e) => e.endsWith(".json")).sort().reverse();
+  const summaries = [];
+  for (const file of jsonFiles) {
+    try {
+      const raw = await readFile4(join7(historyPath, file), "utf-8");
+      const parsed = JSON.parse(raw);
+      const result = SnapshotSchema.safeParse(parsed);
+      if (result.success) {
+        const snap = result.data;
+        summaries.push({
+          timestamp: snap.timestamp,
+          totalFiles: snap.graph.totalFiles,
+          totalEdges: snap.graph.totalEdges,
+          circularDeps: snap.graph.circularDependencies.length,
+          hasMultiLayer: "multiLayer" in parsed && parsed.multiLayer != null
+        });
+      }
+    } catch {
+    }
+  }
+  return summaries;
+}
+async function loadSnapshotByTimestamp(projectRoot, timestamp) {
+  const historyPath = join7(projectRoot, ARCHTRACKER_DIR3, HISTORY_DIR);
+  let entries;
+  try {
+    entries = await readdir4(historyPath);
+  } catch {
+    return null;
+  }
+  const jsonFiles = entries.filter((e) => e.endsWith(".json")).sort();
+  const safeTs = timestamp.replace(/[:.]/g, "-");
+  const exactMatch = jsonFiles.find((f) => f === `${safeTs}.json`);
+  if (exactMatch) {
+    return loadHistoryFile(join7(historyPath, exactMatch));
+  }
+  const prefixMatch = jsonFiles.find((f) => f.startsWith(safeTs.slice(0, 10)));
+  if (prefixMatch) {
+    return loadHistoryFile(join7(historyPath, prefixMatch));
+  }
+  return null;
+}
+async function loadHistoryFile(filePath) {
+  try {
+    const raw = await readFile4(filePath, "utf-8");
+    const parsed = JSON.parse(raw);
+    const result = SnapshotSchema.safeParse(parsed);
+    if (result.success) return result.data;
+    return null;
+  } catch {
+    return null;
+  }
+}
 var StorageError = class extends Error {
   constructor(message, options) {
     super(message, options);
     this.name = "StorageError";
   }
 };
-function isNodeError(error) {
+function isNodeError2(error) {
   return error instanceof Error && "code" in error;
 }
 
@@ -2316,6 +2753,17 @@ function computeDiff(oldGraph, newGraph) {
   }
   return { added, removed, modified, affectedDependents };
 }
+function isTestOrFixture(path) {
+  return /(__fixtures__|__tests__|__mocks__|\.test\.|\.spec\.|\.e2e\.)/.test(path);
+}
+function partition(arr, pred) {
+  const yes = [];
+  const no = [];
+  for (const item of arr) {
+    (pred(item) ? yes : no).push(item);
+  }
+  return [yes, no];
+}
 function formatDiffReport(diff) {
   const lines = [];
   lines.push(t("diff.title"));
@@ -2324,32 +2772,51 @@ function formatDiffReport(diff) {
     return lines.join("\n");
   }
   if (diff.added.length > 0) {
+    const [testFiles, srcFiles] = partition(diff.added, isTestOrFixture);
     lines.push(t("diff.added", { count: diff.added.length }));
-    for (const f of diff.added) {
+    for (const f of srcFiles) {
       lines.push(`  + ${f}`);
     }
+    if (testFiles.length > 0) {
+      lines.push(t("diff.testSummary", { count: testFiles.length }));
+    }
     lines.push("");
   }
   if (diff.removed.length > 0) {
+    const [testFiles, srcFiles] = partition(diff.removed, isTestOrFixture);
     lines.push(t("diff.removed", { count: diff.removed.length }));
-    for (const f of diff.removed) {
+    for (const f of srcFiles) {
       lines.push(`  - ${f}`);
     }
+    if (testFiles.length > 0) {
+      lines.push(t("diff.testSummary", { count: testFiles.length }));
+    }
     lines.push("");
   }
   if (diff.modified.length > 0) {
+    const [testFiles, srcFiles] = partition(diff.modified, isTestOrFixture);
     lines.push(t("diff.modified", { count: diff.modified.length }));
-    for (const f of diff.modified) {
+    for (const f of srcFiles) {
       lines.push(`  ~ ${f}`);
     }
+    if (testFiles.length > 0) {
+      lines.push(t("diff.testSummary", { count: testFiles.length }));
+    }
     lines.push("");
   }
   if (diff.affectedDependents.length > 0) {
+    const [testEntries, srcEntries] = partition(
+      diff.affectedDependents,
+      (a) => isTestOrFixture(a.file) || isTestOrFixture(a.dependsOn)
+    );
     lines.push(t("diff.affected", { count: diff.affectedDependents.length }));
-    for (const a of diff.affectedDependents) {
+    for (const a of srcEntries) {
       lines.push(`  ! ${a.file}`);
       lines.push(`    ${a.reason}`);
     }
+    if (testEntries.length > 0) {
+      lines.push(t("diff.testAffectedSummary", { count: testEntries.length }));
+    }
     lines.push("");
   }
   return lines.join("\n");
@@ -2362,121 +2829,17 @@ function arraysEqual(a, b) {
   return true;
 }
 
-// src/storage/layers.ts
-import { readFile as readFile3, writeFile as writeFile2, mkdir as mkdir2 } from "fs/promises";
-import { join as join6 } from "path";
-import { z as z2 } from "zod";
-var ARCHTRACKER_DIR2 = ".archtracker";
-var LAYERS_FILE = "layers.json";
-var LayerDefinitionSchema = z2.object({
-  name: z2.string().min(1).regex(
-    /^[a-zA-Z0-9_-]+$/,
-    "Layer name must be alphanumeric (hyphens/underscores allowed)"
-  ),
-  targetDir: z2.string().min(1),
-  language: z2.enum(LANGUAGE_IDS).optional(),
-  exclude: z2.array(z2.string()).optional(),
-  color: z2.string().optional(),
-  description: z2.string().optional()
-});
-var CrossLayerConnectionSchema = z2.object({
-  fromLayer: z2.string(),
-  fromFile: z2.string(),
-  toLayer: z2.string(),
-  toFile: z2.string(),
-  type: z2.enum(["api-call", "event", "data-flow", "manual"]),
-  label: z2.string().optional()
-});
-var LayerConfigSchema = z2.object({
-  version: z2.literal("1.0"),
-  layers: z2.array(LayerDefinitionSchema).min(1).refine(
-    (layers) => {
-      const names = layers.map((l) => l.name);
-      return new Set(names).size === names.length;
-    },
-    { message: "Layer names must be unique" }
-  ),
-  connections: z2.array(CrossLayerConnectionSchema).optional()
-});
-async function loadLayerConfig(projectRoot) {
-  const filePath = join6(projectRoot, ARCHTRACKER_DIR2, LAYERS_FILE);
-  let raw;
-  try {
-    raw = await readFile3(filePath, "utf-8");
-  } catch (error) {
-    if (isNodeError2(error) && error.code === "ENOENT") {
-      return null;
-    }
-    throw new Error(`Failed to read ${filePath}`);
-  }
-  let parsed;
-  try {
-    parsed = JSON.parse(raw);
-  } catch {
-    throw new Error(`Invalid JSON in ${filePath}`);
-  }
-  const result = LayerConfigSchema.safeParse(parsed);
-  if (!result.success) {
-    const issues = result.error.issues.map((i) => `  ${i.path.join(".")}: ${i.message}`).slice(0, 5).join("\n");
-    throw new Error(`layers.json validation failed:
-${issues}`);
-  }
-  return result.data;
-}
-async function saveLayerConfig(projectRoot, config) {
-  const dirPath = join6(projectRoot, ARCHTRACKER_DIR2);
-  const filePath = join6(dirPath, LAYERS_FILE);
-  await mkdir2(dirPath, { recursive: true });
-  await writeFile2(filePath, JSON.stringify(config, null, 2) + "\n", "utf-8");
-}
-function isNodeError2(error) {
-  return error instanceof Error && "code" in error;
-}
-
 // src/web/server.ts
 import { createServer } from "http";
 
 // 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>
-<style>
+import { readFileSync as readFileSync3 } from "fs";
+import { join as join8, dirname as dirname2 } from "path";
+import { fileURLToPath } from "url";
+
+// src/web/styles.ts
+function buildStyles() {
+  return `<style>
 :root {
   --bg: #0d1117; --bg-card: #161b22; --bg-hover: #1c2129;
   --border: #30363d; --border-active: #58a6ff;
@@ -2606,6 +2969,9 @@ 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; }
 
@@ -2615,1618 +2981,276 @@ kbd { background: #21262d; border: 1px solid var(--border); border-radius: 3px;
 
 /* \u2500\u2500\u2500 Layer tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 #layer-tabs { display: flex; gap: 2px; margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--border); }
-.layer-tab { padding: 4px 10px; font-size: 11px; color: var(--text-dim); cursor: pointer; border-radius: 4px; border: 1px solid transparent; transition: all 0.15s; user-select: none; display: flex; align-items: center; gap: 5px; }
-.layer-tab:hover { color: var(--text); background: var(--bg-hover); }
-.layer-tab.active { border-color: var(--accent); color: var(--text); }
-.layer-tab .lt-dot { width: 6px; height: 6px; border-radius: 50%; }
-
-/* \u2500\u2500\u2500 Layer filter pills \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-.layer-pill { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 2px 9px; font-size: 11px; font-weight: 600; cursor: pointer; user-select: none; transition: all 0.15s; display: flex; align-items: center; gap: 5px; }
-.layer-pill:hover { border-color: var(--text-dim); }
-.layer-pill.active { border-color: var(--accent); }
-.layer-pill .lp-dot { width: 6px; height: 6px; border-radius: 50%; }
-.layer-pill .lp-count { color: var(--text-muted); font-size: 9px; font-weight: 400; }
-</style>
-</head>
-<body>
-
-<!-- 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>
-      <span><span data-i18n="stats.edges">Edges</span> <b id="s-edges">0</b></span>
-      <span><span data-i18n="stats.circular">Circular</span> <b id="s-circular">0</b></span>
-    </div>
-    <button class="settings-btn" onclick="toggleSettings()" title="Settings">\u2699</button>
-  </div>
-</div>
-
-<!-- Settings panel -->
-<div id="settings-panel">
-  <h3 data-i18n="settings.title">Settings</h3>
-  <div class="setting-group">
-    <label data-i18n="settings.theme">Theme</label>
-    <div class="theme-toggle">
-      <div class="theme-btn active" data-theme-val="dark" onclick="setTheme('dark')">\u{1F319} Dark</div>
-      <div class="theme-btn" data-theme-val="light" onclick="setTheme('light')">\u2600\uFE0F Light</div>
-    </div>
-  </div>
-  <div class="setting-group">
-    <label data-i18n="settings.fontSize">Font Size</label>
-    <input type="range" id="font-size-slider" min="10" max="18" value="13" oninput="setFontSize(this.value)">
-    <div class="setting-value"><span id="font-size-val">13</span>px</div>
-  </div>
-  <div class="setting-group">
-    <label data-i18n="settings.nodeSize">Node Size</label>
-    <input type="range" id="node-size-slider" min="50" max="200" value="100" oninput="setNodeScale(this.value)">
-    <div class="setting-value"><span id="node-size-val">100</span>%</div>
-  </div>
-  <div class="setting-group">
-    <label data-i18n="settings.linkOpacity">Link Opacity</label>
-    <input type="range" id="link-opacity-slider" min="10" max="100" value="40" oninput="setLinkOpacity(this.value)">
-    <div class="setting-value"><span id="link-opacity-val">40</span>%</div>
-  </div>
-  <div class="setting-group">
-    <label data-i18n="settings.gravity">Gravity</label>
-    <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">
-      <div class="theme-btn lang-btn" data-lang="en" onclick="setLang('en')">English</div>
-      <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">
-      <div class="theme-btn" onclick="exportSVG()">SVG</div>
-      <div class="theme-btn" onclick="exportPNG()">PNG</div>
-    </div>
-  </div>
-</div>
-
-<!-- Graph View -->
-<div id="graph-view" class="view active">
-  <svg id="graph-svg"></svg>
-  <div id="hud">
-    <div class="hud-panel" id="search-box">
-      <svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor" style="color:var(--text-muted)"><path d="M11.5 7a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm-.82 4.74a6 6 0 1 1 1.06-1.06l3.04 3.04a.75.75 0 1 1-1.06 1.06l-3.04-3.04Z"/></svg>
-      <input id="search" type="text" data-i18n-placeholder="search.placeholder" placeholder="Search files..." autocomplete="off">
-      <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>
-      <div class="legend-item" style="margin-top:4px;font-size:11px;gap:3px"><span style="color:var(--accent)">\u2014\u2192</span> <span data-i18n="legend.imports">imports</span> <span style="margin-left:6px;color:var(--green)">\u2190\u2014</span> <span data-i18n="legend.importedBy">imported by</span></div>
-    </div>
-  </div>
-  <div id="detail">
-    <button class="close-btn" onclick="closeDetail()">\u2715</button>
-    <div class="detail-name" id="d-name"></div>
-    <div class="detail-meta" id="d-meta"></div>
-    <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="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 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>
-  <div id="help-bar" data-i18n="help.graph">Scroll: zoom \xB7 Drag: pan \xB7 Click: select \xB7 / search</div>
-</div>
-
-<!-- Hierarchy View -->
-<div id="hier-view" class="view">
-  <svg id="hier-svg"></svg>
-  <div id="hier-hud" style="position:absolute;top:12px;left:12px;z-index:10;display:flex;flex-direction:column;gap:8px;">
-    <div class="hud-panel" id="hier-legend">
-      <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>
-    </div>
-  </div>
-  <div id="hier-detail">
-    <button class="close-btn" onclick="closeHierDetail()">\u2715</button>
-    <div class="detail-name" id="hd-name"></div>
-    <div class="detail-meta" id="hd-meta"></div>
-    <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-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 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>
-  </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>
-
-<!-- Tooltip (shared, interactive) -->
-<div id="tooltip">
-  <div class="tt-name" id="tt-name"></div>
-  <div>
-    <span class="tt-badge tt-out" id="tt-dep-count"></span> <span data-i18n="tooltip.imports">imports</span>
-    <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));
-}
-window.setLang = (lang) => { currentLang = lang; applyI18n(); saveSettings(); };
-function i(key) { return (I18N[currentLang] || I18N.en)[key] || key; }
-
-// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-// 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) => {
-  document.body.setAttribute('data-theme', theme === 'light' ? 'light' : '');
-  document.querySelectorAll('.theme-btn[data-theme-val]').forEach(b => b.classList.toggle('active', b.dataset.themeVal === theme));
-  saveSettings();
-};
-window.setFontSize = (v) => {
-  document.getElementById('font-size-val').textContent = v;
-  const scale = v / 13;
-  if (typeof node !== 'undefined') {
-    node.select('text').attr('font-size', d => (d.dependents>=3?12:10) * scale);
-  }
-  saveSettings();
-};
-window.setNodeScale = (v) => {
-  nodeScale = v / 100;
-  document.getElementById('node-size-val').textContent = v;
-  if (typeof node !== 'undefined') {
-    node.select('circle').attr('r', d => nodeRadius(d) * nodeScale);
-    node.select('text').attr('dx', d => nodeRadius(d) * nodeScale + 4);
-    simulation.force('collision', d3.forceCollide().radius(d => nodeRadius(d) * nodeScale + 4));
-    simulation.alpha(0.3).restart();
-  }
-  saveSettings();
-};
-window.setLinkOpacity = (v) => {
-  baseLinkOpacity = v / 100;
-  document.getElementById('link-opacity-val').textContent = v;
-  if (typeof link !== 'undefined') link.attr('opacity', baseLinkOpacity);
-  saveSettings();
-};
-let gravityStrength = 150;
-window.setGravity = (v) => {
-  gravityStrength = +v;
-  document.getElementById('gravity-val').textContent = v;
-  if (typeof simulation !== 'undefined') {
-    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 applyLayerFilter === 'function') {
-    applyLayerFilter();
-  }
-  saveSettings();
-};
-
-// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-// EXPORT
-// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-window.exportSVG = () => {
-  const activeView = document.querySelector('.view.active svg');
-  if (!activeView) return;
-  const clone = activeView.cloneNode(true);
-  clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-  const blob = new Blob([clone.outerHTML], {type: 'image/svg+xml'});
-  const a = document.createElement('a');
-  a.href = URL.createObjectURL(blob);
-  a.download = (document.getElementById('project-title').textContent || 'graph') + '.svg';
-  a.click(); URL.revokeObjectURL(a.href);
-};
-window.exportPNG = () => {
-  const activeView = document.querySelector('.view.active svg');
-  if (!activeView) return;
-  const clone = activeView.cloneNode(true);
-  clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-  const svgStr = new XMLSerializer().serializeToString(clone);
-  const canvas = document.createElement('canvas');
-  const bbox = activeView.getBoundingClientRect();
-  canvas.width = bbox.width * 2; canvas.height = bbox.height * 2;
-  const ctx = canvas.getContext('2d');
-  ctx.scale(2, 2);
-  const img = new Image();
-  img.onload = () => { ctx.drawImage(img, 0, 0); const a = document.createElement('a'); a.href = canvas.toDataURL('image/png'); a.download = (document.getElementById('project-title').textContent || 'graph') + '.png'; a.click(); };
-  img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgStr)));
-};
-
-// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-// 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);
-
-// Project title (editable)
-const titleEl = document.getElementById('project-title');
-titleEl.textContent = DATA.projectName;
-titleEl.addEventListener('blur', () => { if (!titleEl.textContent.trim()) titleEl.textContent = DATA.projectName; document.title = titleEl.textContent + ' \u2014 Architecture Viewer'; saveSettings(); });
-titleEl.addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); titleEl.blur(); } });
-
-// Restore saved settings \u2014 phase 1: non-graph settings (before graph init)
-const _savedSettings = loadSettings();
-if (_savedSettings) {
-  if (_savedSettings.theme) setTheme(_savedSettings.theme);
-  if (_savedSettings.lang) { currentLang = _savedSettings.lang; applyI18n(); }
-  if (_savedSettings.projectTitle) { titleEl.textContent = _savedSettings.projectTitle; document.title = _savedSettings.projectTitle + ' \u2014 Architecture Viewer'; }
-  // Set slider positions (visual only \u2014 graph not built yet)
-  if (_savedSettings.fontSize) { document.getElementById('font-size-slider').value = _savedSettings.fontSize; document.getElementById('font-size-val').textContent = _savedSettings.fontSize; }
-  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;
-document.getElementById('s-edges').textContent = DATA.links.length;
-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)); }
-function fileName(id) { return id.split('/').pop(); }
-
-// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-// TAB SWITCHING
-// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-let hierBuilt = false;
-let hierRelayout = null;
-let hierSyncFromTab = null;
-document.querySelectorAll('.tab').forEach(tab => {
-  tab.addEventListener('click', () => {
-    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-    document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
-    tab.classList.add('active');
-    document.getElementById(tab.dataset.view).classList.add('active');
-    if (tab.dataset.view === 'hier-view') {
-      if (!hierBuilt) { buildHierarchy(); hierBuilt = true; }
-      if (hierSyncFromTab) { hierSyncFromTab(null); hierRelayout(); }
-    }
-  });
-});
-
-// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-// TOOLTIP \u2014 delayed hide + interactive
-// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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 tooltip = document.getElementById('tooltip');
-let tooltipHideTimer = null;
-let tooltipLocked = false;
-
-function showTooltip(e, d) {
-  clearTimeout(tooltipHideTimer);
-  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>');
-  document.getElementById('tt-details').innerHTML = [...out, ...inc].join('');
-  tooltip.style.display = 'block';
-  positionTooltip(e);
-}
-function positionTooltip(e) {
-  const gap = 24;
-  const tw = 420, th = tooltip.offsetHeight || 200;
-  // Prefer placing to the right and above the cursor so it doesn't cover nodes below
-  let x = e.clientX + gap;
-  let y = e.clientY - th - 12;
-  // If no room on the right, flip left
-  if (x + tw > window.innerWidth) x = e.clientX - tw - gap;
-  // If no room above, place below the cursor with gap
-  if (y < 50) y = e.clientY + gap;
-  // Final clamp
-  if (y + th > window.innerHeight) y = window.innerHeight - th - 8;
-  if (x < 8) x = 8;
-  tooltip.style.left = x + 'px';
-  tooltip.style.top = y + 'px';
-}
-function scheduleHideTooltip() {
-  clearTimeout(tooltipHideTimer);
-  tooltipHideTimer = setTimeout(() => {
-    if (!tooltipLocked) {
-      tooltip.style.display = 'none';
-      if (!pinnedNode) resetGraphHighlight();
-    }
-  }, 250);
-}
-
-// Keep tooltip visible when mouse enters it
-tooltip.addEventListener('mouseenter', () => {
-  clearTimeout(tooltipHideTimer);
-  tooltipLocked = true;
-});
-tooltip.addEventListener('mouseleave', () => {
-  tooltipLocked = false;
-  scheduleHideTooltip();
-});
-
-// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-// GRAPH 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 svg = d3.select('#graph-svg').attr('width', W).attr('height', H);
-const g = svg.append('g');
-const zoom = d3.zoom().scaleExtent([0.05, 10]).on('zoom', e => g.attr('transform', e.transform));
-svg.call(zoom);
-svg.call(zoom.transform, d3.zoomIdentity.translate(W/2, H/2).scale(0.7));
-
-window.zoomIn = () => svg.transition().duration(300).call(zoom.scaleBy, 1.4);
-window.zoomOut = () => svg.transition().duration(300).call(zoom.scaleBy, 0.7);
-window.zoomFit = () => {
-  const b = g.node().getBBox(); if (!b.width) return;
-  const s = Math.min(W/(b.width+80), H/(b.height+80))*0.9;
-  svg.transition().duration(500).call(zoom.transform, d3.zoomIdentity.translate(W/2-(b.x+b.width/2)*s, H/2-(b.y+b.height/2)*s).scale(s));
-};
-
-// Defs
-const defs = svg.append('defs');
-['#30363d','#58a6ff','#3fb950'].forEach((c,i) => {
-  defs.append('marker').attr('id','arrow-'+i).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',c);
-});
-
-// Links
-const link = g.append('g').selectAll('line').data(DATA.links).join('line')
-  .attr('stroke', d => d.type==='type-only'?'#1f3d5c':'#30363d')
-  .attr('stroke-width',1)
-  .attr('stroke-dasharray', d => d.type==='type-only'?'4,3':d.type==='dynamic'?'6,3':null)
-  .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')
-  .call(d3.drag().on('start',dragStart).on('drag',dragging).on('end',dragEnd));
-
-node.append('circle')
-  .attr('r', d => nodeRadius(d) * nodeScale)
-  .attr('fill', nodeColor)
-  .attr('stroke', d => d.deps>=5?'var(--yellow)':nodeColor(d))
-  .attr('stroke-width', d => d.deps>=5?2.5:1.5)
-  .attr('stroke-opacity', d => d.deps>=5?0.8:0.3);
-
-node.append('text')
-  .text(d => fileName(d.id).replace(/\\.tsx?$/,''))
-  .attr('dx', d => nodeRadius(d)*nodeScale+4)
-  .attr('dy',3.5)
-  .attr('font-size', d => d.dependents>=3?12:10)
-  .attr('font-weight', d => d.dependents>=3?600:400)
-  .attr('fill', d => d.dependents>=3?'var(--text)':'var(--text-dim)')
-  .attr('opacity', d => d.dependents>=1||d.deps>=3?1:0.5)
-  .attr('pointer-events','none');
-
-// Simulation
-const simulation = d3.forceSimulation(DATA.nodes)
-  .force('link', d3.forceLink(DATA.links).id(d=>d.id).distance(70).strength(0.25))
-  .force('charge', d3.forceManyBody().strength(-gravityStrength).distanceMax(500))
-  .force('center', d3.forceCenter(0,0))
-  .force('collision', d3.forceCollide().radius(d=>nodeRadius(d)*nodeScale+4))
-  .force('x', d3.forceX(0).strength(0.03))
-  .force('y', d3.forceY(0).strength(0.03))
-  .on('tick', () => {
-    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})\`);
-  });
-
-// \u2500\u2500\u2500 Layer convex hulls \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-let hullGroup = null;
-const activeDirs = new Set(DATA.dirs);
-const dirCounts = {};
-DATA.nodes.forEach(n => dirCounts[n.dir] = (dirCounts[n.dir] || 0) + 1);
-var applyLayerFilter = null; // hoisted for dir-filter integration
-
-if (LAYERS && LAYERS.length > 0) {
-  // \u2500\u2500\u2500 Water droplet physics: intra-layer cohesion + inter-layer separation \u2500\u2500\u2500
-  const allLayerCount = LAYERS.length;
-  const allBaseRadius = Math.max(60, Math.min(W, H) * 0.04 * Math.sqrt(allLayerCount));
-  // Pre-compute full-circle positions for all layers (used when no filter)
-  const allLayerCenters = {};
-  LAYERS.forEach((l, idx) => {
-    const angle = (2 * Math.PI * idx) / allLayerCount - Math.PI / 2;
-    allLayerCenters[l.name] = { x: Math.cos(angle) * allBaseRadius, y: Math.sin(angle) * allBaseRadius };
-  });
-
-  // Dynamic center calculation: compact when multi-selecting, full spread when all
-  function getLayerCenters() {
-    if (activeLayers.size <= 1) return allLayerCenters; // 0 = all, 1 = single (centered)
-    // Multi-select: arrange only selected layers compactly on a smaller circle
-    const selected = LAYERS.filter(l => activeLayers.has(l.name));
-    const count = selected.length;
-    const compactRadius = Math.max(40, Math.min(W, H) * 0.03 * Math.sqrt(count));
-    const centers = {};
-    selected.forEach((l, idx) => {
-      const angle = (2 * Math.PI * idx) / count - Math.PI / 2;
-      centers[l.name] = { x: Math.cos(angle) * compactRadius, y: Math.sin(angle) * compactRadius };
-    });
-    return centers;
-  }
-
-  // Replace default centering forces with per-layer positioning
-  const layerStrength = layerGravity / 100;
-  simulation.force('x', null).force('y', null).force('center', null);
-  simulation.force('layerX', d3.forceX(d => allLayerCenters[d.layer]?.x || 0).strength(d => d.layer ? layerStrength : 0.03));
-  simulation.force('layerY', d3.forceY(d => allLayerCenters[d.layer]?.y || 0).strength(d => d.layer ? layerStrength : 0.03));
-
-  // Custom clustering force \u2014 surface tension pulling nodes toward their layer centroid
-  function clusterForce() {
-    let nodes;
-    function force(alpha) {
-      const centroids = {};
-      const counts = {};
-      nodes.forEach(n => {
-        if (!n.layer) return;
-        if (!centroids[n.layer]) { centroids[n.layer] = {x: 0, y: 0}; counts[n.layer] = 0; }
-        centroids[n.layer].x += n.x;
-        centroids[n.layer].y += n.y;
-        counts[n.layer]++;
-      });
-      Object.keys(centroids).forEach(k => {
-        centroids[k].x /= counts[k];
-        centroids[k].y /= counts[k];
-      });
-      // Pull each node toward its layer centroid (surface tension)
-      const strength = 0.2;
-      nodes.forEach(n => {
-        if (!n.layer || !centroids[n.layer]) return;
-        n.vx += (centroids[n.layer].x - n.x) * alpha * strength;
-        n.vy += (centroids[n.layer].y - n.y) * alpha * strength;
-      });
-    }
-    force.initialize = (n) => { nodes = n; };
-    return force;
-  }
-  simulation.force('cluster', clusterForce());
-
-  // Boost link strength for intra-layer edges (tighter connections within a layer)
-  simulation.force('link').strength(l => {
-    const sLayer = (l.source.layer ?? l.source);
-    const tLayer = (l.target.layer ?? l.target);
-    return sLayer === tLayer ? 0.4 : 0.1;
-  });
-
-  hullGroup = g.insert('g', ':first-child');
-
-  function updateHulls() {
-    if (!hullGroup) return;
-    hullGroup.selectAll('*').remove();
-    // Show hulls always (filter to selected layers when focused)
-
-    LAYERS.forEach(layer => {
-      if (activeLayers.size > 0 && !activeLayers.has(layer.name)) return;
-      const layerNodes = DATA.nodes.filter(n => n.layer === layer.name);
-      if (layerNodes.length === 0) return;
-
-      const points = [];
-      layerNodes.forEach(n => {
-        if (n.x == null || n.y == null) return;
-        const r = nodeRadius(n) * nodeScale + 30;
-        // Add expanded points for a nicer hull shape
-        for (let a = 0; a < Math.PI * 2; a += Math.PI / 4) {
-          points.push([n.x + Math.cos(a) * r, n.y + Math.sin(a) * r]);
-        }
-      });
-
-      if (points.length < 3) {
-        // Fallback: circle for 1-2 nodes
-        const cx = layerNodes.reduce((s, n) => s + (n.x || 0), 0) / layerNodes.length;
-        const cy = layerNodes.reduce((s, n) => s + (n.y || 0), 0) / layerNodes.length;
-        const maxR = Math.max(60, ...layerNodes.map(n => {
-          const dx = (n.x || 0) - cx, dy = (n.y || 0) - cy;
-          return Math.sqrt(dx*dx + dy*dy) + nodeRadius(n) * nodeScale + 30;
-        }));
-        hullGroup.append('circle')
-          .attr('cx', cx).attr('cy', cy).attr('r', maxR)
-          .attr('class', 'layer-hull')
-          .attr('fill', layer.color).attr('stroke', layer.color);
-        hullGroup.append('text')
-          .attr('class', 'layer-hull-label')
-          .attr('x', cx).attr('y', cy - maxR - 8)
-          .attr('text-anchor', 'middle')
-          .attr('fill', layer.color)
-          .text(layer.name);
-        return;
-      }
-
-      const hull = d3.polygonHull(points);
-      if (!hull) return;
-
-      // Smooth the hull with a cardinal closed curve
-      hullGroup.append('path')
-        .attr('class', 'layer-hull')
-        .attr('d', d3.line().curve(d3.curveCatmullRomClosed.alpha(0.5))(hull))
-        .attr('fill', layer.color).attr('stroke', layer.color);
-
-      // Label at the top of the hull
-      const topPt = hull.reduce((best, p) => p[1] < best[1] ? p : best, hull[0]);
-      hullGroup.append('text')
-        .attr('class', 'layer-hull-label')
-        .attr('x', topPt[0]).attr('y', topPt[1] - 10)
-        .attr('text-anchor', 'middle')
-        .attr('fill', layer.color)
-        .text(layer.name);
-    });
-  }
-
-  // Update hulls + cross-layer links on each tick
-  simulation.on('tick', () => {
-    // Regular links
-    link.each(function(d) {
-      const dx=d.target.x-d.source.x, dy=d.target.y-d.source.y;
-      const dist=Math.sqrt(dx*dx+dy*dy)||1;
-      const rT=nodeRadius(d.target)*nodeScale, rS=nodeRadius(d.source)*nodeScale;
-      d3.select(this)
-        .attr('x1',d.source.x+(dx/dist)*rS).attr('y1',d.source.y+(dy/dist)*rS)
-        .attr('x2',d.target.x-(dx/dist)*rT).attr('y2',d.target.y-(dy/dist)*rT);
-    });
-    node.attr('transform', d=>\`translate(\${d.x},\${d.y})\`);
-    // Cross-layer links \u2014 resolve node positions by ID
-    if (crossLinkData.length > 0) {
-      const nodeById = {};
-      DATA.nodes.forEach(n => { nodeById[n.id] = n; });
-      crossLink.each(function(d) {
-        const sN = nodeById[d.source], tN = nodeById[d.target];
-        if (!sN || !tN) return;
-        const dx = tN.x - sN.x, dy = tN.y - sN.y;
-        const dist = Math.sqrt(dx*dx + dy*dy) || 1;
-        const rS = nodeRadius(sN) * nodeScale, rT = nodeRadius(tN) * nodeScale;
-        d3.select(this)
-          .attr('x1', sN.x + (dx/dist)*rS).attr('y1', sN.y + (dy/dist)*rS)
-          .attr('x2', tN.x - (dx/dist)*rT).attr('y2', tN.y - (dy/dist)*rT);
-      });
-      crossLabel.each(function(d) {
-        const sN = nodeById[d.source], tN = nodeById[d.target];
-        if (!sN || !tN) return;
-        d3.select(this).attr('x', (sN.x + tN.x) / 2).attr('y', (sN.y + tN.y) / 2 - 6);
-      });
-    }
-    updateHulls();
-  });
-
-  // \u2500\u2500\u2500 Layer legend \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-  const layerLegend = document.getElementById('layer-legend');
-  LAYERS.forEach(layer => {
-    const item = document.createElement('div');
-    item.className = 'legend-item';
-    item.innerHTML = '<div class="legend-dot" style="background:' + layer.color + '"></div> ' + layer.name;
-    layerLegend.appendChild(item);
-  });
-  // Cross-layer edge legend
-  if (CROSS_EDGES && CROSS_EDGES.length > 0) {
-    const crossItem = document.createElement('div');
-    crossItem.className = 'legend-item';
-    crossItem.innerHTML = '<span style="color:#f0883e;font-size:11px">- - \u2192</span> Cross-layer link';
-    layerLegend.appendChild(crossItem);
-  }
-  // Add separator
-  const sep = document.createElement('hr');
-  sep.style.cssText = 'border:none;border-top:1px solid var(--border);margin:6px 0;';
-  layerLegend.appendChild(sep);
-
-  // \u2500\u2500\u2500 Layer tabs (multi-select toggles in tab bar) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-  const layerTabsEl = document.getElementById('layer-tabs');
-  const allTab = document.createElement('div');
-  allTab.className = 'layer-tab active';
-  allTab.textContent = 'All';
-  allTab.onclick = () => {
-    activeLayers.clear();
-    syncLayerTabUI();
-    applyLayerFilter();
-    if (hierBuilt && hierSyncFromTab) { hierSyncFromTab(); hierRelayout(); }
-  };
-  layerTabsEl.appendChild(allTab);
-
-  LAYERS.forEach(layer => {
-    const tab = document.createElement('div');
-    tab.className = 'layer-tab';
-    tab.dataset.layer = layer.name;
-    tab.innerHTML = '<div class="lt-dot" style="background:' + layer.color + '"></div>' + layer.name;
-    tab.onclick = (e) => {
-      if (e.shiftKey) {
-        // Shift+click: solo this layer
-        activeLayers.clear();
-        activeLayers.add(layer.name);
-      } else {
-        // Toggle
-        if (activeLayers.has(layer.name)) activeLayers.delete(layer.name);
-        else activeLayers.add(layer.name);
-      }
-      syncLayerTabUI();
-      applyLayerFilter();
-      if (hierBuilt && hierSyncFromTab) { hierSyncFromTab(); hierRelayout(); }
-    };
-    layerTabsEl.appendChild(tab);
-  });
-
-  function syncLayerTabUI() {
-    allTab.classList.toggle('active', activeLayers.size === 0);
-    layerTabsEl.querySelectorAll('.layer-tab[data-layer]').forEach(t => {
-      t.classList.toggle('active', activeLayers.has(t.dataset.layer));
-    });
-    // Also sync the filter bar layer pills
-    layerRowEl.querySelectorAll('.layer-pill[data-layer]').forEach(p => {
-      p.classList.toggle('active', activeLayers.has(p.dataset.layer));
-    });
-  }
-
-  applyLayerFilter = function() {
-    const isSingleLayer = activeLayers.size === 1;
-    const hasLayerFilter = activeLayers.size > 0;
-    node.attr('display', d => {
-      if (!activeDirs.has(d.dir)) return 'none';
-      if (hasLayerFilter && !activeLayers.has(d.layer)) return 'none';
-      return null;
-    });
-    link.attr('display', l => {
-      const s = l.source.id ?? l.source, t = l.target.id ?? l.target;
-      const sN = DATA.nodes.find(n => n.id === s), tN = DATA.nodes.find(n => n.id === t);
-      if (!sN || !tN) return 'none';
-      if (!activeDirs.has(sN.dir) || !activeDirs.has(tN.dir)) return 'none';
-      if (hasLayerFilter && (!activeLayers.has(sN.layer) || !activeLayers.has(tN.layer))) return 'none';
-      return null;
-    });
-    // Refresh node colors: single-layer = dir-based, multi-layer = layer-based
-    node.select('circle')
-      .attr('fill', nodeColor)
-      .attr('stroke', d => d.deps >= 5 ? 'var(--yellow)' : nodeColor(d));
-    // Cross-layer links: respect user toggle + layer filter
-    if (typeof crossLink !== 'undefined') {
-      if (!crossLinksUserEnabled || isSingleLayer) {
-        crossLink.attr('display', 'none');
-        crossLabel.attr('display', 'none');
-      } else if (hasLayerFilter) {
-        crossLink.attr('display', d => (activeLayers.has(d.sourceLayer) && activeLayers.has(d.targetLayer)) ? null : 'none');
-        crossLabel.attr('display', d => (activeLayers.has(d.sourceLayer) && activeLayers.has(d.targetLayer)) ? null : 'none');
-      } else {
-        crossLink.attr('display', null);
-        crossLabel.attr('display', null);
-      }
-    }
-    // Update stats
-    const visibleNodes = DATA.nodes.filter(d => {
-      if (!activeDirs.has(d.dir)) return false;
-      if (hasLayerFilter && !activeLayers.has(d.layer)) return false;
-      return true;
-    });
-    const visibleIds = new Set(visibleNodes.map(n => n.id));
-    const visibleEdges = DATA.links.filter(l => {
-      const s = l.source.id ?? l.source, t = l.target.id ?? l.target;
-      return visibleIds.has(s) && visibleIds.has(t);
-    });
-    document.getElementById('s-files').textContent = visibleNodes.length;
-    document.getElementById('s-edges').textContent = visibleEdges.length;
-    const visCirc = DATA.circularFiles.filter(f => visibleIds.has(f));
-    document.getElementById('s-circular').textContent = visCirc.length;
-    updateHulls();
-    // Adjust physics: single-layer = centered, multi-select = compact, all = full spread
-    const lStrength = layerGravity / 100;
-    if (isSingleLayer) {
-      simulation.force('charge', d3.forceManyBody().strength(-gravityStrength * 3).distanceMax(800));
-      simulation.force('layerX', d3.forceX(0).strength(0.03));
-      simulation.force('layerY', d3.forceY(0).strength(0.03));
-    } else {
-      const centers = getLayerCenters();
-      simulation.force('charge', d3.forceManyBody().strength(-gravityStrength).distanceMax(500));
-      simulation.force('layerX', d3.forceX(d => centers[d.layer]?.x || 0).strength(d => d.layer ? lStrength : 0.03));
-      simulation.force('layerY', d3.forceY(d => centers[d.layer]?.y || 0).strength(d => d.layer ? lStrength : 0.03));
-    }
-    simulation.alpha(0.6).restart();
-    // Zoom to fit visible nodes after simulation settles
-    setTimeout(() => zoomFit(), 600);
-  }
-
-  // \u2500\u2500\u2500 Layer filter pills (new grouped bar) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-  const layerRowEl = document.getElementById('filter-layer-row');
-  const dirPanelEl = document.getElementById('filter-dir-panel');
-
-  // Dir toggle button
-  const dirToggle = document.createElement('div');
-  dirToggle.id = 'filter-dir-toggle';
-  dirToggle.textContent = '\u25B8 Dirs';
-  dirToggle.onclick = () => {
-    dirToggle.classList.toggle('open');
-    dirPanelEl.classList.toggle('open');
-    dirToggle.textContent = dirPanelEl.classList.contains('open') ? '\u25BE Dirs' : '\u25B8 Dirs';
-  };
-  layerRowEl.appendChild(dirToggle);
-
-  // Cross-layer link toggle (in settings sidebar)
-  let crossLinksUserEnabled = true;
-  if (crossLinkData.length > 0) {
-    document.getElementById('cross-layer-setting').style.display = '';
-    window.toggleCrossLinks = () => {
-      crossLinksUserEnabled = !crossLinksUserEnabled;
-      const btn = document.getElementById('cross-link-toggle');
-      btn.textContent = crossLinksUserEnabled ? 'ON' : 'OFF';
-      btn.classList.toggle('active', crossLinksUserEnabled);
-      applyLayerFilter();
-    };
-  }
-
-  LAYERS.forEach(layer => {
-    const layerNodes = DATA.nodes.filter(n => n.layer === layer.name);
-    const pill = document.createElement('div');
-    pill.className = 'layer-pill';
-    pill.dataset.layer = layer.name;
-    pill.innerHTML = '<div class="lp-dot" style="background:' + layer.color + '"></div>' + layer.name + ' <span class="lp-count">' + layerNodes.length + '</span>';
-    pill.onclick = () => {
-      if (activeLayers.has(layer.name)) activeLayers.delete(layer.name);
-      else activeLayers.add(layer.name);
-      syncLayerTabUI();
-      applyLayerFilter();
-    };
-    pill.onmouseenter = () => {
-      if (pinnedNode) return;
-      node.select('circle').transition().duration(120).attr('opacity', d => d.layer === layer.name ? 1 : 0.1);
-      node.select('text').transition().duration(120).attr('opacity', d => d.layer === layer.name ? 1 : 0.05);
-    };
-    pill.onmouseleave = () => {
-      if (pinnedNode) return;
-      node.select('circle').transition().duration(150).attr('opacity', 1);
-      node.select('text').transition().duration(150).attr('opacity', d => d.dependents >= 1 || d.deps >= 3 ? 1 : 0.5);
-    };
-    layerRowEl.appendChild(pill);
-
-    // Build dir group in panel for this layer
-    const layerDirs = [...new Set(layerNodes.map(n => n.dir))].sort();
-    if (layerDirs.length > 0) {
-      const group = document.createElement('div');
-      group.className = 'dir-group';
-      const label = document.createElement('div');
-      label.className = 'dir-group-label';
-      label.innerHTML = '<div class="dg-dot" style="background:' + layer.color + '"></div>' + layer.name;
-      group.appendChild(label);
-      const pillsWrap = document.createElement('div');
-      pillsWrap.className = 'dir-group-pills';
-      layerDirs.forEach(dir => {
-        const dp = document.createElement('div');
-        dp.className = 'filter-pill active';
-        const shortDir = dir.includes('/') ? dir.substring(dir.indexOf('/') + 1) : dir;
-        dp.innerHTML = '<div class="pill-dot" style="background:' + dirColor(dir) + '"></div>' + (shortDir || '.') + ' <span class="pill-count">' + (dirCounts[dir] || 0) + '</span>';
-        dp.onclick = () => {
-          if (activeDirs.has(dir)) { activeDirs.delete(dir); dp.classList.remove('active'); }
-          else { activeDirs.add(dir); dp.classList.add('active'); }
-          applyLayerFilter();
-        };
-        pillsWrap.appendChild(dp);
-      });
-      group.appendChild(pillsWrap);
-      dirPanelEl.appendChild(group);
-    }
-  });
-
-  // Override applyFilter to respect layers
-  window._origApplyFilter = applyFilter;
-}
-
-setTimeout(()=>zoomFit(), 1500);
-
-// Restore saved settings \u2014 phase 2: apply to graph elements now that they exist
-if (_savedSettings) {
-  if (_savedSettings.fontSize) setFontSize(_savedSettings.fontSize);
-}
-
-// \u2500\u2500\u2500 Highlight helper \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
-let pinnedNode = null;
-
-function highlightNode(d) {
-  const conn = new Set([d.id]);
-  DATA.links.forEach(l => { const s=l.source.id??l.source,t=l.target.id??l.target; if(s===d.id)conn.add(t); if(t===d.id)conn.add(s); });
-  node.select('circle').transition().duration(150).attr('opacity',n=>conn.has(n.id)?1:0.1);
-  node.select('text').transition().duration(150).attr('opacity',n=>conn.has(n.id)?1:0.05);
-  link.transition().duration(150)
-    .attr('opacity',l=>{const s=l.source.id??l.source,t=l.target.id??l.target;return s===d.id||t===d.id?0.9:0.03;})
-    .attr('stroke',l=>{const s=l.source.id??l.source,t=l.target.id??l.target;if(s===d.id)return'#58a6ff';if(t===d.id)return'#3fb950';return l.type==='type-only'?'#1f3d5c':'#30363d';})
-    .attr('stroke-width',l=>{const s=l.source.id??l.source,t=l.target.id??l.target;return s===d.id||t===d.id?2:1;})
-    .attr('marker-end',l=>{const s=l.source.id??l.source,t=l.target.id??l.target;if(s===d.id)return'url(#arrow-1)';if(t===d.id)return'url(#arrow-2)';return'url(#arrow-0)';});
-}
-
-function resetGraphHighlight() {
-  pinnedNode = null;
-  node.select('circle').transition().duration(200).attr('opacity',1);
-  node.select('text').transition().duration(200).attr('opacity',d=>d.dependents>=1||d.deps>=3?1:0.5);
-  link.transition().duration(200)
-    .attr('opacity',baseLinkOpacity)
-    .attr('stroke',d=>d.type==='type-only'?'#1f3d5c':'#30363d')
-    .attr('stroke-width',1).attr('marker-end','url(#arrow-0)');
-}
-
-// \u2500\u2500\u2500 Hover \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\u2500\u2500\u2500\u2500
-node.on('mouseover', (e,d) => {
-  showTooltip(e,d);
-  if (!pinnedNode) highlightNode(d);
-})
-.on('mousemove', e=>positionTooltip(e))
-.on('mouseout', () => { scheduleHideTooltip(); if (!pinnedNode) { /* highlight resets via scheduleHideTooltip */ } });
-
-// \u2500\u2500\u2500 Click: pin highlight + detail panel \u2500\u2500\u2500\u2500\u2500
-node.on('click', (e,d) => {
-  e.stopPropagation();
-  pinnedNode = d;
-  highlightNode(d);
-  showDetail(d);
-});
-svg.on('click', () => {
-  resetGraphHighlight();
-  tooltip.style.display = 'none';
-  tooltipLocked = false;
-  closeDetail();
-});
-
-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;
-  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>';
-  p.classList.add('open');
-}
-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);
-  svg.transition().duration(500).call(zoom.transform,d3.zoomIdentity.translate(W/2-n.x*1.5,H/2-n.y*1.5).scale(1.5));
-};
-
-// Drag
-function dragStart(e,d){if(!e.active)simulation.alphaTarget(0.3).restart();d.fx=d.x;d.fy=d.y;}
-function dragging(e,d){d.fx=e.x;d.fy=e.y;}
-function dragEnd(e,d){if(!e.active)simulation.alphaTarget(0);}
-
-// \u2500\u2500\u2500 Search \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\u2500\u2500\u2500
-const searchInput=document.getElementById('search');
-document.addEventListener('keydown',e=>{
-  if(e.key==='/'&&document.activeElement!==searchInput){e.preventDefault();searchInput.focus();}
-  if(e.key==='Escape'){searchInput.value='';searchInput.blur();resetGraphHighlight();}
-});
-searchInput.addEventListener('input',e=>{
-  const q=e.target.value.toLowerCase();
-  if(!q){resetGraphHighlight();return;}
-  node.select('circle').attr('opacity',d=>d.id.toLowerCase().includes(q)?1:0.06);
-  node.select('text').attr('opacity',d=>d.id.toLowerCase().includes(q)?1:0.04);
-  link.attr('opacity',0.03);
-});
-
-// \u2500\u2500\u2500 Filters (click=toggle, hover=highlight nodes) \u2500\u2500
-if (!LAYERS) {
-  // Non-layer mode: flat pills in filter-layer-row
-  const filterRowEl=document.getElementById('filter-layer-row');
-  DATA.dirs.forEach(dir=>{
-    const pill=document.createElement('div');
-    pill.className='filter-pill active';
-    pill.innerHTML='<div class="pill-dot" style="background:'+dirColor(dir)+'"></div>'+(dir||'.')+' <span class="pill-count">'+dirCounts[dir]+'</span>';
-    pill.onclick=()=>{
-      if(activeDirs.has(dir)){activeDirs.delete(dir);pill.classList.remove('active');}
-      else{activeDirs.add(dir);pill.classList.add('active');}
-      applyFilter();
-    };
-    pill.onmouseenter=()=>{
-      if(pinnedNode)return;
-      node.select('circle').transition().duration(120).attr('opacity',d=>d.dir===dir?1:0.1);
-      node.select('text').transition().duration(120).attr('opacity',d=>d.dir===dir?1:0.05);
-    };
-    pill.onmouseleave=()=>{
-      if(pinnedNode)return;
-      node.select('circle').transition().duration(150).attr('opacity',1);
-      node.select('text').transition().duration(150).attr('opacity',d=>d.dependents>=1||d.deps>=3?1:0.5);
-    };
-    filterRowEl.appendChild(pill);
-  });
-}
-function applyFilter(){
-  if (LAYERS) {
-    // Delegate to layer-aware filter
-    if (typeof applyLayerFilter === 'function') { applyLayerFilter(); return; }
-  }
-  node.attr('display',d=>activeDirs.has(d.dir)?null:'none');
-  link.attr('display',l=>{
-    const s=l.source.id??l.source,t=l.target.id??l.target;
-    const sD=DATA.nodes.find(n=>n.id===s)?.dir,tD=DATA.nodes.find(n=>n.id===t)?.dir;
-    return activeDirs.has(sD)&&activeDirs.has(tD)?null:'none';
-  });
-}
-
-// \u2500\u2500\u2500 Impact simulation mode \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-let impactMode=false;
-const impactBadge=document.getElementById('impact-badge');
-window.toggleImpactMode=()=>{
-  impactMode=!impactMode;
-  document.getElementById('impact-btn').classList.toggle('active',impactMode);
-  if(!impactMode){impactBadge.style.display='none';resetGraphHighlight();}
-};
-function getTransitiveDependents(startId){
-  const result=new Set();const queue=[startId];
-  const revMap={};
-  DATA.links.forEach(l=>{const s=l.source.id??l.source,t=l.target.id??l.target;if(!revMap[t])revMap[t]=[];revMap[t].push(s);});
-  while(queue.length){const id=queue.shift();if(result.has(id))continue;result.add(id);(revMap[id]||[]).forEach(x=>queue.push(x));}
-  return result;
-}
-// Override click in impact mode
-const origClick=node.on('click');
-node.on('click',(e,d)=>{
-  if(!impactMode){e.stopPropagation();pinnedNode=d;highlightNode(d);showDetail(d);return;}
-  e.stopPropagation();
-  const affected=getTransitiveDependents(d.id);
-  node.select('circle').transition().duration(200).attr('opacity',n=>affected.has(n.id)?1:0.06)
-    .attr('stroke',n=>affected.has(n.id)&&n.id!==d.id?'var(--red)':n.deps>=5?'var(--yellow)':nodeColor(n))
-    .attr('stroke-width',n=>affected.has(n.id)?3:1.5);
-  node.select('text').transition().duration(200).attr('opacity',n=>affected.has(n.id)?1:0.04);
-  link.transition().duration(200).attr('opacity',l=>{
-    const s=l.source.id??l.source,t=l.target.id??l.target;
-    return affected.has(s)&&affected.has(t)?0.8:0.03;
-  }).attr('stroke',l=>{
-    const s=l.source.id??l.source,t=l.target.id??l.target;
-    return affected.has(s)&&affected.has(t)?'var(--red)':l.type==='type-only'?'#1f3d5c':'#30363d';
-  });
-  impactBadge.textContent=d.id.split('/').pop()+' \u2192 '+(affected.size-1)+' '+i('impact.transitive');
-  impactBadge.style.display='block';
-});
-
-window.addEventListener('resize',()=>{
-  const w=window.innerWidth,h=window.innerHeight-44;
-  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('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')+': '+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 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:'+layer.color+'"></div>'+layer.name+' <span class="lp-count">'+count+'</span>';
-      pill.onclick=(e)=>{
-        if (e.shiftKey) {
-          hActiveLayers.clear();
-          hActiveLayers.add(layer.name);
-        } else {
-          if (hActiveLayers.has(layer.name)) hActiveLayers.delete(layer.name);
-          else hActiveLayers.add(layer.name);
-        }
-        // Sync pill UI
-        hFilterRow.querySelectorAll('.layer-pill').forEach(function(p) {
-          var ln = p.dataset.layer;
-          if (ln === 'all') p.classList.toggle('active', hActiveLayers.size === 0);
-          else p.classList.toggle('active', hActiveLayers.has(ln));
-        });
-        hierRelayoutInner();
-      };
-      hFilterRow.appendChild(pill);
-    });
-  } else {
-    const hActiveDirs=new Set(DATA.dirs);
-    DATA.dirs.forEach(dir=>{
-      const pill=document.createElement('div');
-      pill.className='filter-pill active';
-      pill.innerHTML='<div class="pill-dot" style="background:'+dirColor(dir)+'"></div>'+(dir||'.')+' <span class="pill-count">'+(dirCounts[dir]||0)+'</span>';
-      pill.onclick=()=>{
-        if(hActiveDirs.has(dir)){hActiveDirs.delete(dir);pill.classList.remove('active');}
-        else{hActiveDirs.add(dir);pill.classList.add('active');}
-        nodeG.selectAll('.hier-node').attr('opacity',function(){const nId=this.__data_id;return hActiveDirs.has(nodeMap[nId]?.dir)?1:0.1;});
-      };
-      hFilterRow.appendChild(pill);
-    });
-  }
-
-  // Assign function pointers for cross-view sync
-  hierRelayout = hierRelayoutInner;
-  hierSyncFromTab = hierSyncFromTabInner;
-
-  hSvg.call(hZoom.transform,d3.zoomIdentity.translate(
-    Math.max(0,(W-totalW)/2),20
-  ).scale(Math.min(1,W/(totalW+40),H/(totalH+40))));
-
-  // If a layer tab was already selected, sync hierarchy on first build
-  if (activeLayerFilter) {
-    hierSyncFromTabInner(activeLayerFilter);
-    hierRelayoutInner();
-  }
-}
-
-// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-// 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 simNodes = DATA.nodes.map(d=>({...d, x:undefined, y:undefined, vx:undefined, vy:undefined}));
-    const simLinks = DATA.links.map(d=>({source:d.source.id??d.source,target:d.target.id??d.target,type:d.type}));
+.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%; }
 
-    const dLink = dG.append('g').selectAll('line').data(simLinks).join('line')
-      .attr('stroke','#30363d').attr('stroke-width',1).attr('marker-end','url(#darrow)').attr('opacity',0.3);
+/* \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>`;
+}
 
-    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');
+// 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>
+      <span><span data-i18n="stats.edges">Edges</span> <b id="s-edges">0</b></span>
+      <span><span data-i18n="stats.circular">Circular</span> <b id="s-circular">0</b></span>
+    </div>
+    <button class="settings-btn" onclick="toggleSettings()" title="Settings">\u2699</button>
+  </div>
+</div>
 
-    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));
+<!-- Settings panel -->
+<div id="settings-panel">
+  <h3 data-i18n="settings.title">Settings</h3>
+  <div class="setting-group">
+    <label data-i18n="settings.theme">Theme</label>
+    <div class="theme-toggle">
+      <div class="theme-btn active" data-theme-val="dark" onclick="setTheme('dark')">\u{1F319} Dark</div>
+      <div class="theme-btn" data-theme-val="light" onclick="setTheme('light')">\u2600\uFE0F Light</div>
+    </div>
+  </div>
+  <div class="setting-group">
+    <label data-i18n="settings.fontSize">Font Size</label>
+    <input type="range" id="font-size-slider" min="10" max="18" value="13" oninput="setFontSize(this.value)">
+    <div class="setting-value"><span id="font-size-val">13</span>px</div>
+  </div>
+  <div class="setting-group">
+    <label data-i18n="settings.nodeSize">Node Size</label>
+    <input type="range" id="node-size-slider" min="50" max="200" value="100" oninput="setNodeScale(this.value)">
+    <div class="setting-value"><span id="node-size-val">100</span>%</div>
+  </div>
+  <div class="setting-group">
+    <label data-i18n="settings.linkOpacity">Link Opacity</label>
+    <input type="range" id="link-opacity-slider" min="10" max="100" value="40" oninput="setLinkOpacity(this.value)">
+    <div class="setting-value"><span id="link-opacity-val">40</span>%</div>
+  </div>
+  <div class="setting-group">
+    <label data-i18n="settings.gravity">Gravity</label>
+    <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">
+      <div class="theme-btn lang-btn" data-lang="en" onclick="setLang('en')">English</div>
+      <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">
+      <div class="theme-btn" onclick="exportSVG()">SVG</div>
+      <div class="theme-btn" onclick="exportPNG()">PNG</div>
+    </div>
+  </div>
+</div>
 
-    // 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;
-      })());
+<!-- Graph View -->
+<div id="graph-view" class="view active">
+  <svg id="graph-svg"></svg>
+  <div id="hud">
+    <div class="hud-panel" id="search-box">
+      <svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor" style="color:var(--text-muted)"><path d="M11.5 7a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm-.82 4.74a6 6 0 1 1 1.06-1.06l3.04 3.04a.75.75 0 1 1-1.06 1.06l-3.04-3.04Z"/></svg>
+      <input id="search" type="text" data-i18n-placeholder="search.placeholder" placeholder="Search files..." autocomplete="off">
+      <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>
+      <div class="legend-item" style="margin-top:4px;font-size:11px;gap:3px"><span style="color:var(--accent)">\u2014\u2192</span> <span data-i18n="legend.imports">imports</span> <span style="margin-left:6px;color:var(--green)">\u2190\u2014</span> <span data-i18n="legend.importedBy">imported by</span></div>
+    </div>
+  </div>
+  <div id="detail">
+    <button class="close-btn" onclick="closeDetail()">\u2715</button>
+    <div class="detail-name" id="d-name"></div>
+    <div class="detail-meta" id="d-meta"></div>
+    <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="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">\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>
+  <div id="help-bar" data-i18n="help.graph">Scroll: zoom \xB7 Drag: pan \xB7 Click: select \xB7 / search</div>
+</div>
 
-      dHullGroup = dG.insert('g', ':first-child');
-    }
+<!-- Hierarchy View -->
+<div id="hier-view" class="view">
+  <svg id="hier-svg"></svg>
+  <div id="hier-hud" style="position:absolute;top:12px;left:12px;z-index:10;display:flex;flex-direction:column;gap:8px;">
+    <div class="hud-panel" id="hier-legend">
+      <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>
+    </div>
+  </div>
+  <div id="hier-detail">
+    <button class="close-btn" onclick="closeHierDetail()">\u2715</button>
+    <div class="detail-name" id="hd-name"></div>
+    <div class="detail-meta" id="hd-meta"></div>
+    <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-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>
 
-    function isDiffNode(id) {
-      return addedSet.has(id) || removedSet.has(id) || modifiedSet.has(id) || affectedSet.has(id);
-    }
+<!-- Diff View -->
+<div id="diff-view" class="view">
+  <svg id="diff-svg"></svg>
+  <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> <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="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>
 
-    function updateDiffHulls() {
-      if (!dHullGroup) return;
-      dHullGroup.selectAll('*').remove();
-      LAYERS.forEach(function(layer) {
-        var layerNodes = simNodes.filter(function(n) { return n.layer === layer.name; });
-        if (layerNodes.length === 0) return;
-        var hasDiff = layerNodes.some(function(n) { return isDiffNode(n.id); });
+<!-- Tooltip (shared, interactive) -->
+<div id="tooltip">
+  <div class="tt-name" id="tt-name"></div>
+  <div>
+    <span class="tt-badge tt-out" id="tt-dep-count"></span> <span data-i18n="tooltip.imports">imports</span>
+    <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>`;
+}
 
-        var points = [];
-        layerNodes.forEach(function(n) {
-          if (n.x == null || n.y == null) return;
-          var r = nodeRadius(n) * nodeScale + 30;
-          for (var a = 0; a < Math.PI * 2; a += Math.PI / 4) {
-            points.push([n.x + Math.cos(a) * r, n.y + Math.sin(a) * r]);
-          }
-        });
+// src/utils/html-escape.ts
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
 
-        var fillOp = hasDiff ? 0.15 : 0.06;
-        var strokeOp = hasDiff ? 0.6 : 0.2;
-        var sw = hasDiff ? 2.5 : 1;
-        if (points.length < 6) {
-          var cx = layerNodes.reduce(function(s, n) { return s + (n.x||0); }, 0) / layerNodes.length;
-          var cy = layerNodes.reduce(function(s, n) { return s + (n.y||0); }, 0) / layerNodes.length;
-          dHullGroup.append('circle').attr('cx', cx).attr('cy', cy).attr('r', 50)
-            .attr('fill', layer.color).attr('fill-opacity', fillOp)
-            .attr('stroke', layer.color).attr('stroke-opacity', strokeOp).attr('stroke-width', sw);
-        } else {
-          var hull = d3.polygonHull(points);
-          if (hull) {
-            dHullGroup.append('path')
-              .attr('d', 'M' + hull.map(function(p) { return p.join(','); }).join('L') + 'Z')
-              .attr('fill', layer.color).attr('fill-opacity', fillOp)
-              .attr('stroke', layer.color).attr('stroke-opacity', strokeOp).attr('stroke-width', sw)
-              .attr('stroke-dasharray', hasDiff ? null : '6,3');
-          }
-        }
-        // Layer name label
-        var lx = layerNodes.reduce(function(s, n) { return s + (n.x||0); }, 0) / layerNodes.length;
-        var ly = Math.min.apply(null, layerNodes.map(function(n) { return n.y||0; })) - 25;
-        dHullGroup.append('text')
-          .attr('x', lx).attr('y', ly).attr('text-anchor', 'middle')
-          .attr('fill', layer.color).attr('fill-opacity', hasDiff ? 0.9 : 0.4)
-          .attr('font-size', 12).attr('font-weight', 600).text(layer.name);
-      });
+// src/web/template.ts
+var _viewerJs = null;
+function getViewerJs() {
+  if (!_viewerJs) {
+    const thisDir = dirname2(fileURLToPath(import.meta.url));
+    const candidates = [
+      join8(thisDir, "..", "web", "viewer.js"),
+      // dist/mcp/ or dist/cli/ → dist/web/
+      join8(thisDir, "..", "..", "dist", "web", "viewer.js")
+      // src/web/ → dist/web/
+    ];
+    for (const p of candidates) {
+      try {
+        _viewerJs = readFileSync3(p, "utf-8");
+        break;
+      } catch {
+      }
     }
-
-    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 % 3 === 0) updateDiffHulls();
-      });
-
-    dNode.on('mouseover',function(e,d) { showTooltip(e,d); }).on('mousemove',function(e) { positionTooltip(e); }).on('mouseout',function() { scheduleHideTooltip(); });
-
-    setTimeout(function() {
-      var b=dG.node().getBBox(); if(!b.width) return;
-      var s=Math.min(W/(b.width+80),H/(b.height+80))*0.9;
-      dSvg.call(dZoom.transform,d3.zoomIdentity.translate(W/2-(b.x+b.width/2)*s,H/2-(b.y+b.height/2)*s).scale(s));
-    },1500);
+    if (!_viewerJs) throw new Error("viewer.js not found. Run 'npm run build:client' first.");
   }
-
-  // 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;}
-    });
-  });
+  return _viewerJs;
 }
-
-// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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
-applyI18n();
+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 });
+  const viewerJs = getViewerJs();
+  return (
+    /* html */
+    `<!DOCTYPE html>
+<html lang="${locale}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escapeHtml(projectName)} \u2014 Architecture Viewer</title>
+${buildStyles()}
+</head>
+<body>
+${buildViewerHtml()}
+<script src="https://d3js.org/d3.v7.min.js"></script>
+<script>
+window.__ARCH = {
+  data: ${graphData},
+  layers: ${layersData},
+  crossEdges: ${crossEdgesData},
+  diff: ${diffData},
+  locale: '${locale}'
+};
 </script>
+<script>${viewerJs}</script>
 </body>
 </html>`
   );
@@ -4260,17 +3284,17 @@ function startViewer(graph, options = {}) {
 }
 
 // src/utils/version.ts
-import { readFileSync as readFileSync3 } from "fs";
-import { join as join7, dirname as dirname2 } from "path";
-import { fileURLToPath } from "url";
+import { readFileSync as readFileSync4 } from "fs";
+import { join as join9, dirname as dirname3 } from "path";
+import { fileURLToPath as fileURLToPath2 } from "url";
 function loadVersion() {
-  let dir = dirname2(fileURLToPath(import.meta.url));
+  let dir = dirname3(fileURLToPath2(import.meta.url));
   for (let i = 0; i < 5; i++) {
     try {
-      const pkg = JSON.parse(readFileSync3(join7(dir, "package.json"), "utf-8"));
+      const pkg = JSON.parse(readFileSync4(join9(dir, "package.json"), "utf-8"));
       return pkg.version;
     } catch {
-      dir = dirname2(dir);
+      dir = dirname3(dir);
     }
   }
   return "0.0.0";
@@ -4279,36 +3303,14 @@ var VERSION = loadVersion();
 
 // src/cli/index.ts
 var VALID_LANGUAGES = LANGUAGE_IDS;
-async function resolveGraph(opts) {
-  const targetExplicit = process.argv.some((a) => a === "-t" || a === "--target");
-  if (!targetExplicit) {
-    const layerConfig = await loadLayerConfig(opts.root);
-    if (layerConfig) {
-      const multi = await analyzeMultiLayer(opts.root, layerConfig.layers);
-      const autoConnections = detectCrossLayerConnections(multi.layers, layerConfig.layers);
-      const manualConnections = layerConfig.connections ?? [];
-      const manualKeys = new Set(manualConnections.map(
-        (c) => `${c.fromLayer}/${c.fromFile}\u2192${c.toLayer}/${c.toFile}`
-      ));
-      const merged = [
-        ...manualConnections,
-        ...autoConnections.filter(
-          (c) => !manualKeys.has(`${c.fromLayer}/${c.fromFile}\u2192${c.toLayer}/${c.toFile}`)
-        )
-      ];
-      return {
-        graph: multi.merged,
-        multiLayer: multi,
-        layerMetadata: multi.layerMetadata,
-        crossLayerEdges: merged
-      };
-    }
-  }
-  const graph = await analyzeProject(opts.target, {
+async function resolveGraphCli(opts) {
+  return resolveGraph({
+    targetDir: opts.target,
+    projectRoot: opts.root,
     exclude: opts.exclude,
-    language: opts.language
+    language: opts.language,
+    noCache: opts.noCache
   });
-  return { graph };
 }
 var program = new Command();
 program.name("archtracker").description(
@@ -4326,13 +3328,17 @@ program.command("init").description("Generate initial snapshot and save to .arch
   try {
     const language = validateLanguage(opts.language);
     console.log(t("cli.analyzing"));
-    const { graph, multiLayer } = await resolveGraph({
+    const { graph, multiLayer } = await resolveGraphCli({
       target: opts.target,
       root: opts.root,
       exclude: opts.exclude,
       language
     });
-    const snapshot = await saveSnapshot(opts.root, graph, multiLayer);
+    const snapshot = await saveSnapshot(opts.root, graph, multiLayer, {
+      targetDir: opts.target,
+      language,
+      exclude: opts.exclude
+    });
     console.log(t("cli.snapshotSaved"));
     console.log(t("cli.timestamp", { ts: snapshot.timestamp }));
     console.log(t("cli.fileCount", { count: graph.totalFiles }));
@@ -4359,20 +3365,25 @@ program.command("analyze").description(
 ).option("-t, --target <dir>", "Target directory", "src").option("-r, --root <dir>", "Project root", ".").option(
   "-e, --exclude <patterns...>",
   "Exclude patterns (regex)"
-).option("-n, --top <number>", "Number of top components to show", "10").option("--save", "Also save a snapshot after analysis").option("-l, --language <lang>", `Target language (${LANGUAGE_IDS.join(", ")})`).action(async (opts) => {
+).option("-n, --top <number>", "Number of top components to show", "10").option("--save", "Also save a snapshot after analysis").option("--no-cache", "Force fresh analysis (ignore graph cache)").option("-l, --language <lang>", `Target language (${LANGUAGE_IDS.join(", ")})`).action(async (opts) => {
   try {
     const language = validateLanguage(opts.language);
     console.log(t("cli.analyzing"));
-    const { graph, multiLayer } = await resolveGraph({
+    const { graph, multiLayer } = await resolveGraphCli({
       target: opts.target,
       root: opts.root,
       exclude: opts.exclude,
-      language
+      language,
+      noCache: opts.noCache
     });
     const report = formatAnalysisReport(graph, { topN: parseInt(opts.top, 10) });
     console.log(report);
     if (opts.save) {
-      await saveSnapshot(opts.root, graph, multiLayer);
+      await saveSnapshot(opts.root, graph, multiLayer, {
+        targetDir: opts.target,
+        language,
+        exclude: opts.exclude
+      });
       console.log(t("analyze.snapshotSaved"));
     }
   } catch (error) {
@@ -4381,19 +3392,29 @@ program.command("analyze").description(
 });
 program.command("check").description(
   "Compare snapshot with current code and report change impacts"
-).option("-t, --target <dir>", "Target directory", "src").option("-r, --root <dir>", "Project root", ".").option("--ci", "CI mode: exit code 1 if affected files exist").option("-l, --language <lang>", `Target language (${LANGUAGE_IDS.join(", ")})`).action(async (opts) => {
+).option("-t, --target <dir>", "Target directory", "src").option("-r, --root <dir>", "Project root", ".").option("--ci", "CI mode: exit code 1 if affected files exist").option("--from <timestamp>", "Compare from a historical snapshot (use 'archtracker history' to see timestamps)").option("--no-cache", "Force fresh analysis (ignore graph cache)").option("-l, --language <lang>", `Target language (${LANGUAGE_IDS.join(", ")})`).action(async (opts) => {
   try {
     const language = validateLanguage(opts.language);
-    const existingSnapshot = await loadSnapshot(opts.root);
-    if (!existingSnapshot) {
-      console.log(t("cli.noSnapshot"));
-      process.exit(1);
+    let existingSnapshot;
+    if (opts.from) {
+      existingSnapshot = await loadSnapshotByTimestamp(opts.root, opts.from);
+      if (!existingSnapshot) {
+        console.log(t("history.snapshotNotFound", { ts: opts.from }));
+        process.exit(1);
+      }
+    } else {
+      existingSnapshot = await loadSnapshot(opts.root);
+      if (!existingSnapshot) {
+        console.log(t("cli.noSnapshot"));
+        process.exit(1);
+      }
     }
     console.log(t("cli.analyzing"));
-    const { graph: currentGraph } = await resolveGraph({
+    const { graph: currentGraph } = await resolveGraphCli({
       target: opts.target,
       root: opts.root,
-      language
+      language,
+      noCache: opts.noCache
     });
     const diff = computeDiff(existingSnapshot.graph, currentGraph);
     const report = formatDiffReport(diff);
@@ -4408,18 +3429,22 @@ program.command("check").description(
 });
 program.command("context").description(
   "Display current architecture context (for AI session initialization)"
-).option("-t, --target <dir>", "Target directory", "src").option("-r, --root <dir>", "Project root", ".").option("--json", "Output in JSON format").option("-l, --language <lang>", `Target language (${LANGUAGE_IDS.join(", ")})`).action(async (opts) => {
+).option("-t, --target <dir>", "Target directory", "src").option("-r, --root <dir>", "Project root", ".").option("--json", "Output in JSON format").option("--no-cache", "Force fresh analysis (ignore graph cache)").option("-l, --language <lang>", `Target language (${LANGUAGE_IDS.join(", ")})`).action(async (opts) => {
   try {
     const language = validateLanguage(opts.language);
     let snapshot = await loadSnapshot(opts.root);
     if (!snapshot) {
       console.log(t("cli.autoGenerating"));
-      const result = await resolveGraph({
+      const result = await resolveGraphCli({
         target: opts.target,
         root: opts.root,
+        language,
+        noCache: opts.noCache
+      });
+      snapshot = await saveSnapshot(opts.root, result.graph, result.multiLayer, {
+        targetDir: opts.target,
         language
       });
-      snapshot = await saveSnapshot(opts.root, result.graph, result.multiLayer);
     }
     const graph = snapshot.graph;
     if (opts.json) {
@@ -4456,17 +3481,18 @@ program.command("serve").description(
 ).option("-t, --target <dir>", "Target directory", "src").option("-r, --root <dir>", "Project root", ".").option("-p, --port <number>", "Port number", "3000").option(
   "-e, --exclude <patterns...>",
   "Exclude patterns (regex)"
-).option("-w, --watch", "Watch for file changes and auto-reload").option("-l, --language <lang>", `Target language (${LANGUAGE_IDS.join(", ")})`).action(async (opts) => {
+).option("-w, --watch", "Watch for file changes and auto-reload").option("--no-cache", "Force fresh analysis (ignore graph cache)").option("-l, --language <lang>", `Target language (${LANGUAGE_IDS.join(", ")})`).action(async (opts) => {
   try {
     const language = validateLanguage(opts.language);
     console.log(t("web.starting"));
     console.log(t("cli.analyzing"));
     let diff = null;
-    const result = await resolveGraph({
+    const result = await resolveGraphCli({
       target: opts.target,
       root: opts.root,
       exclude: opts.exclude,
-      language
+      language,
+      noCache: opts.noCache
     });
     const snapshot = await loadSnapshot(opts.root);
     if (snapshot) {
@@ -4489,11 +3515,13 @@ program.command("serve").description(
         debounce = setTimeout(async () => {
           try {
             console.log(t("web.reloading"));
-            const newResult = await resolveGraph({
+            const newResult = await resolveGraphCli({
               target: opts.target,
               root: opts.root,
               exclude: opts.exclude,
-              language
+              language,
+              noCache: true
+              // Watch mode always needs fresh analysis
             });
             viewer.close();
             startViewer(newResult.graph, {
@@ -4532,15 +3560,41 @@ jobs:
       - run: npx archtracker check --target ${opts.target} --ci
 `;
   try {
-    const dir = join8(".github", "workflows");
-    await mkdir3(dir, { recursive: true });
-    const path = join8(dir, "arch-check.yml");
-    await writeFile3(path, workflow, "utf-8");
+    const dir = join10(".github", "workflows");
+    await mkdir4(dir, { recursive: true });
+    const path = join10(dir, "arch-check.yml");
+    await writeFile4(path, workflow, "utf-8");
     console.log(t("ci.generated", { path }));
   } catch (error) {
     handleError(error);
   }
 });
+program.command("history").description("List all saved architecture snapshots").option("-r, --root <dir>", "Project root", ".").option("-n, --limit <number>", "Max entries to show", "20").action(async (opts) => {
+  try {
+    const snapshots = await listSnapshots(opts.root);
+    if (snapshots.length === 0) {
+      console.log(t("history.empty"));
+      return;
+    }
+    const limit = parseInt(opts.limit, 10);
+    const shown = snapshots.slice(0, limit);
+    console.log(t("history.title"));
+    console.log(t("history.count", { count: snapshots.length }));
+    console.log("");
+    for (const s of shown) {
+      const layers = s.hasMultiLayer ? " [multi-layer]" : "";
+      console.log(t("history.entry", {
+        ts: s.timestamp,
+        files: s.totalFiles,
+        edges: s.totalEdges,
+        circular: s.circularDeps,
+        layers
+      }));
+    }
+  } 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 {