archtracker-mcp 0.5.0 → 0.6.0

package/dist/cli/index.js

@@ -2175,44 +2175,145 @@ 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/analyzer/resolve.ts
+async function resolveGraph(opts) {
+  const layerConfig = await loadLayerConfig(opts.projectRoot);
+  if (layerConfig) {
+    const multi = await analyzeMultiLayer(opts.projectRoot, layerConfig.layers);
+    const autoConnections = detectCrossLayerConnections(multi.layers, layerConfig.layers);
+    const manualConnections = layerConfig.connections ?? [];
+    const manualKeys = new Set(manualConnections.map(
+      (c) => `${c.fromLayer}/${c.fromFile}\u2192${c.toLayer}/${c.toFile}`
+    ));
+    const merged = [
+      ...manualConnections,
+      ...autoConnections.filter(
+        (c) => !manualKeys.has(`${c.fromLayer}/${c.fromFile}\u2192${c.toLayer}/${c.toFile}`)
+      )
+    ];
+    return {
+      graph: multi.merged,
+      multiLayer: multi,
+      layerMetadata: multi.layerMetadata,
+      crossLayerEdges: merged
+    };
+  }
+  const graph = await analyzeProject(opts.targetDir, {
+    exclude: opts.exclude,
+    language: opts.language
+  });
+  return { graph };
+}
+
+// src/storage/snapshot.ts
+import { mkdir as mkdir2, writeFile as writeFile2, readFile as readFile3, access } from "fs/promises";
+import { join as join6 } from "path";
+import { z as z2 } from "zod";
 
 // src/types/schema.ts
 var SCHEMA_VERSION = "1.1";
 
 // src/storage/snapshot.ts
-var ARCHTRACKER_DIR = ".archtracker";
+var ARCHTRACKER_DIR2 = ".archtracker";
 var SNAPSHOT_FILE = "snapshot.json";
-var FileNodeSchema = z.object({
-  path: z.string(),
-  exists: z.boolean(),
-  dependencies: z.array(z.string()),
-  dependents: z.array(z.string())
+var FileNodeSchema = z2.object({
+  path: z2.string(),
+  exists: z2.boolean(),
+  dependencies: z2.array(z2.string()),
+  dependents: z2.array(z2.string())
 });
-var DependencyGraphSchema = z.object({
-  rootDir: z.string(),
-  files: z.record(z.string(), FileNodeSchema),
-  edges: z.array(z.object({
-    source: z.string(),
-    target: z.string(),
-    type: z.enum(["static", "dynamic", "type-only"])
+var DependencyGraphSchema = z2.object({
+  rootDir: z2.string(),
+  files: z2.record(z2.string(), FileNodeSchema),
+  edges: z2.array(z2.object({
+    source: z2.string(),
+    target: z2.string(),
+    type: z2.enum(["static", "dynamic", "type-only"])
   })),
-  circularDependencies: z.array(z.object({ cycle: z.array(z.string()) })),
-  totalFiles: z.number(),
-  totalEdges: z.number()
+  circularDependencies: z2.array(z2.object({ cycle: z2.array(z2.string()) })),
+  totalFiles: z2.number(),
+  totalEdges: z2.number()
 });
-var SnapshotSchema = z.object({
-  version: z.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);
+  const dirPath = join6(projectRoot, ARCHTRACKER_DIR2);
+  const filePath = join6(dirPath, SNAPSHOT_FILE);
   const snapshot = {
     version: SCHEMA_VERSION,
     timestamp: (/* @__PURE__ */ new Date()).toISOString(),
@@ -2220,17 +2321,17 @@ async function saveSnapshot(projectRoot, graph, multiLayer) {
     graph,
     ...multiLayer ? { multiLayer } : {}
   };
-  await mkdir(dirPath, { recursive: true });
-  await writeFile(filePath, JSON.stringify(snapshot, null, 2), "utf-8");
+  await mkdir2(dirPath, { recursive: true });
+  await writeFile2(filePath, JSON.stringify(snapshot, null, 2), "utf-8");
   return snapshot;
 }
 async function loadSnapshot(projectRoot) {
-  const filePath = join5(projectRoot, ARCHTRACKER_DIR, SNAPSHOT_FILE);
+  const filePath = join6(projectRoot, ARCHTRACKER_DIR2, SNAPSHOT_FILE);
   let raw;
   try {
-    raw = await readFile2(filePath, "utf-8");
+    raw = await readFile3(filePath, "utf-8");
   } catch (error) {
-    if (isNodeError(error) && error.code === "ENOENT") {
+    if (isNodeError2(error) && error.code === "ENOENT") {
       return null;
     }
     throw new StorageError(
@@ -2261,7 +2362,7 @@ var StorageError = class extends Error {
     this.name = "StorageError";
   }
 };
-function isNodeError(error) {
+function isNodeError2(error) {
   return error instanceof Error && "code" in error;
 }
 
@@ -2362,121 +2463,12 @@ 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>
+// src/web/styles.ts
+function buildStyles() {
+  return `<style>
 :root {
   --bg: #0d1117; --bg-card: #161b22; --bg-hover: #1c2129;
   --border: #30363d; --border-active: #58a6ff;
@@ -2606,6 +2598,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; }
 
@@ -2626,10 +2621,12 @@ kbd { background: #21262d; border: 1px solid var(--border); border-radius: 3px;
 .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>
+</style>`;
+}
 
+// src/web/viewer-html.ts
+function buildViewerHtml() {
+  return `
 <!-- Tab bar -->
 <div id="tab-bar">
   <span class="logo" id="project-title" contenteditable="true" spellcheck="false" title="Click to edit project name"></span>
@@ -2735,7 +2732,7 @@ kbd { background: #21262d; border: 1px solid var(--border); border-radius: 3px;
   <div id="zoom-ctrl">
     <button onclick="zoomIn()" title="Zoom in">+</button>
     <button onclick="zoomOut()" title="Zoom out">\u2212</button>
-    <button onclick="zoomFit()" title="Fit">\u22A1</button>
+    <button onclick="zoomFit()" title="Fit">\u229E</button>
     <button id="impact-btn" onclick="toggleImpactMode()" title="Impact simulation" style="font-size:12px;margin-top:4px" data-i18n="impact.btn">Impact</button>
   </div>
   <div id="impact-badge"></div>
@@ -2768,15 +2765,26 @@ kbd { background: #21262d; border: 1px solid var(--border); border-radius: 3px;
 <!-- Diff View -->
 <div id="diff-view" class="view">
   <svg id="diff-svg"></svg>
-  <div id="diff-legend" style="position:absolute;top:12px;left:12px;z-index:10;">
+  <div id="diff-hud" style="position:absolute;top:12px;left:12px;z-index:10;display:flex;flex-direction:column;gap:8px;">
     <div class="hud-panel">
-      <div class="legend-item"><div class="legend-dot" style="background:var(--green)"></div> <span data-i18n="diff.addedLabel">Added</span></div>
-      <div class="legend-item"><div class="legend-dot" style="background:var(--red)"></div> <span data-i18n="diff.removedLabel">Removed</span></div>
-      <div class="legend-item"><div class="legend-dot" style="background:var(--yellow)"></div> <span data-i18n="diff.modifiedLabel">Modified</span></div>
-      <div class="legend-item"><div class="legend-dot" style="background:var(--accent)"></div> <span data-i18n="diff.affectedLabel">Affected</span></div>
+      <div class="legend-item"><div class="legend-dot" style="background:var(--green)"></div> <span data-i18n="diff.addedLabel">Added</span> <b id="diff-added-count" style="margin-left:auto">0</b></div>
+      <div class="legend-item"><div class="legend-dot" style="background:var(--red)"></div> <span data-i18n="diff.removedLabel">Removed</span> <b id="diff-removed-count" style="margin-left:auto">0</b></div>
+      <div class="legend-item"><div class="legend-dot" style="background:var(--yellow)"></div> <span data-i18n="diff.modifiedLabel">Modified</span> <b id="diff-modified-count" style="margin-left:auto">0</b></div>
+      <div class="legend-item"><div class="legend-dot" style="background:var(--accent)"></div> <span data-i18n="diff.affectedLabel">Affected</span> <b id="diff-affected-count" style="margin-left:auto">0</b></div>
+      <div style="margin-top:6px;border-top:1px solid var(--border);padding-top:6px;">
+        <button id="diff-focus-btn" onclick="toggleDiffFocus()" style="background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:4px 10px;cursor:pointer;color:var(--text-dim);font-size:11px;width:100%;transition:all 0.15s;" data-i18n="diff.focusChanges">Focus changes</button>
+      </div>
     </div>
   </div>
-  <div id="help-bar" style="position:absolute" data-i18n="help.diff">Green=added \xB7 Red=removed \xB7 Yellow=modified \xB7 Blue=affected</div>
+  <div id="diff-detail" style="position:absolute;top:12px;right:12px;width:280px;z-index:10;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;font-size:13px;display:none;max-height:calc(100vh - 100px);overflow-y:auto;transition:background 0.3s;">
+    <button class="close-btn" onclick="closeDiffDetail()" style="position:absolute;top:8px;right:10px;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:16px;">\u2715</button>
+    <div class="detail-name" id="dd-name"></div>
+    <div id="dd-status" style="margin:6px 0;font-size:12px;font-weight:600;"></div>
+    <div class="detail-meta" id="dd-meta"></div>
+    <div class="detail-section"><h4 data-i18n="diff.affectedByChange">Affected by this change</h4><ul class="detail-list" id="dd-affected"></ul></div>
+    <div class="detail-section"><h4 data-i18n="detail.imports">Imports</h4><ul class="detail-list" id="dd-deps"></ul></div>
+  </div>
+  <div id="help-bar" style="position:absolute" data-i18n="help.diff">Green=added \xB7 Red=removed \xB7 Yellow=modified \xB7 Blue=affected \xB7 Click: impact chain</div>
 </div>
 
 <!-- Tooltip (shared, interactive) -->
@@ -2787,1441 +2795,1692 @@ kbd { background: #21262d; border: 1px solid var(--border); border-radius: 3px;
     <span class="tt-badge tt-in" id="tt-dpt-count" style="margin-left:6px"></span> <span data-i18n="tooltip.importedBy">imported by</span>
   </div>
   <div class="tt-section" id="tt-details"></div>
-</div>
-
-<script src="https://d3js.org/d3.v7.min.js"></script>
-<script>
-// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-// i18n
-// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-const I18N = {
-  en: {
-    'tab.graph': 'Graph', 'tab.hierarchy': 'Hierarchy',
-    'stats.files': 'Files', 'stats.edges': 'Edges', 'stats.circular': 'Circular',
-    'settings.title': 'Settings', 'settings.theme': 'Theme', 'settings.fontSize': 'Font Size',
-    'settings.nodeSize': 'Node Size', 'settings.linkOpacity': 'Link Opacity', 'settings.gravity': 'Gravity', 'settings.language': 'Language', 'settings.export': 'Export',
-    'impact.title': 'Impact Simulation', 'impact.btn': 'Impact', 'impact.transitive': 'files affected',
-    'search.placeholder': 'Search files...',
-    'legend.circular': 'Circular dep', 'legend.orphan': 'Orphan', 'legend.highCoupling': 'High coupling',
-    'legend.imports': 'imports', 'legend.importedBy': 'imported by',
-    'detail.importedBy': 'Imported by', 'detail.imports': 'Imports',
-    'detail.none': 'none', 'detail.dir': 'Dir', 'detail.dependencies': 'Dependencies', 'detail.dependents': 'Dependents',
-    'tooltip.imports': 'imports', 'tooltip.importedBy': 'imported by',
-    'help.graph': 'Scroll: zoom \xB7 Drag: pan \xB7 Click: select \xB7 / search',
-    'help.hierarchy': 'Scroll to navigate \xB7 Click to highlight',
-    'help.diff': 'Green=added \xB7 Red=removed \xB7 Yellow=modified \xB7 Blue=affected',
-    'tab.diff': 'Diff',
-    'diff.addedLabel': 'Added', 'diff.removedLabel': 'Removed', 'diff.modifiedLabel': 'Modified', 'diff.affectedLabel': 'Affected',
-  },
-  ja: {
-    'tab.graph': '\u30B0\u30E9\u30D5', 'tab.hierarchy': '\u968E\u5C64\u56F3',
-    'stats.files': '\u30D5\u30A1\u30A4\u30EB', 'stats.edges': '\u30A8\u30C3\u30B8', 'stats.circular': '\u5FAA\u74B0\u53C2\u7167',
-    'settings.title': '\u8A2D\u5B9A', 'settings.theme': '\u30C6\u30FC\u30DE', 'settings.fontSize': '\u30D5\u30A9\u30F3\u30C8\u30B5\u30A4\u30BA',
-    'settings.nodeSize': '\u30CE\u30FC\u30C9\u30B5\u30A4\u30BA', 'settings.linkOpacity': '\u30EA\u30F3\u30AF\u900F\u660E\u5EA6', 'settings.gravity': '\u91CD\u529B', 'settings.language': '\u8A00\u8A9E', 'settings.export': '\u30A8\u30AF\u30B9\u30DD\u30FC\u30C8',
-    'impact.title': '\u5F71\u97FF\u7BC4\u56F2\u30B7\u30DF\u30E5\u30EC\u30FC\u30B7\u30E7\u30F3', 'impact.btn': '\u5F71\u97FF', 'impact.transitive': '\u30D5\u30A1\u30A4\u30EB\u306B\u5F71\u97FF',
-    'search.placeholder': '\u30D5\u30A1\u30A4\u30EB\u691C\u7D22...',
-    'legend.circular': '\u5FAA\u74B0\u53C2\u7167', 'legend.orphan': '\u5B64\u7ACB', 'legend.highCoupling': '\u9AD8\u7D50\u5408',
-    'legend.imports': 'import\u5148', 'legend.importedBy': 'import\u5143',
-    'detail.importedBy': 'import\u5143', 'detail.imports': 'import\u5148',
-    'detail.none': '\u306A\u3057', 'detail.dir': '\u30C7\u30A3\u30EC\u30AF\u30C8\u30EA', 'detail.dependencies': '\u4F9D\u5B58\u5148', 'detail.dependents': '\u88AB\u4F9D\u5B58',
-    'tooltip.imports': 'import\u5148', 'tooltip.importedBy': 'import\u5143',
-    'help.graph': '\u30B9\u30AF\u30ED\u30FC\u30EB: \u30BA\u30FC\u30E0 \xB7 \u30C9\u30E9\u30C3\u30B0: \u79FB\u52D5 \xB7 \u30AF\u30EA\u30C3\u30AF: \u9078\u629E \xB7 / \u691C\u7D22',
-    'help.hierarchy': '\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u79FB\u52D5 \xB7 \u30AF\u30EA\u30C3\u30AF\u3067\u30CF\u30A4\u30E9\u30A4\u30C8',
-    'help.diff': '\u7DD1=\u8FFD\u52A0 \xB7 \u8D64=\u524A\u9664 \xB7 \u9EC4=\u5909\u66F4 \xB7 \u9752=\u5F71\u97FF',
-    'tab.diff': '\u5DEE\u5206',
-    'diff.addedLabel': '\u8FFD\u52A0', 'diff.removedLabel': '\u524A\u9664', 'diff.modifiedLabel': '\u5909\u66F4', 'diff.affectedLabel': '\u5F71\u97FF',
-  }
-};
-let currentLang = '${locale}';
-function applyI18n() {
-  const msgs = I18N[currentLang] || I18N.en;
-  document.querySelectorAll('[data-i18n]').forEach(el => {
-    const key = el.getAttribute('data-i18n');
-    if (msgs[key]) el.textContent = msgs[key];
-  });
-  document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
-    const key = el.getAttribute('data-i18n-placeholder');
-    if (msgs[key]) el.placeholder = msgs[key];
-  });
-  document.querySelectorAll('.lang-btn').forEach(b => b.classList.toggle('active', b.dataset.lang === currentLang));
+</div>`;
 }
-window.setLang = (lang) => { currentLang = lang; applyI18n(); saveSettings(); };
-function i(key) { return (I18N[currentLang] || I18N.en)[key] || key; }
 
+// src/web/js-hierarchy.ts
+function buildHierarchyJs() {
+  return `
 // \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-// SETTINGS (persisted to localStorage)
+// HIERARCHY VIEW
 // \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-const STORAGE_KEY = 'archtracker-settings';
-function saveSettings() {
-  const s = { theme: document.body.getAttribute('data-theme') || 'dark', fontSize: document.getElementById('font-size-val').textContent, nodeSize: document.getElementById('node-size-val').textContent, linkOpacity: document.getElementById('link-opacity-val').textContent, gravity: document.getElementById('gravity-val').textContent, 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; }
-}
+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);
 
-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();
+  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}));
   }
-  saveSettings();
-};
-let layerGravity = 12;
-window.setLayerGravity = (v) => {
-  layerGravity = +v;
-  document.getElementById('layer-gravity-val').textContent = v;
-  if (typeof simulation !== 'undefined' && typeof applyLayerFilter === 'function') {
-    applyLayerFilter();
+  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)};});
   }
-  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)));
-};
+  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));
 
-// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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);
+  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);
+  });
 
-// 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(); } });
+  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)');
 
-// 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; }
-}
+  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);
+  }
 
-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 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);
 
-const dirColor = d3.scaleOrdinal()
-  .domain(DATA.dirs)
-  .range(['#58a6ff','#3fb950','#d2a8ff','#f0883e','#79c0ff','#56d4dd','#db61a2','#f778ba','#ffa657','#7ee787']);
+    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);
+    });
+  });
 
-// 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 = '';
-}
+  // Hierarchy highlight helpers
+  let hierPinned=null;
+  function hierHighlight(nId){
+    linkG.selectAll('path')
+      .attr('stroke',function(){const s=this.getAttribute('data-source'),t=this.getAttribute('data-target');if(s===nId)return'#58a6ff';if(t===nId)return'#3fb950';return this.getAttribute('stroke-dasharray')?'#1f3d5c':'var(--border)';})
+      .attr('stroke-width',function(){const s=this.getAttribute('data-source'),t=this.getAttribute('data-target');return(s===nId||t===nId)?2.5:1;})
+      .attr('opacity',function(){const s=this.getAttribute('data-source'),t=this.getAttribute('data-target');return(s===nId||t===nId)?1:0.15;});
+    nodeG.selectAll('.hier-node').attr('opacity',function(){
+      const id=this.__data_id; if(id===nId)return 1;
+      const connected=DATA.links.some(l=>{const s=l.source.id??l.source,t=l.target.id??l.target;return(s===nId&&t===id)||(t===nId&&s===id);});
+      return connected?1:0.3;
+    });
+  }
+  function hierResetHighlight(){
+    hierPinned=null;
+    linkG.selectAll('path')
+      .attr('stroke',function(){return this.getAttribute('stroke-dasharray')?'#1f3d5c':'var(--border)';})
+      .attr('stroke-width',1).attr('opacity',1);
+    nodeG.selectAll('.hier-node').attr('opacity',1);
+  }
+  function showHierDetail(n){
+    const p=document.getElementById('hier-detail');
+    document.getElementById('hd-name').textContent=n.id;
+    document.getElementById('hd-meta').innerHTML=i('detail.dir')+': '+esc(n.dir)+'<br>'+i('detail.dependencies')+': '+n.deps+' \\u00b7 '+i('detail.dependents')+': '+n.dependents;
+    document.getElementById('hd-dependents').innerHTML=(n.dependentsList||[]).map(x=>'<li>\\u2190 '+esc(x)+'</li>').join('')||'<li style="color:var(--text-muted)">'+i('detail.none')+'</li>';
+    document.getElementById('hd-deps').innerHTML=(n.dependencies||[]).map(x=>'<li>\\u2192 '+esc(x)+'</li>').join('')||'<li style="color:var(--text-muted)">'+i('detail.none')+'</li>';
+    p.classList.add('open');
+  }
+  window.closeHierDetail=()=>{document.getElementById('hier-detail').classList.remove('open');hierResetHighlight();tooltip.style.display='none';tooltipLocked=false;};
 
-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(); }
+  // Click on empty space to deselect
+  hSvg.on('click',()=>{closeHierDetail();});
 
-// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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(); }
-    }
-  });
-});
+  // 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)
 
-// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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 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;
+    }
 
-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();
+    // 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);
+      }
     }
-  }, 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));
+    // 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) };
+      });
+    });
 
-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);
+    // 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));
 
-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');
+    // 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 + ')');
+      }
+    });
 
-// 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);
+    // 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);
+      }
     });
-    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
+    // 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);
+      }
+    });
 
-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 };
-  });
+    // Close detail panel if pinned node became hidden
+    if (hierPinned && !isVisible(hierPinned)) {
+      closeHierDetail();
+    }
+  }
 
-  // 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 };
+  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));
+      }
     });
-    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));
+  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);
 
-  // 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;
+    LAYERS.forEach(layer => {
+      const pill=document.createElement('div');
+      pill.className='layer-pill';
+      pill.dataset.layer=layer.name;
+      const count=DATA.nodes.filter(n=>n.layer===layer.name).length;
+      pill.innerHTML='<div class="lp-dot" style="background:'+esc(layer.color)+'"></div>'+esc(layer.name)+' <span class="lp-count">'+count+'</span>';
+      pill.onclick=(e)=>{
+        if (e.shiftKey) {
+          hActiveLayers.clear();
+          hActiveLayers.add(layer.name);
+        } else {
+          if (hActiveLayers.has(layer.name)) hActiveLayers.delete(layer.name);
+          else hActiveLayers.add(layer.name);
+        }
+        // Sync pill UI
+        hFilterRow.querySelectorAll('.layer-pill').forEach(function(p) {
+          var ln = p.dataset.layer;
+          if (ln === 'all') p.classList.toggle('active', hActiveLayers.size === 0);
+          else p.classList.toggle('active', hActiveLayers.has(ln));
+        });
+        hierRelayoutInner();
+      };
+      hFilterRow.appendChild(pill);
+    });
+  } else {
+    const hActiveDirs=new Set(DATA.dirs);
+    DATA.dirs.forEach(dir=>{
+      const pill=document.createElement('div');
+      pill.className='filter-pill active';
+      pill.innerHTML='<div class="pill-dot" style="background:'+dirColor(dir)+'"></div>'+esc(dir||'.')+' <span class="pill-count">'+(dirCounts[dir]||0)+'</span>';
+      pill.onclick=()=>{
+        if(hActiveDirs.has(dir)){hActiveDirs.delete(dir);pill.classList.remove('active');}
+        else{hActiveDirs.add(dir);pill.classList.add('active');}
+        nodeG.selectAll('.hier-node').attr('opacity',function(){const nId=this.__data_id;return hActiveDirs.has(nodeMap[nId]?.dir)?1:0.1;});
+      };
+      hFilterRow.appendChild(pill);
+    });
   }
-  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');
+  // Assign function pointers for cross-view sync
+  hierRelayout = hierRelayoutInner;
+  hierSyncFromTab = hierSyncFromTabInner;
 
-  function updateHulls() {
-    if (!hullGroup) return;
-    hullGroup.selectAll('*').remove();
-    // Show hulls always (filter to selected layers when focused)
+  hSvg.call(hZoom.transform,d3.zoomIdentity.translate(
+    Math.max(0,(W-totalW)/2),20
+  ).scale(Math.min(1,W/(totalW+40),H/(totalH+40))));
 
-    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;
+  // If layers were already filtered in graph view, sync hierarchy on first build
+  if (activeLayers.size > 0) {
+    hierSyncFromTabInner();
+    hierRelayoutInner();
+  }
+}
+`;
+}
 
-      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]);
-        }
-      });
+// src/web/js-diff.ts
+function buildDiffJs(diffData) {
+  return `
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// DIFF VIEW
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+const DIFF = ${diffData};
+if (DIFF) {
+  document.getElementById('diff-tab').style.display = '';
+  const addedSet = new Set(DIFF.added||[]);
+  const removedSet = new Set(DIFF.removed||[]);
+  const modifiedSet = new Set(DIFF.modified||[]);
+  const affectedSet = new Set((DIFF.affectedDependents||[]).map(a=>a.file));
 
-      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;
-      }
+  // Populate summary counts
+  document.getElementById('diff-added-count').textContent = addedSet.size;
+  document.getElementById('diff-removed-count').textContent = removedSet.size;
+  document.getElementById('diff-modified-count').textContent = modifiedSet.size;
+  document.getElementById('diff-affected-count').textContent = affectedSet.size;
 
-      const hull = d3.polygonHull(points);
-      if (!hull) return;
+  function isDiffNode(id) {
+    return addedSet.has(id) || removedSet.has(id) || modifiedSet.has(id) || affectedSet.has(id);
+  }
 
-      // 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);
+  function diffStatus(id) {
+    if (addedSet.has(id)) return 'Added';
+    if (removedSet.has(id)) return 'Removed';
+    if (modifiedSet.has(id)) return 'Modified';
+    if (affectedSet.has(id)) return 'Affected';
+    return 'Unchanged';
+  }
 
-      // 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);
-    });
+  function diffStatusColor(id) {
+    if (addedSet.has(id)) return 'var(--green)';
+    if (removedSet.has(id)) return 'var(--red)';
+    if (modifiedSet.has(id)) return 'var(--yellow)';
+    if (affectedSet.has(id)) return 'var(--accent)';
+    return 'var(--text-muted)';
   }
 
-  // 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();
+  // Build reverse dependency map for impact chain
+  var diffRevMap = {};
+  DATA.links.forEach(function(l) {
+    var s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+    if (!diffRevMap[t]) diffRevMap[t] = [];
+    diffRevMap[t].push(s);
   });
 
-  // \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);
+  function getImpactChain(startId) {
+    var result = new Set();
+    var queue = [startId];
+    while (queue.length) {
+      var id = queue.shift();
+      if (result.has(id)) continue;
+      result.add(id);
+      (diffRevMap[id] || []).forEach(function(x) { queue.push(x); });
+    }
+    return result;
   }
-  // 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(); }
+  let diffFocusMode = false;
+  var dNode, dLink, dSim, simNodes, simLinks;
+
+  window.toggleDiffFocus = function() {
+    diffFocusMode = !diffFocusMode;
+    var btn = document.getElementById('diff-focus-btn');
+    btn.classList.toggle('active', diffFocusMode);
+    btn.textContent = diffFocusMode ? i('diff.showAll') : i('diff.focusChanges');
+    if (!diffBuilt) return;
+    applyDiffFilter();
   };
-  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);
-  });
+  window.closeDiffDetail = function() {
+    document.getElementById('diff-detail').style.display = 'none';
+    if (diffBuilt) resetDiffHighlight();
+  };
 
-  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));
+  function applyDiffFilter() {
+    dNode.attr('display', function(d) {
+      if (!diffFocusMode) return null;
+      return isDiffNode(d.id) ? null : 'none';
     });
-    // Also sync the filter bar layer pills
-    layerRowEl.querySelectorAll('.layer-pill[data-layer]').forEach(p => {
-      p.classList.toggle('active', activeLayers.has(p.dataset.layer));
+    dNode.select('circle')
+      .attr('opacity', function(d) {
+        if (diffFocusMode) return isDiffNode(d.id) ? 1 : 0;
+        return isDiffNode(d.id) ? 1 : 0.12;
+      });
+    dNode.select('text')
+      .attr('opacity', function(d) {
+        if (diffFocusMode) return isDiffNode(d.id) ? 1 : 0;
+        return isDiffNode(d.id) ? 1 : 0.08;
+      });
+    dLink.attr('display', function(l) {
+      if (!diffFocusMode) return null;
+      var s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+      return (isDiffNode(s) && isDiffNode(t)) ? null : 'none';
     });
-  }
-
-  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;
+    dLink.attr('opacity', function(l) {
+      var s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+      if (isDiffNode(s) && isDiffNode(t)) return 0.6;
+      if (isDiffNode(s) || isDiffNode(t)) return 0.15;
+      return diffFocusMode ? 0 : 0.05;
     });
-    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);
+    dLink.attr('stroke', function(l) {
+      var s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+      if (isDiffNode(s) && isDiffNode(t)) return diffStatusColor(s);
+      return '#30363d';
     });
-    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));
+    dNode.select('circle')
+      .attr('stroke-width', function(d) { return isDiffNode(d.id) ? 3 : 1; });
+  }
+
+  function resetDiffHighlight() {
+    applyDiffFilter();
+  }
+
+  function highlightDiffImpact(d) {
+    var chain = getImpactChain(d.id);
+    dNode.select('circle').transition().duration(200)
+      .attr('opacity', function(n) { return chain.has(n.id) ? 1 : 0.04; })
+      .attr('stroke-width', function(n) { return chain.has(n.id) && n.id !== d.id ? 3 : isDiffNode(n.id) ? 3 : 1; })
+      .attr('stroke', function(n) { return chain.has(n.id) && n.id !== d.id ? 'var(--red)' : diffStatusColor(n.id); });
+    dNode.select('text').transition().duration(200)
+      .attr('opacity', function(n) { return chain.has(n.id) ? 1 : 0.03; });
+    dLink.transition().duration(200)
+      .attr('opacity', function(l) {
+        var s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+        return (chain.has(s) && chain.has(t)) ? 0.8 : 0.03;
+      })
+      .attr('stroke', function(l) {
+        var s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+        return (chain.has(s) && chain.has(t)) ? 'var(--red)' : '#30363d';
+      });
+    return chain;
+  }
+
+  function showDiffDetail(d) {
+    var panel = document.getElementById('diff-detail');
+    document.getElementById('dd-name').textContent = d.id;
+    var statusEl = document.getElementById('dd-status');
+    statusEl.textContent = diffStatus(d.id);
+    statusEl.style.color = diffStatusColor(d.id);
+    document.getElementById('dd-meta').innerHTML = i('detail.dir') + ': ' + esc(d.dir) + '<br>' + i('detail.dependencies') + ': ' + d.deps + ' \\u00b7 ' + i('detail.dependents') + ': ' + d.dependents;
+
+    // Show impact chain
+    var chain = getImpactChain(d.id);
+    chain.delete(d.id);
+    var affectedList = document.getElementById('dd-affected');
+    if (chain.size > 0) {
+      affectedList.innerHTML = Array.from(chain).map(function(id) {
+        return '<li style="color:' + diffStatusColor(id) + '">\\u2190 ' + esc(id) + ' <span style="font-size:10px;color:var(--text-muted)">(' + diffStatus(id) + ')</span></li>';
+      }).join('');
     } else {
-      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));
+      affectedList.innerHTML = '<li style="color:var(--text-muted)">' + i('diff.noImpact') + '</li>';
     }
-    simulation.alpha(0.6).restart();
-    // Zoom to fit visible nodes after simulation settles
-    setTimeout(() => zoomFit(), 600);
+
+    // Show imports
+    var depsList = document.getElementById('dd-deps');
+    depsList.innerHTML = (d.dependencies || []).map(function(x) {
+      return '<li style="color:' + diffStatusColor(x) + '">\\u2192 ' + esc(x) + '</li>';
+    }).join('') || '<li style="color:var(--text-muted)">' + i('detail.none') + '</li>';
+
+    panel.style.display = 'block';
   }
 
-  // \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');
+  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);
 
-  // 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);
+    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';
+    }
 
-  // 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();
-    };
-  }
+    const dDefs = dSvg.append('defs');
+    dDefs.append('marker').attr('id','darrow').attr('viewBox','0 -4 8 8')
+      .attr('refX',8).attr('refY',0).attr('markerWidth',7).attr('markerHeight',7).attr('orient','auto')
+      .append('path').attr('d','M0,-3.5L8,0L0,3.5Z').attr('fill','#30363d');
+    // Colored arrow markers for diff edges
+    [['var(--green)','darrow-g'],['var(--red)','darrow-r'],['var(--yellow)','darrow-y'],['var(--accent)','darrow-a']].forEach(function(pair) {
+      dDefs.append('marker').attr('id',pair[1]).attr('viewBox','0 -4 8 8')
+        .attr('refX',8).attr('refY',0).attr('markerWidth',7).attr('markerHeight',7).attr('orient','auto')
+        .append('path').attr('d','M0,-3.5L8,0L0,3.5Z').attr('fill',pair[0]);
+    });
 
-  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);
+    simNodes = DATA.nodes.map(d=>({...d, x:undefined, y:undefined, vx:undefined, vy:undefined}));
+    simLinks = DATA.links.map(d=>({source:d.source.id??d.source,target:d.target.id??d.target,type:d.type}));
 
-    // 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);
+    dLink = dG.append('g').selectAll('line').data(simLinks).join('line')
+      .attr('stroke','#30363d').attr('stroke-width',1).attr('marker-end','url(#darrow)').attr('opacity',0.05);
+
+    dNode = dG.append('g').selectAll('g').data(simNodes).join('g').attr('cursor','pointer');
+    dNode.append('circle')
+      .attr('r', d=>nodeRadius(d)*nodeScale)
+      .attr('fill', diffColor)
+      .attr('stroke', diffColor).attr('stroke-width', d=>isDiffNode(d.id)?3:1)
+      .attr('opacity', d=>isDiffNode(d.id)?1:0.12);
+    dNode.append('text')
+      .text(d=>fileName(d.id).replace(/\\.tsx?$/,''))
+      .attr('dx', d=>nodeRadius(d)*nodeScale+4).attr('dy',3.5).attr('font-size',11)
+      .attr('fill', d=>isDiffNode(d.id)?'var(--text)':'var(--text-muted)')
+      .attr('opacity', d=>isDiffNode(d.id)?1:0.08)
+      .attr('pointer-events','none');
+
+    dSim = d3.forceSimulation(simNodes)
+      .force('link', d3.forceLink(simLinks).id(d=>d.id).distance(70).strength(0.25))
+      .force('charge', d3.forceManyBody().strength(-150).distanceMax(500))
+      .force('center', d3.forceCenter(0,0))
+      .force('collision', d3.forceCollide().radius(d=>nodeRadius(d)*nodeScale+4));
+
+    // Layer-aware physics for diff view (same pattern as graph view)
+    var dHullGroup = null;
+    if (LAYERS && LAYERS.length > 0) {
+      var dLayerCenters = {};
+      var dLayerCount = LAYERS.length;
+      var dBaseRadius = Math.max(60, Math.min(W, H) * 0.04 * Math.sqrt(dLayerCount));
+      LAYERS.forEach(function(l, idx) {
+        var angle = (2 * Math.PI * idx) / dLayerCount - Math.PI / 2;
+        dLayerCenters[l.name] = { x: Math.cos(angle) * dBaseRadius, y: Math.sin(angle) * dBaseRadius };
+      });
+      dSim.force('center', null);
+      dSim.force('layerX', d3.forceX(function(d) { return dLayerCenters[d.layer]?.x || 0; }).strength(function(d) { return d.layer ? 0.12 : 0.03; }));
+      dSim.force('layerY', d3.forceY(function(d) { return dLayerCenters[d.layer]?.y || 0; }).strength(function(d) { return d.layer ? 0.12 : 0.03; }));
+      dSim.force('link').strength(function(l) {
+        var sL = l.source.layer ?? l.source, tL = l.target.layer ?? l.target;
+        return sL === tL ? 0.4 : 0.1;
+      });
+      // Cluster force for diff view
+      dSim.force('cluster', (function() {
+        var ns;
+        function f(alpha) {
+          var centroids = {}, counts = {};
+          ns.forEach(function(n) {
+            if (!n.layer) return;
+            if (!centroids[n.layer]) { centroids[n.layer] = {x:0,y:0}; counts[n.layer] = 0; }
+            centroids[n.layer].x += n.x; centroids[n.layer].y += n.y; counts[n.layer]++;
+          });
+          Object.keys(centroids).forEach(function(k) { centroids[k].x /= counts[k]; centroids[k].y /= counts[k]; });
+          ns.forEach(function(n) {
+            if (!n.layer || !centroids[n.layer]) return;
+            n.vx += (centroids[n.layer].x - n.x) * alpha * 0.2;
+            n.vy += (centroids[n.layer].y - n.y) * alpha * 0.2;
+          });
+        }
+        f.initialize = function(n) { ns = n; };
+        return f;
+      })());
+
+      dHullGroup = dG.insert('g', ':first-child');
+    }
+
+    function updateDiffHulls() {
+      if (!dHullGroup) return;
+      dHullGroup.selectAll('*').remove();
+      LAYERS.forEach(function(layer) {
+        var layerNodes = simNodes.filter(function(n) { return n.layer === layer.name; });
+        if (layerNodes.length === 0) return;
+        if (diffFocusMode && !layerNodes.some(function(n) { return isDiffNode(n.id); })) return;
+        var hasDiff = layerNodes.some(function(n) { return isDiffNode(n.id); });
+
+        var points = [];
+        layerNodes.forEach(function(n) {
+          if (n.x == null || n.y == null) return;
+          if (diffFocusMode && !isDiffNode(n.id)) return;
+          var r = nodeRadius(n) * nodeScale + 30;
+          for (var a = 0; a < Math.PI * 2; a += Math.PI / 4) {
+            points.push([n.x + Math.cos(a) * r, n.y + Math.sin(a) * r]);
+          }
+        });
+
+        var fillOp = hasDiff ? 0.15 : 0.06;
+        var strokeOp = hasDiff ? 0.6 : 0.2;
+        var sw = hasDiff ? 2.5 : 1;
+        if (points.length < 6) {
+          var cx = layerNodes.reduce(function(s, n) { return s + (n.x||0); }, 0) / layerNodes.length;
+          var cy = layerNodes.reduce(function(s, n) { return s + (n.y||0); }, 0) / layerNodes.length;
+          dHullGroup.append('circle').attr('cx', cx).attr('cy', cy).attr('r', 50)
+            .attr('fill', layer.color).attr('fill-opacity', fillOp)
+            .attr('stroke', layer.color).attr('stroke-opacity', strokeOp).attr('stroke-width', sw);
+        } else {
+          var hull = d3.polygonHull(points);
+          if (hull) {
+            dHullGroup.append('path')
+              .attr('d', 'M' + hull.map(function(p) { return p.join(','); }).join('L') + 'Z')
+              .attr('fill', layer.color).attr('fill-opacity', fillOp)
+              .attr('stroke', layer.color).attr('stroke-opacity', strokeOp).attr('stroke-width', sw)
+              .attr('stroke-dasharray', hasDiff ? null : '6,3');
+          }
+        }
+        // Layer name label
+        var visNodes = diffFocusMode ? layerNodes.filter(function(n) { return isDiffNode(n.id); }) : layerNodes;
+        if (visNodes.length === 0) return;
+        var lx = visNodes.reduce(function(s, n) { return s + (n.x||0); }, 0) / visNodes.length;
+        var ly = Math.min.apply(null, visNodes.map(function(n) { return n.y||0; })) - 25;
+        dHullGroup.append('text')
+          .attr('x', lx).attr('y', ly).attr('text-anchor', 'middle')
+          .attr('fill', layer.color).attr('fill-opacity', hasDiff ? 0.9 : 0.4)
+          .attr('font-size', 12).attr('font-weight', 600).text(layer.name);
       });
-      group.appendChild(pillsWrap);
-      dirPanelEl.appendChild(group);
     }
+
+    var dTickCount = 0;
+    dSim.on('tick', function() {
+        dLink.each(function(d) {
+          var dx=d.target.x-d.source.x, dy=d.target.y-d.source.y, dist=Math.sqrt(dx*dx+dy*dy)||1;
+          var rT=nodeRadius(d.target)*nodeScale, rS=nodeRadius(d.source)*nodeScale;
+          d3.select(this).attr('x1',d.source.x+(dx/dist)*rS).attr('y1',d.source.y+(dy/dist)*rS)
+            .attr('x2',d.target.x-(dx/dist)*rT).attr('y2',d.target.y-(dy/dist)*rT);
+        });
+        dNode.attr('transform', function(d) { return 'translate('+d.x+','+d.y+')'; });
+        if (++dTickCount % 5 === 0) updateDiffHulls();
+      });
+
+    // Click: show impact chain + detail panel
+    dNode.on('click', function(e, d) {
+      e.stopPropagation();
+      highlightDiffImpact(d);
+      showDiffDetail(d);
+    });
+
+    // Click on empty space to deselect
+    dSvg.on('click', function() {
+      closeDiffDetail();
+    });
+
+    dNode.on('mouseover',function(e,d) { showTooltip(e,d); }).on('mousemove',function(e) { positionTooltip(e); }).on('mouseout',function() { scheduleHideTooltip(); });
+
+    // Apply initial filter (in case focus was toggled before build)
+    applyDiffFilter();
+
+    var dAutoFitDone = false;
+    dSim.on('end', function() {
+      if (dAutoFitDone) return;
+      dAutoFitDone = true;
+      var b=dG.node().getBBox(); if(!b.width) return;
+      var s=Math.min(W/(b.width+80),H/(b.height+80))*0.9;
+      dSvg.call(dZoom.transform,d3.zoomIdentity.translate(W/2-(b.x+b.width/2)*s,H/2-(b.y+b.height/2)*s).scale(s));
+    });
+  }
+
+}
+`;
+}
+
+// src/utils/html-escape.ts
+var ESC_FUNCTION_JS = `function esc(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;'); }`;
+
+// src/web/template.ts
+function buildGraphPage(graph, options = {}) {
+  const locale = options.locale ?? "en";
+  const diff = options.diff ?? null;
+  const layers = options.layerMetadata ?? null;
+  const crossEdges = options.crossLayerEdges ?? null;
+  const files = Object.values(graph.files);
+  const nodes = files.map((f) => ({
+    id: f.path,
+    deps: f.dependencies.length,
+    dependents: f.dependents.length,
+    dependencies: f.dependencies,
+    dependentsList: f.dependents,
+    isOrphan: f.dependencies.length === 0 && f.dependents.length === 0,
+    dir: f.path.includes("/") ? f.path.substring(0, f.path.lastIndexOf("/")) : ".",
+    layer: layers && f.path.includes("/") ? f.path.substring(0, f.path.indexOf("/")) : null
+  }));
+  const links = graph.edges.map((e) => ({
+    source: e.source,
+    target: e.target,
+    type: e.type
+  }));
+  const circularFiles = /* @__PURE__ */ new Set();
+  for (const c of graph.circularDependencies) {
+    for (const f of c.cycle) circularFiles.add(f);
+  }
+  const dirs = [...new Set(nodes.map((n) => n.dir))].sort();
+  const projectName = graph.rootDir.split("/").filter(Boolean).pop() || "Project";
+  const diffData = diff ? JSON.stringify(diff) : "null";
+  const layersData = layers ? JSON.stringify(layers) : "null";
+  const crossEdgesData = crossEdges ? JSON.stringify(crossEdges) : "null";
+  const graphData = JSON.stringify({ nodes, links, circularFiles: [...circularFiles], dirs, projectName });
+  return (
+    /* html */
+    `<!DOCTYPE html>
+<html lang="${locale}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${projectName} \u2014 Architecture Viewer</title>
+${buildStyles()}
+</head>
+<body>
+${buildViewerHtml()}
+<script src="https://d3js.org/d3.v7.min.js"></script>
+<script>
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// i18n
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+const I18N = {
+  en: {
+    'tab.graph': 'Graph', 'tab.hierarchy': 'Hierarchy',
+    'stats.files': 'Files', 'stats.edges': 'Edges', 'stats.circular': 'Circular',
+    'settings.title': 'Settings', 'settings.theme': 'Theme', 'settings.fontSize': 'Font Size',
+    'settings.nodeSize': 'Node Size', 'settings.linkOpacity': 'Link Opacity', 'settings.gravity': 'Gravity', 'settings.language': 'Language', 'settings.export': 'Export',
+    'impact.title': 'Impact Simulation', 'impact.btn': 'Impact', 'impact.transitive': 'files affected',
+    'search.placeholder': 'Search files...',
+    'legend.circular': 'Circular dep', 'legend.orphan': 'Orphan', 'legend.highCoupling': 'High coupling',
+    'legend.imports': 'imports', 'legend.importedBy': 'imported by',
+    'detail.importedBy': 'Imported by', 'detail.imports': 'Imports',
+    'detail.none': 'none', 'detail.dir': 'Dir', 'detail.dependencies': 'Dependencies', 'detail.dependents': 'Dependents',
+    'tooltip.imports': 'imports', 'tooltip.importedBy': 'imported by',
+    'help.graph': 'Scroll: zoom \xB7 Drag: pan \xB7 Click: select \xB7 / search',
+    'help.hierarchy': 'Scroll to navigate \xB7 Click to highlight',
+    'help.diff': 'Green=added \xB7 Red=removed \xB7 Yellow=modified \xB7 Blue=affected',
+    'tab.diff': 'Diff',
+    'diff.addedLabel': 'Added', 'diff.removedLabel': 'Removed', 'diff.modifiedLabel': 'Modified', 'diff.affectedLabel': 'Affected',
+    'diff.showAll': 'Show all', 'diff.focusChanges': 'Focus changes', 'diff.noImpact': 'No downstream impact',
+    'diff.affectedByChange': 'Affected by this change',
+  },
+  ja: {
+    'tab.graph': '\u30B0\u30E9\u30D5', 'tab.hierarchy': '\u968E\u5C64\u56F3',
+    'stats.files': '\u30D5\u30A1\u30A4\u30EB', 'stats.edges': '\u30A8\u30C3\u30B8', 'stats.circular': '\u5FAA\u74B0\u53C2\u7167',
+    'settings.title': '\u8A2D\u5B9A', 'settings.theme': '\u30C6\u30FC\u30DE', 'settings.fontSize': '\u30D5\u30A9\u30F3\u30C8\u30B5\u30A4\u30BA',
+    'settings.nodeSize': '\u30CE\u30FC\u30C9\u30B5\u30A4\u30BA', 'settings.linkOpacity': '\u30EA\u30F3\u30AF\u900F\u660E\u5EA6', 'settings.gravity': '\u91CD\u529B', 'settings.language': '\u8A00\u8A9E', 'settings.export': '\u30A8\u30AF\u30B9\u30DD\u30FC\u30C8',
+    'impact.title': '\u5F71\u97FF\u7BC4\u56F2\u30B7\u30DF\u30E5\u30EC\u30FC\u30B7\u30E7\u30F3', 'impact.btn': '\u5F71\u97FF', 'impact.transitive': '\u30D5\u30A1\u30A4\u30EB\u306B\u5F71\u97FF',
+    'search.placeholder': '\u30D5\u30A1\u30A4\u30EB\u691C\u7D22...',
+    'legend.circular': '\u5FAA\u74B0\u53C2\u7167', 'legend.orphan': '\u5B64\u7ACB', 'legend.highCoupling': '\u9AD8\u7D50\u5408',
+    'legend.imports': 'import\u5148', 'legend.importedBy': 'import\u5143',
+    'detail.importedBy': 'import\u5143', 'detail.imports': 'import\u5148',
+    'detail.none': '\u306A\u3057', 'detail.dir': '\u30C7\u30A3\u30EC\u30AF\u30C8\u30EA', 'detail.dependencies': '\u4F9D\u5B58\u5148', 'detail.dependents': '\u88AB\u4F9D\u5B58',
+    'tooltip.imports': 'import\u5148', 'tooltip.importedBy': 'import\u5143',
+    'help.graph': '\u30B9\u30AF\u30ED\u30FC\u30EB: \u30BA\u30FC\u30E0 \xB7 \u30C9\u30E9\u30C3\u30B0: \u79FB\u52D5 \xB7 \u30AF\u30EA\u30C3\u30AF: \u9078\u629E \xB7 / \u691C\u7D22',
+    'help.hierarchy': '\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u79FB\u52D5 \xB7 \u30AF\u30EA\u30C3\u30AF\u3067\u30CF\u30A4\u30E9\u30A4\u30C8',
+    'help.diff': '\u7DD1=\u8FFD\u52A0 \xB7 \u8D64=\u524A\u9664 \xB7 \u9EC4=\u5909\u66F4 \xB7 \u9752=\u5F71\u97FF',
+    'tab.diff': '\u5DEE\u5206',
+    'diff.addedLabel': '\u8FFD\u52A0', 'diff.removedLabel': '\u524A\u9664', 'diff.modifiedLabel': '\u5909\u66F4', 'diff.affectedLabel': '\u5F71\u97FF',
+    'diff.showAll': '\u5168\u8868\u793A', 'diff.focusChanges': '\u5909\u66F4\u306E\u307F\u8868\u793A', 'diff.noImpact': '\u4E0B\u6D41\u3078\u306E\u5F71\u97FF\u306A\u3057',
+    'diff.affectedByChange': '\u3053\u306E\u5909\u66F4\u306E\u5F71\u97FF\u7BC4\u56F2',
+  }
+};
+let currentLang = '${locale}';
+function applyI18n() {
+  const msgs = I18N[currentLang] || I18N.en;
+  document.querySelectorAll('[data-i18n]').forEach(el => {
+    const key = el.getAttribute('data-i18n');
+    if (msgs[key]) el.textContent = msgs[key];
   });
+  document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
+    const key = el.getAttribute('data-i18n-placeholder');
+    if (msgs[key]) el.placeholder = msgs[key];
+  });
+  document.querySelectorAll('.lang-btn').forEach(b => b.classList.toggle('active', b.dataset.lang === currentLang));
+}
+window.setLang = (lang) => { currentLang = lang; applyI18n(); saveSettings(); };
+function i(key) { return (I18N[currentLang] || I18N.en)[key] || key; }
+${ESC_FUNCTION_JS}
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// SETTINGS (persisted to localStorage)
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+const STORAGE_KEY = 'archtracker-settings';
+function saveSettings() {
+  const s = { theme: document.body.getAttribute('data-theme') || 'dark', fontSize: document.getElementById('font-size-val').textContent, nodeSize: document.getElementById('node-size-val').textContent, linkOpacity: document.getElementById('link-opacity-val').textContent, gravity: document.getElementById('gravity-val').textContent, layerGravity: document.getElementById('layer-gravity-val').textContent, lang: currentLang, projectTitle: document.getElementById('project-title').textContent };
+  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(s)); } catch(e) {}
+}
+function loadSettings() {
+  try { return JSON.parse(localStorage.getItem(STORAGE_KEY)) || null; } catch(e) { return null; }
+}
+
+let nodeScale = 1, baseLinkOpacity = 0.4;
+window.toggleSettings = () => document.getElementById('settings-panel').classList.toggle('open');
+window.setTheme = (theme) => {
+  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') {
+    if (typeof updateLayerPhysics === 'function') {
+      updateLayerPhysics();
+    } else {
+      simulation.force('charge', d3.forceManyBody().strength(-gravityStrength).distanceMax(500));
+    }
+    simulation.alpha(0.5).restart();
+  }
+  saveSettings();
+};
+let layerGravity = 12;
+window.setLayerGravity = (v) => {
+  layerGravity = +v;
+  document.getElementById('layer-gravity-val').textContent = v;
+  if (typeof simulation !== 'undefined' && typeof updateLayerPhysics === 'function') {
+    updateLayerPhysics();
+    simulation.alpha(0.5).restart();
+  }
+  saveSettings();
+};
 
-  // Override applyFilter to respect layers
-  window._origApplyFilter = applyFilter;
-}
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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)));
+};
 
-setTimeout(()=>zoomFit(), 1500);
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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);
 
-// Restore saved settings \u2014 phase 2: apply to graph elements now that they exist
+// 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.fontSize) setFontSize(_savedSettings.fontSize);
+  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; }
 }
 
-// \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;
+document.getElementById('s-files').textContent = DATA.nodes.length;
+document.getElementById('s-edges').textContent = DATA.links.length;
+document.getElementById('s-circular').textContent = DATA.circularFiles.length;
 
-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)';});
-}
+const dirColor = d3.scaleOrdinal()
+  .domain(DATA.dirs)
+  .range(['#58a6ff','#3fb950','#d2a8ff','#f0883e','#79c0ff','#56d4dd','#db61a2','#f778ba','#ffa657','#7ee787']);
 
-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)');
+// 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 = '';
 }
 
-// \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');
+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);
 }
-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);}
+function nodeRadius(d) { return Math.max(5, Math.min(22, 4 + d.dependents * 1.8)); }
+function fileName(id) { return id.split('/').pop(); }
 
-// \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);
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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 diffBuilt = false;
+let hierRelayout = null;
+let hierSyncFromTab = null;
+document.querySelectorAll('.tab').forEach(tab => {
+  tab.addEventListener('click', () => {
+    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+    document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
+    tab.classList.add('active');
+    document.getElementById(tab.dataset.view).classList.add('active');
+    if (tab.dataset.view === 'hier-view') {
+      if (!hierBuilt) { buildHierarchy(); hierBuilt = true; }
+      if (hierSyncFromTab) { hierSyncFromTab(); hierRelayout(); }
+    }
+    if (tab.dataset.view === 'diff-view') {
+      if (!diffBuilt) { buildDiffView(); diffBuilt = true; }
+    }
+  });
 });
 
-// \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);
-  });
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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 '+esc(x)+'</div>');
+  const inc = (d.dependentsList||[]).map(x => '<div class="tt-in">\u2190 '+esc(x)+'</div>');
+  document.getElementById('tt-details').innerHTML = [...out, ...inc].join('');
+  tooltip.style.display = 'block';
+  positionTooltip(e);
 }
-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';
-  });
+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';
 }
-
-// \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;
+function scheduleHideTooltip() {
+  clearTimeout(tooltipHideTimer);
+  tooltipHideTimer = setTimeout(() => {
+    if (!tooltipLocked) {
+      tooltip.style.display = 'none';
+      if (!pinnedNode) resetGraphHighlight();
+    }
+  }, 250);
 }
-// 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);
+// 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
-// HIERARCHY VIEW
+// 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
-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 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));
 
-  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);});
+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));
+};
 
-  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;});
+// 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);
+});
 
-  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;});
+// 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);
 
-  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)));
+// 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 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 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 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 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');
 
-  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);
+// 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})\`);
   });
 
-  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)');
+// \u2500\u2500\u2500 Layer convex hulls \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+let hullGroup = null;
+const activeDirs = new Set(DATA.dirs);
+const dirCounts = {};
+DATA.nodes.forEach(n => dirCounts[n.dir] = (dirCounts[n.dir] || 0) + 1);
+var applyLayerFilter = null; // hoisted for dir-filter integration
+var updateLayerPhysics = null; // hoisted \u2014 updates charge/layer forces without visibility changes
 
-  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);
+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;
   }
 
-  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);
+  // 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());
 
-    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);
-    });
+  // 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;
   });
 
-  // 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;};
+  hullGroup = g.insert('g', ':first-child');
 
-  // Click on empty space to deselect
-  hSvg.on('click',()=>{closeHierDetail();});
+  function updateHulls() {
+    if (!hullGroup) return;
+    hullGroup.selectAll('*').remove();
+    // Show hulls always (filter to selected layers when focused)
 
-  // 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)
+    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;
 
-  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;
-    }
+      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]);
+        }
+      });
 
-    // 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);
+      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;
       }
-    }
 
-    // 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) };
-      });
-    });
+      const hull = d3.polygonHull(points);
+      if (!hull) return;
 
-    // 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));
+      // 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);
 
-    // 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 + ')');
-      }
+      // 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 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 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();
+  });
 
-    // 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');
+  // \u2500\u2500\u2500 Layer legend \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  const layerLegend = document.getElementById('layer-legend');
+  LAYERS.forEach(layer => {
+    const item = document.createElement('div');
+    item.className = 'legend-item';
+    item.innerHTML = '<div class="legend-dot" style="background:' + esc(layer.color) + '"></div> ' + esc(layer.name);
+    layerLegend.appendChild(item);
+  });
+  // Cross-layer edge legend
+  if (CROSS_EDGES && CROSS_EDGES.length > 0) {
+    const crossItem = document.createElement('div');
+    crossItem.className = 'legend-item';
+    crossItem.innerHTML = '<span style="color:#f0883e;font-size:11px">- - \u2192</span> Cross-layer link';
+    layerLegend.appendChild(crossItem);
+  }
+  // Add separator
+  const sep = document.createElement('hr');
+  sep.style.cssText = 'border:none;border-top:1px solid var(--border);margin:6px 0;';
+  layerLegend.appendChild(sep);
+
+  // \u2500\u2500\u2500 Layer tabs (multi-select toggles in tab bar) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  const layerTabsEl = document.getElementById('layer-tabs');
+  const allTab = document.createElement('div');
+  allTab.className = 'layer-tab active';
+  allTab.textContent = 'All';
+  allTab.onclick = () => {
+    activeLayers.clear();
+    syncLayerTabUI();
+    applyLayerFilter();
+    if (hierBuilt && hierSyncFromTab) { hierSyncFromTab(); hierRelayout(); }
+  };
+  layerTabsEl.appendChild(allTab);
+
+  LAYERS.forEach(layer => {
+    const tab = document.createElement('div');
+    tab.className = 'layer-tab';
+    tab.dataset.layer = layer.name;
+    tab.innerHTML = '<div class="lt-dot" style="background:' + esc(layer.color) + '"></div>' + esc(layer.name);
+    tab.onclick = (e) => {
+      if (e.shiftKey) {
+        // Shift+click: solo this layer
+        activeLayers.clear();
+        activeLayers.add(layer.name);
       } else {
-        el.attr('display', null)
-          .transition().duration(300)
-          .attr('y', padY + yIdx * (boxH + gapY) + boxH / 2 + 4);
+        // 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);
+  });
 
-    // Close detail panel if pinned node became hidden
-    if (hierPinned && !isVisible(hierPinned)) {
-      closeHierDetail();
-    }
+  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));
+    });
   }
 
-  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);
+  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 {
-        p.classList.toggle('active', hActiveLayers.has(ln));
+        crossLink.attr('display', null);
+        crossLabel.attr('display', null);
       }
+    }
+    // Update stats
+    const visibleNodes = DATA.nodes.filter(d => {
+      if (!activeDirs.has(d.dir)) return false;
+      if (hasLayerFilter && !activeLayers.has(d.layer)) return false;
+      return true;
+    });
+    const visibleIds = new Set(visibleNodes.map(n => n.id));
+    const visibleEdges = DATA.links.filter(l => {
+      const s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+      return visibleIds.has(s) && visibleIds.has(t);
     });
+    document.getElementById('s-files').textContent = visibleNodes.length;
+    document.getElementById('s-edges').textContent = visibleEdges.length;
+    const visCirc = DATA.circularFiles.filter(f => visibleIds.has(f));
+    document.getElementById('s-circular').textContent = visCirc.length;
+    updateHulls();
+    // Delegate physics update and zoom to fit
+    updateLayerPhysics();
+    simulation.alpha(0.6).restart();
+    setTimeout(() => zoomFit(), 600);
   }
 
-  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);
-    });
+  // Separated physics update: handles charge/layer forces based on filter state.
+  // Called by applyLayerFilter (with zoomFit), setGravity, setLayerGravity (without zoomFit).
+  updateLayerPhysics = function() {
+    const isSingleLayer = activeLayers.size === 1;
+    const lStrength = layerGravity / 100;
+    if (isSingleLayer) {
+      simulation.force('charge', d3.forceManyBody().strength(-gravityStrength * 3).distanceMax(800));
+      simulation.force('layerX', d3.forceX(0).strength(0.03));
+      simulation.force('layerY', d3.forceY(0).strength(0.03));
+    } else {
+      const centers = getLayerCenters();
+      simulation.force('charge', d3.forceManyBody().strength(-gravityStrength).distanceMax(500));
+      simulation.force('layerX', d3.forceX(d => centers[d.layer]?.x || 0).strength(d => d.layer ? lStrength : 0.03));
+      simulation.force('layerY', d3.forceY(d => centers[d.layer]?.y || 0).strength(d => d.layer ? lStrength : 0.03));
+    }
   }
 
-  // Assign function pointers for cross-view sync
-  hierRelayout = hierRelayoutInner;
-  hierSyncFromTab = hierSyncFromTabInner;
+  // \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');
 
-  hSvg.call(hZoom.transform,d3.zoomIdentity.translate(
-    Math.max(0,(W-totalW)/2),20
-  ).scale(Math.min(1,W/(totalW+40),H/(totalH+40))));
+  // 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);
 
-  // If a layer tab was already selected, sync hierarchy on first build
-  if (activeLayerFilter) {
-    hierSyncFromTabInner(activeLayerFilter);
-    hierRelayoutInner();
+  // 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();
+    };
   }
-}
-
-// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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);
+  LAYERS.forEach(layer => {
+    const layerNodes = DATA.nodes.filter(n => n.layer === layer.name);
+    const pill = document.createElement('div');
+    pill.className = 'layer-pill';
+    pill.dataset.layer = layer.name;
+    pill.innerHTML = '<div class="lp-dot" style="background:' + esc(layer.color) + '"></div>' + esc(layer.name) + ' <span class="lp-count">' + layerNodes.length + '</span>';
+    pill.onclick = () => {
+      if (activeLayers.has(layer.name)) activeLayers.delete(layer.name);
+      else activeLayers.add(layer.name);
+      syncLayerTabUI();
+      applyLayerFilter();
+    };
+    pill.onmouseenter = () => {
+      if (pinnedNode) return;
+      node.select('circle').transition().duration(120).attr('opacity', d => d.layer === layer.name ? 1 : 0.1);
+      node.select('text').transition().duration(120).attr('opacity', d => d.layer === layer.name ? 1 : 0.05);
+    };
+    pill.onmouseleave = () => {
+      if (pinnedNode) return;
+      node.select('circle').transition().duration(150).attr('opacity', 1);
+      node.select('text').transition().duration(150).attr('opacity', d => d.dependents >= 1 || d.deps >= 3 ? 1 : 0.5);
+    };
+    layerRowEl.appendChild(pill);
 
-    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';
+    // Build dir group in panel for this layer
+    const layerDirs = [...new Set(layerNodes.map(n => n.dir))].sort();
+    if (layerDirs.length > 0) {
+      const group = document.createElement('div');
+      group.className = 'dir-group';
+      const label = document.createElement('div');
+      label.className = 'dir-group-label';
+      label.innerHTML = '<div class="dg-dot" style="background:' + esc(layer.color) + '"></div>' + esc(layer.name);
+      group.appendChild(label);
+      const pillsWrap = document.createElement('div');
+      pillsWrap.className = 'dir-group-pills';
+      layerDirs.forEach(dir => {
+        const dp = document.createElement('div');
+        dp.className = 'filter-pill active';
+        const shortDir = dir.includes('/') ? dir.substring(dir.indexOf('/') + 1) : dir;
+        dp.innerHTML = '<div class="pill-dot" style="background:' + dirColor(dir) + '"></div>' + esc(shortDir || '.') + ' <span class="pill-count">' + (dirCounts[dir] || 0) + '</span>';
+        dp.onclick = () => {
+          if (activeDirs.has(dir)) { activeDirs.delete(dir); dp.classList.remove('active'); }
+          else { activeDirs.add(dir); dp.classList.add('active'); }
+          applyLayerFilter();
+        };
+        pillsWrap.appendChild(dp);
+      });
+      group.appendChild(pillsWrap);
+      dirPanelEl.appendChild(group);
     }
+  });
 
-    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}));
-
-    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);
+  // Override applyFilter to respect layers
+  window._origApplyFilter = applyFilter;
+}
 
-    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');
+setTimeout(()=>zoomFit(), 1500);
 
-    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));
+// Restore saved settings \u2014 phase 2: apply to graph elements now that they exist
+if (_savedSettings) {
+  if (_savedSettings.fontSize) setFontSize(_savedSettings.fontSize);
+}
 
-    // 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;
-      })());
+// \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;
 
-      dHullGroup = dG.insert('g', ':first-child');
-    }
+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 isDiffNode(id) {
-      return addedSet.has(id) || removedSet.has(id) || modifiedSet.has(id) || affectedSet.has(id);
-    }
+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)');
+}
 
-    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); });
+// \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 */ } });
 
-        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]);
-          }
-        });
+// \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();
+});
 
-        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);
-      });
-    }
+function showDetail(d) {
+  const p=document.getElementById('detail');
+  document.getElementById('d-name').textContent=d.id;
+  document.getElementById('d-meta').innerHTML=i('detail.dir')+': '+esc(d.dir)+'<br>'+i('detail.dependencies')+': '+d.deps+' \\u00b7 '+i('detail.dependents')+': '+d.dependents;
+  const deptL=document.getElementById('d-dependents'), depsL=document.getElementById('d-deps');
+  deptL.innerHTML=(d.dependentsList||[]).map(x=>'<li data-focus="'+esc(x)+'">\\u2190 '+esc(x)+'</li>').join('')||'<li style="color:var(--text-muted)">'+i('detail.none')+'</li>';
+  depsL.innerHTML=(d.dependencies||[]).map(x=>'<li data-focus="'+esc(x)+'">\\u2192 '+esc(x)+'</li>').join('')||'<li style="color:var(--text-muted)">'+i('detail.none')+'</li>';
+  p.classList.add('open');
+}
+// Event delegation for detail panel list items (avoids inline onclick)
+document.getElementById('d-dependents').addEventListener('click', function(e) { var li=e.target.closest('li[data-focus]'); if(li) focusNode(li.dataset.focus); });
+document.getElementById('d-deps').addEventListener('click', function(e) { var li=e.target.closest('li[data-focus]'); if(li) focusNode(li.dataset.focus); });
+window.closeDetail=()=>document.getElementById('detail').classList.remove('open');
+window.focusNode=(id)=>{
+  const n=DATA.nodes.find(x=>x.id===id); if(!n)return; showDetail(n);
+  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));
+};
 
-    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();
-      });
+// 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);}
 
-    dNode.on('mouseover',function(e,d) { showTooltip(e,d); }).on('mousemove',function(e) { positionTooltip(e); }).on('mouseout',function() { scheduleHideTooltip(); });
+// \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);
+});
 
-    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);
+// \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>'+esc(dir||'.')+' <span class="pill-count">'+dirCounts[dir]+'</span>';
+    pill.onclick=()=>{
+      if(activeDirs.has(dir)){activeDirs.delete(dir);pill.classList.remove('active');}
+      else{activeDirs.add(dir);pill.classList.add('active');}
+      applyFilter();
+    };
+    pill.onmouseenter=()=>{
+      if(pinnedNode)return;
+      node.select('circle').transition().duration(120).attr('opacity',d=>d.dir===dir?1:0.1);
+      node.select('text').transition().duration(120).attr('opacity',d=>d.dir===dir?1:0.05);
+    };
+    pill.onmouseleave=()=>{
+      if(pinnedNode)return;
+      node.select('circle').transition().duration(150).attr('opacity',1);
+      node.select('text').transition().duration(150).attr('opacity',d=>d.dependents>=1||d.deps>=3?1:0.5);
+    };
+    filterRowEl.appendChild(pill);
+  });
+}
+function applyFilter(){
+  if (LAYERS) {
+    // Delegate to layer-aware filter
+    if (typeof applyLayerFilter === 'function') { applyLayerFilter(); return; }
   }
-
-  // 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;}
-    });
+  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);
+});
+
+${buildHierarchyJs()}
+${buildDiffJs(diffData)}
 // \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
 // INIT
 // \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
@@ -4279,36 +4538,13 @@ 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
   });
-  return { graph };
 }
 var program = new Command();
 program.name("archtracker").description(
@@ -4326,7 +4562,7 @@ 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,
@@ -4363,7 +4599,7 @@ program.command("analyze").description(
   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,
@@ -4390,7 +4626,7 @@ program.command("check").description(
       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
@@ -4414,7 +4650,7 @@ program.command("context").description(
     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
@@ -4462,7 +4698,7 @@ program.command("serve").description(
     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,
@@ -4489,7 +4725,7 @@ 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,