archtracker-mcp 0.1.0

package/dist/cli/index.js

@@ -0,0 +1,1853 @@
+#!/usr/bin/env node
+
+// src/cli/index.ts
+import { Command } from "commander";
+import { watch } from "fs";
+import { writeFile as writeFile2, mkdir as mkdir2 } from "fs/promises";
+import { join as join2 } from "path";
+
+// src/analyzer/analyze.ts
+import { resolve } from "path";
+import { cruise } from "dependency-cruiser";
+var DEFAULT_EXCLUDE = [
+  "node_modules",
+  "\\.d\\.ts$",
+  "dist",
+  "build",
+  "coverage",
+  "\\.archtracker"
+];
+async function analyzeProject(rootDir, options = {}) {
+  const {
+    exclude = [],
+    maxDepth = 0,
+    tsConfigPath,
+    includeTypeOnly = true
+  } = options;
+  const absRootDir = resolve(rootDir);
+  const allExclude = [...DEFAULT_EXCLUDE, ...exclude];
+  const excludePattern = allExclude.join("|");
+  const cruiseOptions = {
+    baseDir: absRootDir,
+    exclude: { path: excludePattern },
+    doNotFollow: { path: "node_modules" },
+    maxDepth,
+    tsPreCompilationDeps: includeTypeOnly ? true : false,
+    combinedDependencies: false
+  };
+  if (tsConfigPath) {
+    cruiseOptions.tsConfig = { fileName: tsConfigPath };
+  }
+  let result;
+  try {
+    result = await cruise(["."], cruiseOptions);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    throw new AnalyzerError(
+      `dependency-cruiser \u306E\u5B9F\u884C\u306B\u5931\u6557\u3057\u307E\u3057\u305F: ${message}`,
+      { cause: error }
+    );
+  }
+  if (result.exitCode !== 0 && !result.output) {
+    throw new AnalyzerError(
+      `\u89E3\u6790\u304C\u30A8\u30E9\u30FC\u30B3\u30FC\u30C9 ${result.exitCode} \u3067\u7D42\u4E86\u3057\u307E\u3057\u305F`
+    );
+  }
+  const cruiseResult = result.output;
+  return buildGraph(absRootDir, cruiseResult);
+}
+function buildGraph(rootDir, cruiseResult) {
+  const files = {};
+  const edges = [];
+  const circularSet = /* @__PURE__ */ new Set();
+  const circularDependencies = [];
+  for (const mod of cruiseResult.modules) {
+    if (isExternalModule(mod)) continue;
+    files[mod.source] = {
+      path: mod.source,
+      exists: !mod.couldNotResolve,
+      dependencies: [],
+      dependents: []
+    };
+  }
+  for (const mod of cruiseResult.modules) {
+    for (const dep of mod.dependencies) {
+      if (dep.couldNotResolve || dep.coreModule) continue;
+      if (!files[mod.source] || isExternalDep(dep)) continue;
+      const edgeType = dep.typeOnly ? "type-only" : dep.dynamic ? "dynamic" : "static";
+      edges.push({
+        source: mod.source,
+        target: dep.resolved,
+        type: edgeType
+      });
+      if (files[mod.source]) {
+        files[mod.source].dependencies.push(dep.resolved);
+      }
+      if (files[dep.resolved]) {
+        files[dep.resolved].dependents.push(mod.source);
+      }
+      if (dep.circular && dep.cycle) {
+        const cyclePath = dep.cycle.map((c) => c.name);
+        const cycleKey = [...cyclePath].sort().join("\u2192");
+        if (!circularSet.has(cycleKey)) {
+          circularSet.add(cycleKey);
+          circularDependencies.push({ cycle: cyclePath });
+        }
+      }
+    }
+  }
+  return {
+    rootDir,
+    files,
+    edges,
+    circularDependencies,
+    totalFiles: Object.keys(files).length,
+    totalEdges: edges.length
+  };
+}
+function isExternalModule(mod) {
+  if (mod.coreModule) return true;
+  const depTypes = mod.dependencyTypes ?? [];
+  if (depTypes.some((t2) => t2.startsWith("npm") || t2 === "core")) return true;
+  return isExternalPath(mod.source);
+}
+function isExternalDep(dep) {
+  if (dep.coreModule) return true;
+  if (dep.dependencyTypes.some((t2) => t2.startsWith("npm") || t2 === "core")) return true;
+  return isExternalPath(dep.resolved);
+}
+function isExternalPath(source) {
+  if (source.startsWith("@")) return true;
+  if (!source.includes("/") && !source.includes("\\") && !source.includes(".")) return true;
+  if (source.startsWith("node:")) return true;
+  return false;
+}
+var AnalyzerError = class extends Error {
+  constructor(message, options) {
+    super(message, options);
+    this.name = "AnalyzerError";
+  }
+};
+
+// src/i18n/index.ts
+var currentLocale = detectLocale();
+function getLocale() {
+  return currentLocale;
+}
+function setLocale(locale) {
+  currentLocale = locale;
+}
+function detectLocale() {
+  const env = process.env.LC_ALL || process.env.LANG || "";
+  if (env.startsWith("ja")) return "ja";
+  return "en";
+}
+function t(key, vars) {
+  const messages = currentLocale === "ja" ? ja : en;
+  let msg = messages[key] ?? en[key] ?? key;
+  if (vars) {
+    for (const [k, v] of Object.entries(vars)) {
+      msg = msg.replaceAll(`{${k}}`, String(v));
+    }
+  }
+  return msg;
+}
+var en = {
+  // Analyzer
+  "analyzer.failed": "dependency-cruiser failed: {message}",
+  "analyzer.exitCode": "Analysis finished with error code {code}",
+  // Storage
+  "storage.parseFailed": "Failed to parse snapshot.json. File may be corrupted: {path}",
+  "storage.readFailed": "Failed to read snapshot.json: {path}",
+  "storage.invalidSchema": "snapshot.json schema is invalid. Please regenerate with `archtracker init`:\n{issues}",
+  "storage.versionMismatch": "snapshot.json version ({version}) is incompatible with current schema ({expected}). Regenerate with `archtracker init`.",
+  // Path guard
+  "pathGuard.traversal": 'Path points outside project root: "{input}" \u2192 "{resolved}" (allowed: "{boundary}")',
+  // Diff report
+  "diff.title": "# Architecture Change Report\n",
+  "diff.noChanges": "No changes \u2014 snapshot matches current code.\n",
+  "diff.added": "## Added Files ({count})",
+  "diff.removed": "## Removed Files ({count})",
+  "diff.modified": "## Modified Dependencies ({count})",
+  "diff.affected": "## Files Requiring Review ({count})",
+  "diff.reasonRemoved": 'Dependency "{file}" was removed',
+  "diff.reasonModified": 'Dependency "{file}" had its dependencies changed',
+  "diff.reasonAdded": 'New dependency "{file}" was added',
+  // Search
+  "search.pathMatch": 'Path matches "{pattern}"',
+  "search.affected": 'May be affected by changes to "{file}" (via: {via})',
+  "search.critical": "{count} files depend on this component",
+  "search.orphan": "Orphan file (no dependencies, no dependents)",
+  "search.noResults": 'No results: "{query}" (mode: {mode})',
+  "search.results": "Results: {count} (mode: {mode})",
+  // CLI
+  "cli.analyzing": "Analyzing...",
+  "cli.snapshotSaved": "Snapshot saved",
+  "cli.timestamp": "  Timestamp: {ts}",
+  "cli.fileCount": "  Files: {count}",
+  "cli.edgeCount": "  Edges: {count}",
+  "cli.circularCount": "  Circular deps: {count}",
+  "cli.keyComponents": "\nKey components:",
+  "cli.dependedBy": "{path} ({count} dependents)",
+  "cli.noSnapshot": "No snapshot found. Run `archtracker init` first.",
+  "cli.ciFailed": "\nCI check failed: {count} file(s) require review",
+  "cli.autoGenerating": "No snapshot found, auto-generating...",
+  "cli.project": "Project: {path}",
+  "cli.validPaths": "\nValid file paths:",
+  "cli.snapshot": "Snapshot: {ts}",
+  // MCP
+  "mcp.analyzeComplete": "Analysis complete: {files} files, {edges} edges",
+  "mcp.circularFound": "Circular deps: {count} found",
+  "mcp.circularNone": "Circular deps: none",
+  "mcp.snapshotSaved": "Snapshot saved",
+  "mcp.autoInit": "No snapshot existed. Initial snapshot auto-generated.",
+  "mcp.nextCheckEnabled": "Diff checking will be active from the next run.",
+  "mcp.queryRequired": '"{mode}" mode requires the query parameter',
+  // Analyze report
+  "analyze.title": "# Architecture Analysis Report\n",
+  "analyze.overview": "## Overview",
+  "analyze.totalFiles": "  Total files: {count}",
+  "analyze.totalEdges": "  Total edges: {count}",
+  "analyze.totalCircular": "  Circular dependencies: {count}",
+  "analyze.criticalTitle": "\n## Critical Components (Top {count})",
+  "analyze.criticalItem": "  {path} ({count} dependents)",
+  "analyze.circularTitle": "\n## Circular Dependencies ({count})",
+  "analyze.circularItem": "  {files}",
+  "analyze.orphanTitle": "\n## Orphan Files ({count})",
+  "analyze.couplingTitle": "\n## High Coupling (Top {count} by import count)",
+  "analyze.couplingItem": "  {path} ({count} imports)",
+  "analyze.layerTitle": "\n## Directory Breakdown",
+  "analyze.layerItem": "  {dir}/ \u2014 {count} files",
+  "analyze.noIssues": "\nNo architectural issues detected.",
+  "analyze.snapshotSaved": "\nSnapshot saved alongside analysis.",
+  // CI
+  "ci.generated": "GitHub Actions workflow generated: {path}",
+  // Web viewer
+  "web.starting": "Starting architecture viewer...",
+  "web.listening": "Architecture graph available at: http://localhost:{port}",
+  "web.stop": "Press Ctrl+C to stop",
+  "web.watching": "Watching {dir}/ for changes...",
+  "web.reloading": "File change detected, reloading...",
+  "web.reloaded": "Graph reloaded",
+  // Errors
+  "error.analyzer": "[Analysis Error] {message}",
+  "error.storage": "[Storage Error] {message}",
+  "error.pathTraversal": "[Security Error] {message}",
+  "error.generic": "[Error] {message}",
+  "error.unexpected": "[Error] Unexpected error: {message}",
+  "error.cli.analyzer": "Analysis error: {message}",
+  "error.cli.storage": "Storage error: {message}",
+  "error.cli.generic": "Error: {message}",
+  "error.cli.unexpected": "Unexpected error: {message}"
+};
+var ja = {
+  // Analyzer
+  "analyzer.failed": "dependency-cruiser \u306E\u5B9F\u884C\u306B\u5931\u6557\u3057\u307E\u3057\u305F: {message}",
+  "analyzer.exitCode": "\u89E3\u6790\u304C\u30A8\u30E9\u30FC\u30B3\u30FC\u30C9 {code} \u3067\u7D42\u4E86\u3057\u307E\u3057\u305F",
+  // Storage
+  "storage.parseFailed": "snapshot.json \u306E\u30D1\u30FC\u30B9\u306B\u5931\u6557\u3057\u307E\u3057\u305F\u3002\u30D5\u30A1\u30A4\u30EB\u304C\u7834\u640D\u3057\u3066\u3044\u308B\u53EF\u80FD\u6027\u304C\u3042\u308A\u307E\u3059: {path}",
+  "storage.readFailed": "snapshot.json \u306E\u8AAD\u307F\u53D6\u308A\u306B\u5931\u6557\u3057\u307E\u3057\u305F: {path}",
+  "storage.invalidSchema": "snapshot.json \u306E\u30B9\u30AD\u30FC\u30DE\u304C\u4E0D\u6B63\u3067\u3059\u3002archtracker init \u3067\u518D\u751F\u6210\u3057\u3066\u304F\u3060\u3055\u3044:\n{issues}",
+  "storage.versionMismatch": "snapshot.json \u306E\u30D0\u30FC\u30B8\u30E7\u30F3 ({version}) \u304C\u73FE\u5728\u306E\u30B9\u30AD\u30FC\u30DE ({expected}) \u3068\u4E92\u63DB\u6027\u304C\u3042\u308A\u307E\u305B\u3093\u3002archtracker init \u3067\u518D\u751F\u6210\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+  // Path guard
+  "pathGuard.traversal": '\u30D1\u30B9\u304C\u30D7\u30ED\u30B8\u30A7\u30AF\u30C8\u30EB\u30FC\u30C8\u306E\u5916\u90E8\u3092\u6307\u3057\u3066\u3044\u307E\u3059: "{input}" \u2192 "{resolved}" (\u8A31\u53EF\u7BC4\u56F2: "{boundary}")',
+  // Diff report
+  "diff.title": "# \u30A2\u30FC\u30AD\u30C6\u30AF\u30C1\u30E3\u5909\u66F4\u30EC\u30DD\u30FC\u30C8\n",
+  "diff.noChanges": "\u5909\u66F4\u306A\u3057 \u2014 \u30B9\u30CA\u30C3\u30D7\u30B7\u30E7\u30C3\u30C8\u3068\u73FE\u5728\u306E\u30B3\u30FC\u30C9\u306F\u4E00\u81F4\u3057\u3066\u3044\u307E\u3059\u3002\n",
+  "diff.added": "## \u8FFD\u52A0\u3055\u308C\u305F\u30D5\u30A1\u30A4\u30EB ({count}\u4EF6)",
+  "diff.removed": "## \u524A\u9664\u3055\u308C\u305F\u30D5\u30A1\u30A4\u30EB ({count}\u4EF6)",
+  "diff.modified": "## \u4F9D\u5B58\u95A2\u4FC2\u304C\u5909\u66F4\u3055\u308C\u305F\u30D5\u30A1\u30A4\u30EB ({count}\u4EF6)",
+  "diff.affected": "## \u78BA\u8A8D\u304C\u5FC5\u8981\u306A\u30D5\u30A1\u30A4\u30EB ({count}\u4EF6)",
+  "diff.reasonRemoved": '\u4F9D\u5B58\u5148 "{file}" \u304C\u524A\u9664\u3055\u308C\u307E\u3057\u305F',
+  "diff.reasonModified": '\u4F9D\u5B58\u5148 "{file}" \u306E\u4F9D\u5B58\u95A2\u4FC2\u304C\u5909\u66F4\u3055\u308C\u307E\u3057\u305F',
+  "diff.reasonAdded": '\u65B0\u3057\u3044\u4F9D\u5B58\u5148 "{file}" \u304C\u8FFD\u52A0\u3055\u308C\u307E\u3057\u305F',
+  // Search
+  "search.pathMatch": '\u30D1\u30B9\u304C "{pattern}" \u306B\u30DE\u30C3\u30C1',
+  "search.affected": '"{file}" \u306E\u5909\u66F4\u306B\u3088\u308A\u5F71\u97FF\u3092\u53D7\u3051\u308B\u53EF\u80FD\u6027\uFF08\u7D4C\u7531: {via}\uFF09',
+  "search.critical": "{count}\u4EF6\u306E\u30D5\u30A1\u30A4\u30EB\u304C\u4F9D\u5B58\u3059\u308B\u91CD\u8981\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8",
+  "search.orphan": "\u5B64\u7ACB\u30D5\u30A1\u30A4\u30EB\uFF08\u4F9D\u5B58\u306A\u3057\u30FB\u88AB\u4F9D\u5B58\u306A\u3057\uFF09",
+  "search.noResults": '\u691C\u7D22\u7D50\u679C\u306A\u3057: "{query}" (\u30E2\u30FC\u30C9: {mode})',
+  "search.results": "\u691C\u7D22\u7D50\u679C: {count}\u4EF6 (\u30E2\u30FC\u30C9: {mode})",
+  // CLI
+  "cli.analyzing": "\u89E3\u6790\u4E2D...",
+  "cli.snapshotSaved": "\u30B9\u30CA\u30C3\u30D7\u30B7\u30E7\u30C3\u30C8\u3092\u4FDD\u5B58\u3057\u307E\u3057\u305F",
+  "cli.timestamp": "  \u30BF\u30A4\u30E0\u30B9\u30BF\u30F3\u30D7: {ts}",
+  "cli.fileCount": "  \u30D5\u30A1\u30A4\u30EB\u6570: {count}",
+  "cli.edgeCount": "  \u30A8\u30C3\u30B8\u6570: {count}",
+  "cli.circularCount": "  \u5FAA\u74B0\u53C2\u7167: {count}\u4EF6",
+  "cli.keyComponents": "\n\u4E3B\u8981\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8:",
+  "cli.dependedBy": "{path} ({count}\u4EF6\u304C\u4F9D\u5B58)",
+  "cli.noSnapshot": "\u30B9\u30CA\u30C3\u30D7\u30B7\u30E7\u30C3\u30C8\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3002`archtracker init` \u3092\u5148\u306B\u5B9F\u884C\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+  "cli.ciFailed": "\nCI \u30C1\u30A7\u30C3\u30AF\u5931\u6557: {count}\u4EF6\u306E\u8981\u78BA\u8A8D\u30D5\u30A1\u30A4\u30EB\u304C\u3042\u308A\u307E\u3059",
+  "cli.autoGenerating": "\u30B9\u30CA\u30C3\u30D7\u30B7\u30E7\u30C3\u30C8\u304C\u7121\u3044\u305F\u3081\u81EA\u52D5\u751F\u6210\u3057\u307E\u3059...",
+  "cli.project": "\u30D7\u30ED\u30B8\u30A7\u30AF\u30C8: {path}",
+  "cli.validPaths": "\n\u6709\u52B9\u306A\u30D5\u30A1\u30A4\u30EB\u30D1\u30B9:",
+  "cli.snapshot": "\u30B9\u30CA\u30C3\u30D7\u30B7\u30E7\u30C3\u30C8: {ts}",
+  // MCP
+  "mcp.analyzeComplete": "\u89E3\u6790\u5B8C\u4E86: {files}\u30D5\u30A1\u30A4\u30EB, {edges}\u30A8\u30C3\u30B8",
+  "mcp.circularFound": "\u5FAA\u74B0\u53C2\u7167: {count}\u4EF6\u691C\u51FA",
+  "mcp.circularNone": "\u5FAA\u74B0\u53C2\u7167: \u306A\u3057",
+  "mcp.snapshotSaved": "\u30B9\u30CA\u30C3\u30D7\u30B7\u30E7\u30C3\u30C8\u3092\u4FDD\u5B58\u3057\u307E\u3057\u305F",
+  "mcp.autoInit": "\u30B9\u30CA\u30C3\u30D7\u30B7\u30E7\u30C3\u30C8\u304C\u5B58\u5728\u3057\u306A\u304B\u3063\u305F\u305F\u3081\u3001\u521D\u671F\u30B9\u30CA\u30C3\u30D7\u30B7\u30E7\u30C3\u30C8\u3092\u81EA\u52D5\u751F\u6210\u3057\u307E\u3057\u305F\u3002",
+  "mcp.nextCheckEnabled": "\u6B21\u56DE\u306E\u5B9F\u884C\u6642\u304B\u3089\u5DEE\u5206\u30C1\u30A7\u30C3\u30AF\u304C\u6709\u52B9\u306B\u306A\u308A\u307E\u3059\u3002",
+  "mcp.queryRequired": '"{mode}" \u30E2\u30FC\u30C9\u3067\u306F query \u30D1\u30E9\u30E1\u30FC\u30BF\u304C\u5FC5\u9808\u3067\u3059',
+  // Analyze report
+  "analyze.title": "# \u30A2\u30FC\u30AD\u30C6\u30AF\u30C1\u30E3\u5206\u6790\u30EC\u30DD\u30FC\u30C8\n",
+  "analyze.overview": "## \u6982\u8981",
+  "analyze.totalFiles": "  \u7DCF\u30D5\u30A1\u30A4\u30EB\u6570: {count}",
+  "analyze.totalEdges": "  \u7DCF\u30A8\u30C3\u30B8\u6570: {count}",
+  "analyze.totalCircular": "  \u5FAA\u74B0\u53C2\u7167: {count}\u4EF6",
+  "analyze.criticalTitle": "\n## \u91CD\u8981\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8 (\u4E0A\u4F4D{count}\u4EF6)",
+  "analyze.criticalItem": "  {path} ({count}\u4EF6\u304C\u4F9D\u5B58)",
+  "analyze.circularTitle": "\n## \u5FAA\u74B0\u53C2\u7167 ({count}\u4EF6)",
+  "analyze.circularItem": "  {files}",
+  "analyze.orphanTitle": "\n## \u5B64\u7ACB\u30D5\u30A1\u30A4\u30EB ({count}\u4EF6)",
+  "analyze.couplingTitle": "\n## \u9AD8\u7D50\u5408\u30D5\u30A1\u30A4\u30EB (import\u6570 \u4E0A\u4F4D{count}\u4EF6)",
+  "analyze.couplingItem": "  {path} ({count}\u4EF6\u3092import)",
+  "analyze.layerTitle": "\n## \u30C7\u30A3\u30EC\u30AF\u30C8\u30EA\u69CB\u6210",
+  "analyze.layerItem": "  {dir}/ \u2014 {count}\u30D5\u30A1\u30A4\u30EB",
+  "analyze.noIssues": "\n\u30A2\u30FC\u30AD\u30C6\u30AF\u30C1\u30E3\u4E0A\u306E\u554F\u984C\u306F\u691C\u51FA\u3055\u308C\u307E\u305B\u3093\u3067\u3057\u305F\u3002",
+  "analyze.snapshotSaved": "\n\u5206\u6790\u3068\u540C\u6642\u306B\u30B9\u30CA\u30C3\u30D7\u30B7\u30E7\u30C3\u30C8\u3092\u4FDD\u5B58\u3057\u307E\u3057\u305F\u3002",
+  // CI
+  "ci.generated": "GitHub Actions \u30EF\u30FC\u30AF\u30D5\u30ED\u30FC\u3092\u751F\u6210\u3057\u307E\u3057\u305F: {path}",
+  // Web viewer
+  "web.starting": "\u30A2\u30FC\u30AD\u30C6\u30AF\u30C1\u30E3\u30D3\u30E5\u30FC\u30A2\u30FC\u3092\u8D77\u52D5\u4E2D...",
+  "web.listening": "\u30A2\u30FC\u30AD\u30C6\u30AF\u30C1\u30E3\u30B0\u30E9\u30D5: http://localhost:{port}",
+  "web.stop": "Ctrl+C \u3067\u505C\u6B62",
+  "web.watching": "{dir}/ \u3092\u76E3\u8996\u4E2D...",
+  "web.reloading": "\u30D5\u30A1\u30A4\u30EB\u5909\u66F4\u3092\u691C\u51FA\u3001\u30EA\u30ED\u30FC\u30C9\u4E2D...",
+  "web.reloaded": "\u30B0\u30E9\u30D5\u3092\u66F4\u65B0\u3057\u307E\u3057\u305F",
+  // Errors
+  "error.analyzer": "[\u89E3\u6790\u30A8\u30E9\u30FC] {message}",
+  "error.storage": "[\u30B9\u30C8\u30EC\u30FC\u30B8\u30A8\u30E9\u30FC] {message}",
+  "error.pathTraversal": "[\u30BB\u30AD\u30E5\u30EA\u30C6\u30A3\u30A8\u30E9\u30FC] {message}",
+  "error.generic": "[\u30A8\u30E9\u30FC] {message}",
+  "error.unexpected": "[\u30A8\u30E9\u30FC] \u4E88\u671F\u3057\u306A\u3044\u30A8\u30E9\u30FC\u304C\u767A\u751F\u3057\u307E\u3057\u305F: {message}",
+  "error.cli.analyzer": "\u89E3\u6790\u30A8\u30E9\u30FC: {message}",
+  "error.cli.storage": "\u30B9\u30C8\u30EC\u30FC\u30B8\u30A8\u30E9\u30FC: {message}",
+  "error.cli.generic": "\u30A8\u30E9\u30FC: {message}",
+  "error.cli.unexpected": "\u4E88\u671F\u3057\u306A\u3044\u30A8\u30E9\u30FC: {message}"
+};
+
+// src/analyzer/report.ts
+function formatAnalysisReport(graph, options = {}) {
+  const topN = options.topN ?? 10;
+  const lines = [];
+  const files = Object.values(graph.files);
+  lines.push(t("analyze.title"));
+  lines.push(t("analyze.overview"));
+  lines.push(t("analyze.totalFiles", { count: graph.totalFiles }));
+  lines.push(t("analyze.totalEdges", { count: graph.totalEdges }));
+  lines.push(t("analyze.totalCircular", { count: graph.circularDependencies.length }));
+  const critical = files.filter((f) => f.dependents.length > 0).sort((a, b) => b.dependents.length - a.dependents.length).slice(0, topN);
+  if (critical.length > 0) {
+    lines.push(t("analyze.criticalTitle", { count: critical.length }));
+    for (const f of critical) {
+      lines.push(t("analyze.criticalItem", { path: f.path, count: f.dependents.length }));
+    }
+  }
+  if (graph.circularDependencies.length > 0) {
+    lines.push(t("analyze.circularTitle", { count: graph.circularDependencies.length }));
+    for (const c of graph.circularDependencies) {
+      lines.push(t("analyze.circularItem", { files: c.cycle.join(" \u2192 ") }));
+    }
+  }
+  const highCoupling = files.filter((f) => f.dependencies.length > 0).sort((a, b) => b.dependencies.length - a.dependencies.length).slice(0, topN);
+  if (highCoupling.length > 0) {
+    lines.push(t("analyze.couplingTitle", { count: highCoupling.length }));
+    for (const f of highCoupling) {
+      lines.push(t("analyze.couplingItem", { path: f.path, count: f.dependencies.length }));
+    }
+  }
+  const orphans = files.filter(
+    (f) => f.dependents.length === 0 && f.dependencies.length === 0
+  );
+  if (orphans.length > 0) {
+    lines.push(t("analyze.orphanTitle", { count: orphans.length }));
+    for (const f of orphans) {
+      lines.push(`  ${f.path}`);
+    }
+  }
+  const dirCounts = /* @__PURE__ */ new Map();
+  for (const f of files) {
+    const dir = f.path.includes("/") ? f.path.substring(0, f.path.lastIndexOf("/")) : ".";
+    dirCounts.set(dir, (dirCounts.get(dir) ?? 0) + 1);
+  }
+  if (dirCounts.size > 1) {
+    lines.push(t("analyze.layerTitle"));
+    const sorted = [...dirCounts.entries()].sort((a, b) => b[1] - a[1]);
+    for (const [dir, count] of sorted) {
+      lines.push(t("analyze.layerItem", { dir, count }));
+    }
+  }
+  if (graph.circularDependencies.length === 0 && orphans.length === 0) {
+    lines.push(t("analyze.noIssues"));
+  }
+  return lines.join("\n");
+}
+
+// src/storage/snapshot.ts
+import { mkdir, writeFile, readFile, access } from "fs/promises";
+import { join } from "path";
+import { z } from "zod";
+
+// src/types/schema.ts
+var SCHEMA_VERSION = "1.0";
+
+// src/storage/snapshot.ts
+var ARCHTRACKER_DIR = ".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 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"])
+  })),
+  circularDependencies: z.array(z.object({ cycle: z.array(z.string()) })),
+  totalFiles: z.number(),
+  totalEdges: z.number()
+});
+var SnapshotSchema = z.object({
+  version: z.literal(SCHEMA_VERSION),
+  timestamp: z.string(),
+  rootDir: z.string(),
+  graph: DependencyGraphSchema
+});
+async function saveSnapshot(projectRoot, graph) {
+  const dirPath = join(projectRoot, ARCHTRACKER_DIR);
+  const filePath = join(dirPath, SNAPSHOT_FILE);
+  const snapshot = {
+    version: SCHEMA_VERSION,
+    timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+    rootDir: graph.rootDir,
+    graph
+  };
+  await mkdir(dirPath, { recursive: true });
+  await writeFile(filePath, JSON.stringify(snapshot, null, 2), "utf-8");
+  return snapshot;
+}
+async function loadSnapshot(projectRoot) {
+  const filePath = join(projectRoot, ARCHTRACKER_DIR, SNAPSHOT_FILE);
+  let raw;
+  try {
+    raw = await readFile(filePath, "utf-8");
+  } catch (error) {
+    if (isNodeError(error) && error.code === "ENOENT") {
+      return null;
+    }
+    throw new StorageError(
+      t("storage.readFailed", { path: filePath }),
+      { cause: error }
+    );
+  }
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    throw new StorageError(
+      t("storage.parseFailed", { path: filePath })
+    );
+  }
+  const result = SnapshotSchema.safeParse(parsed);
+  if (!result.success) {
+    const issues = result.error.issues.map((i) => `  ${i.path.join(".")}: ${i.message}`).slice(0, 5).join("\n");
+    throw new StorageError(
+      t("storage.invalidSchema", { issues })
+    );
+  }
+  return result.data;
+}
+var StorageError = class extends Error {
+  constructor(message, options) {
+    super(message, options);
+    this.name = "StorageError";
+  }
+};
+function isNodeError(error) {
+  return error instanceof Error && "code" in error;
+}
+
+// src/storage/diff.ts
+function computeDiff(oldGraph, newGraph) {
+  const oldFiles = new Set(Object.keys(oldGraph.files));
+  const newFiles = new Set(Object.keys(newGraph.files));
+  const added = [...newFiles].filter((f) => !oldFiles.has(f));
+  const removed = [...oldFiles].filter((f) => !newFiles.has(f));
+  const modified = [];
+  for (const file of newFiles) {
+    if (!oldFiles.has(file)) continue;
+    const oldDeps = oldGraph.files[file].dependencies.slice().sort();
+    const newDeps = newGraph.files[file].dependencies.slice().sort();
+    if (!arraysEqual(oldDeps, newDeps)) {
+      modified.push(file);
+    }
+  }
+  const removedSet = new Set(removed);
+  const changedFiles = /* @__PURE__ */ new Set([...removed, ...modified]);
+  const affectedDependents = [];
+  const seenAffected = /* @__PURE__ */ new Set();
+  for (const changedFile of changedFiles) {
+    const graph = removedSet.has(changedFile) ? oldGraph : newGraph;
+    const node = graph.files[changedFile];
+    if (!node) continue;
+    for (const dependent of node.dependents) {
+      const key = `${dependent}\u2192${changedFile}`;
+      if (seenAffected.has(key)) continue;
+      seenAffected.add(key);
+      const reason = removedSet.has(changedFile) ? t("diff.reasonRemoved", { file: changedFile }) : t("diff.reasonModified", { file: changedFile });
+      affectedDependents.push({
+        file: dependent,
+        reason,
+        dependsOn: changedFile
+      });
+    }
+  }
+  for (const addedFile of added) {
+    const node = newGraph.files[addedFile];
+    if (!node) continue;
+    for (const dependent of node.dependents) {
+      const key = `${dependent}\u2192${addedFile}`;
+      if (seenAffected.has(key)) continue;
+      seenAffected.add(key);
+      affectedDependents.push({
+        file: dependent,
+        reason: t("diff.reasonAdded", { file: addedFile }),
+        dependsOn: addedFile
+      });
+    }
+  }
+  return { added, removed, modified, affectedDependents };
+}
+function formatDiffReport(diff) {
+  const lines = [];
+  lines.push(t("diff.title"));
+  if (diff.added.length === 0 && diff.removed.length === 0 && diff.modified.length === 0) {
+    lines.push(t("diff.noChanges"));
+    return lines.join("\n");
+  }
+  if (diff.added.length > 0) {
+    lines.push(t("diff.added", { count: diff.added.length }));
+    for (const f of diff.added) {
+      lines.push(`  + ${f}`);
+    }
+    lines.push("");
+  }
+  if (diff.removed.length > 0) {
+    lines.push(t("diff.removed", { count: diff.removed.length }));
+    for (const f of diff.removed) {
+      lines.push(`  - ${f}`);
+    }
+    lines.push("");
+  }
+  if (diff.modified.length > 0) {
+    lines.push(t("diff.modified", { count: diff.modified.length }));
+    for (const f of diff.modified) {
+      lines.push(`  ~ ${f}`);
+    }
+    lines.push("");
+  }
+  if (diff.affectedDependents.length > 0) {
+    lines.push(t("diff.affected", { count: diff.affectedDependents.length }));
+    for (const a of diff.affectedDependents) {
+      lines.push(`  ! ${a.file}`);
+      lines.push(`    ${a.reason}`);
+    }
+    lines.push("");
+  }
+  return lines.join("\n");
+}
+function arraysEqual(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+}
+
+// src/web/server.ts
+import { createServer } from "http";
+
+// src/web/template.ts
+function buildGraphPage(graph, options = {}) {
+  const locale = options.locale ?? "en";
+  const diff = options.diff ?? null;
+  const files = Object.values(graph.files);
+  const nodes = files.map((f) => ({
+    id: f.path,
+    deps: f.dependencies.length,
+    dependents: f.dependents.length,
+    dependencies: f.dependencies,
+    dependentsList: f.dependents,
+    isOrphan: f.dependencies.length === 0 && f.dependents.length === 0,
+    dir: f.path.includes("/") ? f.path.substring(0, f.path.lastIndexOf("/")) : "."
+  }));
+  const links = graph.edges.map((e) => ({
+    source: e.source,
+    target: e.target,
+    type: e.type
+  }));
+  const circularFiles = /* @__PURE__ */ new Set();
+  for (const c of graph.circularDependencies) {
+    for (const f of c.cycle) circularFiles.add(f);
+  }
+  const dirs = [...new Set(nodes.map((n) => n.dir))].sort();
+  const projectName = graph.rootDir.split("/").filter(Boolean).pop() || "Project";
+  const diffData = diff ? JSON.stringify(diff) : "null";
+  const graphData = JSON.stringify({ nodes, links, circularFiles: [...circularFiles], dirs, projectName });
+  return (
+    /* html */
+    `<!DOCTYPE html>
+<html lang="${locale}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${projectName} \u2014 Architecture Viewer</title>
+<style>
+:root {
+  --bg: #0d1117; --bg-card: #161b22; --bg-hover: #1c2129;
+  --border: #30363d; --border-active: #58a6ff;
+  --text: #c9d1d9; --text-dim: #8b949e; --text-muted: #484f58;
+  --accent: #58a6ff; --green: #3fb950; --red: #f97583; --yellow: #f0e68c;
+  --radius: 8px; --font-size: 13px;
+}
+[data-theme="light"] {
+  --bg: #ffffff; --bg-card: #f6f8fa; --bg-hover: #eef1f5;
+  --border: #d0d7de; --border-active: #0969da;
+  --text: #1f2328; --text-dim: #656d76; --text-muted: #8b949e;
+  --accent: #0969da; --green: #1a7f37; --red: #cf222e; --yellow: #9a6700;
+}
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 13px; overflow: hidden; transition: background 0.3s, color 0.3s; }
+
+/* \u2500\u2500\u2500 Tab 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\u2500 */
+#tab-bar { position: fixed; top: 0; left: 0; right: 0; height: 44px; background: var(--bg-card); border-bottom: 1px solid var(--border); display: flex; align-items: center; z-index: 30; padding: 0 16px; gap: 2px; transition: background 0.3s; }
+#tab-bar .logo { font-weight: 700; font-size: 14px; color: var(--accent); margin-right: 16px; letter-spacing: -0.3px; outline: none; border-bottom: 1px dashed transparent; cursor: text; min-width: 40px; }
+#tab-bar .logo:hover { border-bottom-color: var(--text-muted); }
+#tab-bar .logo:focus { border-bottom-color: var(--accent); }
+.tab { padding: 8px 16px; font-size: 13px; color: var(--text-dim); cursor: pointer; border-radius: 6px 6px 0 0; border: 1px solid transparent; border-bottom: none; transition: all 0.15s; user-select: none; position: relative; top: 1px; }
+.tab:hover { color: var(--text); background: var(--bg-hover); }
+.tab.active { color: var(--text); background: var(--bg); border-color: var(--border); }
+.tab-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
+.tab-stats { font-size: 12px; color: var(--text-muted); display: flex; gap: 14px; }
+.tab-stats span b { color: var(--text-dim); }
+.settings-btn { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; cursor: pointer; color: var(--text-dim); font-size: 16px; transition: all 0.15s; }
+.settings-btn:hover { border-color: var(--accent); color: var(--text); }
+
+/* \u2500\u2500\u2500 Views \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 */
+.view { position: fixed; top: 44px; left: 0; right: 0; bottom: 0; display: none; }
+.view.active { display: block; }
+.view svg { width: 100%; height: 100%; }
+
+/* \u2500\u2500\u2500 HUD \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 */
+#hud { position: absolute; top: 12px; left: 12px; z-index: 10; display: flex; flex-direction: column; gap: 8px; }
+.hud-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; font-size: 12px; backdrop-filter: blur(8px); transition: background 0.3s; }
+#search-box { display: flex; align-items: center; gap: 8px; }
+#search-box input { background: transparent; border: none; outline: none; color: var(--text); font-size: 13px; width: 180px; }
+#search-box input::placeholder { color: var(--text-muted); }
+kbd { background: #21262d; border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; font-size: 10px; color: var(--text-muted); font-family: inherit; }
+.legend-item { display: flex; align-items: center; gap: 6px; margin: 3px 0; color: var(--text-dim); }
+.legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+
+/* \u2500\u2500\u2500 Tooltip (interactive \u2014 mouse can enter) \u2500 */
+#tooltip { position: fixed; display: none; background: var(--bg-card); border: 1px solid var(--accent); border-radius: var(--radius); padding: 14px 16px; font-size: 13px; z-index: 40; max-width: 420px; pointer-events: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.5); transition: background 0.3s; }
+#tooltip .tt-name { color: var(--accent); font-size: 14px; font-weight: 600; margin-bottom: 8px; word-break: break-all; }
+#tooltip .tt-badge { display: inline-block; background: var(--bg-hover); border-radius: 10px; padding: 1px 8px; font-size: 11px; margin: 0 2px; }
+#tooltip .tt-section { margin-top: 8px; font-size: 12px; color: var(--text-dim); max-height: 140px; overflow-y: auto; }
+#tooltip .tt-section div { padding: 2px 0; }
+#tooltip .tt-out { color: var(--accent); }
+#tooltip .tt-in { color: var(--green); }
+
+/* \u2500\u2500\u2500 Filters \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+#filters { position: absolute; bottom: 12px; left: 12px; right: 120px; z-index: 10; display: flex; flex-wrap: wrap; gap: 5px; }
+.filter-pill { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 3px 10px; font-size: 11px; cursor: pointer; user-select: none; transition: all 0.15s; display: flex; align-items: center; gap: 5px; }
+.filter-pill:hover { border-color: var(--text-dim); }
+.filter-pill.active { border-color: var(--accent); }
+.filter-pill .pill-dot { width: 6px; height: 6px; border-radius: 50%; }
+.filter-pill .pill-count { color: var(--text-muted); font-size: 10px; }
+
+/* \u2500\u2500\u2500 Zoom controls \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+#zoom-ctrl { position: absolute; bottom: 52px; right: 12px; z-index: 10; display: flex; flex-direction: column; gap: 2px; }
+#zoom-ctrl button { width: 32px; height: 32px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-dim); border-radius: 6px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: all 0.1s; }
+#zoom-ctrl button:hover { background: var(--bg-hover); color: var(--text); }
+
+/* \u2500\u2500\u2500 Detail panel \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 */
+#detail { 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; }
+#detail.open { display: block; }
+#detail .detail-name { color: var(--accent); font-weight: 600; font-size: 14px; word-break: break-all; margin-bottom: 8px; }
+#detail .detail-meta { color: var(--text-dim); margin-bottom: 12px; }
+#detail .detail-section { margin-top: 10px; }
+#detail .detail-section h4 { font-size: 11px; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.5px; margin-bottom: 4px; }
+#detail .detail-list { list-style: none; }
+#detail .detail-list li { padding: 3px 0; font-size: 12px; color: var(--text-dim); cursor: pointer; }
+#detail .detail-list li:hover { color: var(--accent); }
+#detail .close-btn { position: absolute; top: 8px; right: 10px; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; }
+
+/* \u2500\u2500\u2500 Settings panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+#settings-panel { position: fixed; top: 44px; right: 0; width: 280px; height: calc(100vh - 44px); background: var(--bg-card); border-left: 1px solid var(--border); z-index: 25; padding: 20px; transform: translateX(100%); transition: transform 0.25s ease, background 0.3s; overflow-y: auto; }
+#settings-panel.open { transform: translateX(0); }
+#settings-panel h3 { font-size: 14px; color: var(--text); margin-bottom: 16px; }
+.setting-group { margin-bottom: 18px; }
+.setting-group label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
+.setting-group select, .setting-group input[type=range] { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 6px 8px; font-size: 13px; }
+.setting-group input[type=range] { padding: 4px 0; border: none; accent-color: var(--accent); }
+.setting-value { font-size: 11px; color: var(--text-muted); text-align: right; }
+.theme-toggle { display: flex; gap: 6px; }
+.theme-btn { flex: 1; padding: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; text-align: center; font-size: 12px; color: var(--text-dim); transition: all 0.15s; }
+.theme-btn:hover { border-color: var(--text-dim); }
+.theme-btn.active { border-color: var(--accent); color: var(--accent); }
+
+/* \u2500\u2500\u2500 Hierarchy detail panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+#hier-detail { 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; }
+#hier-detail.open { display: block; }
+#hier-detail .detail-name { color: var(--accent); font-weight: 600; font-size: 14px; word-break: break-all; margin-bottom: 8px; }
+#hier-detail .detail-meta { color: var(--text-dim); margin-bottom: 12px; }
+#hier-detail .detail-section { margin-top: 10px; }
+#hier-detail .detail-section h4 { font-size: 11px; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.5px; margin-bottom: 4px; }
+#hier-detail .detail-list { list-style: none; }
+#hier-detail .detail-list li { padding: 3px 0; font-size: 12px; color: var(--text-dim); cursor: pointer; }
+#hier-detail .detail-list li:hover { color: var(--accent); }
+#hier-detail .close-btn { position: absolute; top: 8px; right: 10px; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; }
+
+/* \u2500\u2500\u2500 Hierarchy \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 */
+.hier-node { cursor: pointer; }
+.hier-node rect { rx: 6; ry: 6; stroke-width: 1.5; transition: stroke 0.15s; }
+.hier-node:hover rect { stroke: var(--accent) !important; stroke-width: 2; }
+.hier-node text { fill: var(--text); pointer-events: none; }
+.hier-link { fill: none; stroke: var(--border); stroke-width: 1; }
+.hier-layer-label { fill: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
+
+/* \u2500\u2500\u2500 Impact mode \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 */
+#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 Help bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+#help-bar { position: absolute; bottom: 12px; right: 12px; z-index: 10; font-size: 11px; color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px; transition: background 0.3s; }
+</style>
+</head>
+<body>
+
+<!-- Tab bar -->
+<div id="tab-bar">
+  <span class="logo" id="project-title" contenteditable="true" spellcheck="false" title="Click to edit project name"></span>
+  <div class="tab active" data-view="graph-view" data-i18n="tab.graph">Graph</div>
+  <div class="tab" data-view="hier-view" data-i18n="tab.hierarchy">Hierarchy</div>
+  <div class="tab" data-view="diff-view" id="diff-tab" style="display:none" data-i18n="tab.diff">Diff</div>
+  <div class="tab-right">
+    <div class="tab-stats">
+      <span><span data-i18n="stats.files">Files</span> <b id="s-files">0</b></span>
+      <span><span data-i18n="stats.edges">Edges</span> <b id="s-edges">0</b></span>
+      <span><span data-i18n="stats.circular">Circular</span> <b id="s-circular">0</b></span>
+    </div>
+    <button class="settings-btn" onclick="toggleSettings()" title="Settings">\u2699</button>
+  </div>
+</div>
+
+<!-- Settings panel -->
+<div id="settings-panel">
+  <h3 data-i18n="settings.title">Settings</h3>
+  <div class="setting-group">
+    <label data-i18n="settings.theme">Theme</label>
+    <div class="theme-toggle">
+      <div class="theme-btn active" data-theme-val="dark" onclick="setTheme('dark')">\u{1F319} Dark</div>
+      <div class="theme-btn" data-theme-val="light" onclick="setTheme('light')">\u2600\uFE0F Light</div>
+    </div>
+  </div>
+  <div class="setting-group">
+    <label data-i18n="settings.fontSize">Font Size</label>
+    <input type="range" id="font-size-slider" min="10" max="18" value="13" oninput="setFontSize(this.value)">
+    <div class="setting-value"><span id="font-size-val">13</span>px</div>
+  </div>
+  <div class="setting-group">
+    <label data-i18n="settings.nodeSize">Node Size</label>
+    <input type="range" id="node-size-slider" min="50" max="200" value="100" oninput="setNodeScale(this.value)">
+    <div class="setting-value"><span id="node-size-val">100</span>%</div>
+  </div>
+  <div class="setting-group">
+    <label data-i18n="settings.linkOpacity">Link Opacity</label>
+    <input type="range" id="link-opacity-slider" min="10" max="100" value="40" oninput="setLinkOpacity(this.value)">
+    <div class="setting-value"><span id="link-opacity-val">40</span>%</div>
+  </div>
+  <div class="setting-group">
+    <label data-i18n="settings.gravity">Gravity</label>
+    <input type="range" id="gravity-slider" min="10" max="500" value="150" oninput="setGravity(this.value)">
+    <div class="setting-value"><span id="gravity-val">150</span></div>
+  </div>
+  <div class="setting-group">
+    <label data-i18n="settings.language">Language</label>
+    <div class="theme-toggle">
+      <div class="theme-btn lang-btn" data-lang="en" onclick="setLang('en')">English</div>
+      <div class="theme-btn lang-btn" data-lang="ja" onclick="setLang('ja')">\u65E5\u672C\u8A9E</div>
+    </div>
+  </div>
+  <div class="setting-group" style="margin-top:12px;padding-top:12px;border-top:1px solid var(--border)">
+    <label data-i18n="settings.export">Export</label>
+    <div class="theme-toggle">
+      <div class="theme-btn" onclick="exportSVG()">SVG</div>
+      <div class="theme-btn" onclick="exportPNG()">PNG</div>
+    </div>
+  </div>
+</div>
+
+<!-- Graph View -->
+<div id="graph-view" class="view active">
+  <svg id="graph-svg"></svg>
+  <div id="hud">
+    <div class="hud-panel" id="search-box">
+      <svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor" style="color:var(--text-muted)"><path d="M11.5 7a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm-.82 4.74a6 6 0 1 1 1.06-1.06l3.04 3.04a.75.75 0 1 1-1.06 1.06l-3.04-3.04Z"/></svg>
+      <input id="search" type="text" data-i18n-placeholder="search.placeholder" placeholder="Search files..." autocomplete="off">
+      <kbd>/</kbd>
+    </div>
+    <div class="hud-panel" id="legend-panel">
+      <div class="legend-item"><div class="legend-dot" style="background:var(--red)"></div> <span data-i18n="legend.circular">Circular dep</span></div>
+      <div class="legend-item"><div class="legend-dot" style="background:var(--text-muted)"></div> <span data-i18n="legend.orphan">Orphan</span></div>
+      <div class="legend-item"><div class="legend-dot" style="border:2px solid var(--yellow);width:6px;height:6px"></div> <span data-i18n="legend.highCoupling">High coupling</span></div>
+      <div class="legend-item" style="margin-top:4px;font-size:11px;gap:3px"><span style="color:var(--accent)">\u2014\u2192</span> <span data-i18n="legend.imports">imports</span> <span style="margin-left:6px;color:var(--green)">\u2190\u2014</span> <span data-i18n="legend.importedBy">imported by</span></div>
+    </div>
+  </div>
+  <div id="detail">
+    <button class="close-btn" onclick="closeDetail()">\u2715</button>
+    <div class="detail-name" id="d-name"></div>
+    <div class="detail-meta" id="d-meta"></div>
+    <div class="detail-section"><h4 data-i18n="detail.importedBy">Imported by</h4><ul class="detail-list" id="d-dependents"></ul></div>
+    <div class="detail-section"><h4 data-i18n="detail.imports">Imports</h4><ul class="detail-list" id="d-deps"></ul></div>
+  </div>
+  <div id="filters"></div>
+  <div id="zoom-ctrl">
+    <button onclick="zoomIn()" title="Zoom in">+</button>
+    <button onclick="zoomOut()" title="Zoom out">\u2212</button>
+    <button onclick="zoomFit()" title="Fit">\u22A1</button>
+    <button id="impact-btn" onclick="toggleImpactMode()" title="Impact simulation" style="font-size:12px;margin-top:4px" data-i18n="impact.btn">Impact</button>
+  </div>
+  <div id="impact-badge"></div>
+  <div id="help-bar" data-i18n="help.graph">Scroll: zoom \xB7 Drag: pan \xB7 Click: select \xB7 / search</div>
+</div>
+
+<!-- Hierarchy View -->
+<div id="hier-view" class="view">
+  <svg id="hier-svg"></svg>
+  <div id="hier-hud" style="position:absolute;top:12px;left:12px;z-index:10;display:flex;flex-direction:column;gap:8px;">
+    <div class="hud-panel" id="hier-legend">
+      <div class="legend-item"><div class="legend-dot" style="background:var(--red)"></div> <span data-i18n="legend.circular">Circular dep</span></div>
+      <div class="legend-item"><div class="legend-dot" style="background:var(--text-muted)"></div> <span data-i18n="legend.orphan">Orphan</span></div>
+      <div class="legend-item"><div class="legend-dot" style="border:2px solid var(--yellow);width:6px;height:6px"></div> <span data-i18n="legend.highCoupling">High coupling</span></div>
+    </div>
+  </div>
+  <div id="hier-detail">
+    <button class="close-btn" onclick="closeHierDetail()">\u2715</button>
+    <div class="detail-name" id="hd-name"></div>
+    <div class="detail-meta" id="hd-meta"></div>
+    <div class="detail-section"><h4 data-i18n="detail.importedBy">Imported by</h4><ul class="detail-list" id="hd-dependents"></ul></div>
+    <div class="detail-section"><h4 data-i18n="detail.imports">Imports</h4><ul class="detail-list" id="hd-deps"></ul></div>
+  </div>
+  <div id="hier-filters" style="position:absolute;bottom:42px;left:12px;right:120px;z-index:10;display:flex;flex-wrap:wrap;gap:5px;"></div>
+  <div id="help-bar" style="position:absolute" data-i18n="help.hierarchy">Scroll to navigate \xB7 Click to highlight</div>
+</div>
+
+<!-- Diff View -->
+<div id="diff-view" class="view">
+  <svg id="diff-svg"></svg>
+  <div id="diff-legend" style="position:absolute;top:12px;left:12px;z-index:10;">
+    <div class="hud-panel">
+      <div class="legend-item"><div class="legend-dot" style="background:var(--green)"></div> <span data-i18n="diff.addedLabel">Added</span></div>
+      <div class="legend-item"><div class="legend-dot" style="background:var(--red)"></div> <span data-i18n="diff.removedLabel">Removed</span></div>
+      <div class="legend-item"><div class="legend-dot" style="background:var(--yellow)"></div> <span data-i18n="diff.modifiedLabel">Modified</span></div>
+      <div class="legend-item"><div class="legend-dot" style="background:var(--accent)"></div> <span data-i18n="diff.affectedLabel">Affected</span></div>
+    </div>
+  </div>
+  <div id="help-bar" style="position:absolute" data-i18n="help.diff">Green=added \xB7 Red=removed \xB7 Yellow=modified \xB7 Blue=affected</div>
+</div>
+
+<!-- Tooltip (shared, interactive) -->
+<div id="tooltip">
+  <div class="tt-name" id="tt-name"></div>
+  <div>
+    <span class="tt-badge tt-out" id="tt-dep-count"></span> <span data-i18n="tooltip.imports">imports</span>
+    <span class="tt-badge tt-in" id="tt-dpt-count" style="margin-left:6px"></span> <span data-i18n="tooltip.importedBy">imported by</span>
+  </div>
+  <div class="tt-section" id="tt-details"></div>
+</div>
+
+<script src="https://d3js.org/d3.v7.min.js"></script>
+<script>
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// i18n
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+const I18N = {
+  en: {
+    'tab.graph': 'Graph', 'tab.hierarchy': 'Hierarchy',
+    'stats.files': 'Files', 'stats.edges': 'Edges', 'stats.circular': 'Circular',
+    'settings.title': 'Settings', 'settings.theme': 'Theme', 'settings.fontSize': 'Font Size',
+    'settings.nodeSize': 'Node Size', 'settings.linkOpacity': 'Link Opacity', 'settings.gravity': 'Gravity', 'settings.language': 'Language', 'settings.export': 'Export',
+    'impact.title': 'Impact Simulation', 'impact.btn': 'Impact', 'impact.transitive': 'files affected',
+    'search.placeholder': 'Search files...',
+    'legend.circular': 'Circular dep', 'legend.orphan': 'Orphan', 'legend.highCoupling': 'High coupling',
+    'legend.imports': 'imports', 'legend.importedBy': 'imported by',
+    'detail.importedBy': 'Imported by', 'detail.imports': 'Imports',
+    'detail.none': 'none', 'detail.dir': 'Dir', 'detail.dependencies': 'Dependencies', 'detail.dependents': 'Dependents',
+    'tooltip.imports': 'imports', 'tooltip.importedBy': 'imported by',
+    'help.graph': 'Scroll: zoom \xB7 Drag: pan \xB7 Click: select \xB7 / search',
+    'help.hierarchy': 'Scroll to navigate \xB7 Click to highlight',
+    'help.diff': 'Green=added \xB7 Red=removed \xB7 Yellow=modified \xB7 Blue=affected',
+    'tab.diff': 'Diff',
+    'diff.addedLabel': 'Added', 'diff.removedLabel': 'Removed', 'diff.modifiedLabel': 'Modified', 'diff.affectedLabel': 'Affected',
+  },
+  ja: {
+    'tab.graph': '\u30B0\u30E9\u30D5', 'tab.hierarchy': '\u968E\u5C64\u56F3',
+    'stats.files': '\u30D5\u30A1\u30A4\u30EB', 'stats.edges': '\u30A8\u30C3\u30B8', 'stats.circular': '\u5FAA\u74B0\u53C2\u7167',
+    'settings.title': '\u8A2D\u5B9A', 'settings.theme': '\u30C6\u30FC\u30DE', 'settings.fontSize': '\u30D5\u30A9\u30F3\u30C8\u30B5\u30A4\u30BA',
+    'settings.nodeSize': '\u30CE\u30FC\u30C9\u30B5\u30A4\u30BA', 'settings.linkOpacity': '\u30EA\u30F3\u30AF\u900F\u660E\u5EA6', 'settings.gravity': '\u91CD\u529B', 'settings.language': '\u8A00\u8A9E', 'settings.export': '\u30A8\u30AF\u30B9\u30DD\u30FC\u30C8',
+    'impact.title': '\u5F71\u97FF\u7BC4\u56F2\u30B7\u30DF\u30E5\u30EC\u30FC\u30B7\u30E7\u30F3', 'impact.btn': '\u5F71\u97FF', 'impact.transitive': '\u30D5\u30A1\u30A4\u30EB\u306B\u5F71\u97FF',
+    'search.placeholder': '\u30D5\u30A1\u30A4\u30EB\u691C\u7D22...',
+    'legend.circular': '\u5FAA\u74B0\u53C2\u7167', 'legend.orphan': '\u5B64\u7ACB', 'legend.highCoupling': '\u9AD8\u7D50\u5408',
+    'legend.imports': 'import\u5148', 'legend.importedBy': 'import\u5143',
+    'detail.importedBy': 'import\u5143', 'detail.imports': 'import\u5148',
+    'detail.none': '\u306A\u3057', 'detail.dir': '\u30C7\u30A3\u30EC\u30AF\u30C8\u30EA', 'detail.dependencies': '\u4F9D\u5B58\u5148', 'detail.dependents': '\u88AB\u4F9D\u5B58',
+    'tooltip.imports': 'import\u5148', 'tooltip.importedBy': 'import\u5143',
+    'help.graph': '\u30B9\u30AF\u30ED\u30FC\u30EB: \u30BA\u30FC\u30E0 \xB7 \u30C9\u30E9\u30C3\u30B0: \u79FB\u52D5 \xB7 \u30AF\u30EA\u30C3\u30AF: \u9078\u629E \xB7 / \u691C\u7D22',
+    'help.hierarchy': '\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u79FB\u52D5 \xB7 \u30AF\u30EA\u30C3\u30AF\u3067\u30CF\u30A4\u30E9\u30A4\u30C8',
+    'help.diff': '\u7DD1=\u8FFD\u52A0 \xB7 \u8D64=\u524A\u9664 \xB7 \u9EC4=\u5909\u66F4 \xB7 \u9752=\u5F71\u97FF',
+    'tab.diff': '\u5DEE\u5206',
+    'diff.addedLabel': '\u8FFD\u52A0', 'diff.removedLabel': '\u524A\u9664', 'diff.modifiedLabel': '\u5909\u66F4', 'diff.affectedLabel': '\u5F71\u97FF',
+  }
+};
+let currentLang = '${locale}';
+function applyI18n() {
+  const msgs = I18N[currentLang] || I18N.en;
+  document.querySelectorAll('[data-i18n]').forEach(el => {
+    const key = el.getAttribute('data-i18n');
+    if (msgs[key]) el.textContent = msgs[key];
+  });
+  document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
+    const key = el.getAttribute('data-i18n-placeholder');
+    if (msgs[key]) el.placeholder = msgs[key];
+  });
+  document.querySelectorAll('.lang-btn').forEach(b => b.classList.toggle('active', b.dataset.lang === currentLang));
+}
+window.setLang = (lang) => { currentLang = lang; applyI18n(); saveSettings(); };
+function i(key) { return (I18N[currentLang] || I18N.en)[key] || key; }
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// SETTINGS (persisted to localStorage)
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+const STORAGE_KEY = 'archtracker-settings';
+function saveSettings() {
+  const s = { theme: document.body.getAttribute('data-theme') || 'dark', fontSize: document.getElementById('font-size-val').textContent, nodeSize: document.getElementById('node-size-val').textContent, linkOpacity: document.getElementById('link-opacity-val').textContent, gravity: document.getElementById('gravity-val').textContent, lang: currentLang, projectTitle: document.getElementById('project-title').textContent };
+  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(s)); } catch(e) {}
+}
+function loadSettings() {
+  try { return JSON.parse(localStorage.getItem(STORAGE_KEY)) || null; } catch(e) { return null; }
+}
+
+let nodeScale = 1, baseLinkOpacity = 0.4;
+window.toggleSettings = () => document.getElementById('settings-panel').classList.toggle('open');
+window.setTheme = (theme) => {
+  document.body.setAttribute('data-theme', theme === 'light' ? 'light' : '');
+  document.querySelectorAll('.theme-btn[data-theme-val]').forEach(b => b.classList.toggle('active', b.dataset.themeVal === theme));
+  saveSettings();
+};
+window.setFontSize = (v) => {
+  document.getElementById('font-size-val').textContent = v;
+  const scale = v / 13;
+  if (typeof node !== 'undefined') {
+    node.select('text').attr('font-size', d => (d.dependents>=3?12:10) * scale);
+  }
+  saveSettings();
+};
+window.setNodeScale = (v) => {
+  nodeScale = v / 100;
+  document.getElementById('node-size-val').textContent = v;
+  if (typeof node !== 'undefined') {
+    node.select('circle').attr('r', d => nodeRadius(d) * nodeScale);
+    node.select('text').attr('dx', d => nodeRadius(d) * nodeScale + 4);
+    simulation.force('collision', d3.forceCollide().radius(d => nodeRadius(d) * nodeScale + 4));
+    simulation.alpha(0.3).restart();
+  }
+  saveSettings();
+};
+window.setLinkOpacity = (v) => {
+  baseLinkOpacity = v / 100;
+  document.getElementById('link-opacity-val').textContent = v;
+  if (typeof link !== 'undefined') link.attr('opacity', baseLinkOpacity);
+  saveSettings();
+};
+let gravityStrength = 150;
+window.setGravity = (v) => {
+  gravityStrength = +v;
+  document.getElementById('gravity-val').textContent = v;
+  if (typeof simulation !== 'undefined') {
+    simulation.force('charge', d3.forceManyBody().strength(-gravityStrength).distanceMax(500));
+    simulation.alpha(0.5).restart();
+  }
+  saveSettings();
+};
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// EXPORT
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+window.exportSVG = () => {
+  const activeView = document.querySelector('.view.active svg');
+  if (!activeView) return;
+  const clone = activeView.cloneNode(true);
+  clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+  const blob = new Blob([clone.outerHTML], {type: 'image/svg+xml'});
+  const a = document.createElement('a');
+  a.href = URL.createObjectURL(blob);
+  a.download = (document.getElementById('project-title').textContent || 'graph') + '.svg';
+  a.click(); URL.revokeObjectURL(a.href);
+};
+window.exportPNG = () => {
+  const activeView = document.querySelector('.view.active svg');
+  if (!activeView) return;
+  const clone = activeView.cloneNode(true);
+  clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+  const svgStr = new XMLSerializer().serializeToString(clone);
+  const canvas = document.createElement('canvas');
+  const bbox = activeView.getBoundingClientRect();
+  canvas.width = bbox.width * 2; canvas.height = bbox.height * 2;
+  const ctx = canvas.getContext('2d');
+  ctx.scale(2, 2);
+  const img = new Image();
+  img.onload = () => { ctx.drawImage(img, 0, 0); const a = document.createElement('a'); a.href = canvas.toDataURL('image/png'); a.download = (document.getElementById('project-title').textContent || 'graph') + '.png'; a.click(); };
+  img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgStr)));
+};
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// DATA
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+const DATA = ${graphData};
+const W = window.innerWidth, H = window.innerHeight - 44;
+const circularSet = new Set(DATA.circularFiles);
+
+// Project title (editable)
+const titleEl = document.getElementById('project-title');
+titleEl.textContent = DATA.projectName;
+titleEl.addEventListener('blur', () => { if (!titleEl.textContent.trim()) titleEl.textContent = DATA.projectName; document.title = titleEl.textContent + ' \u2014 Architecture Viewer'; saveSettings(); });
+titleEl.addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); titleEl.blur(); } });
+
+// Restore saved settings \u2014 phase 1: non-graph settings (before graph init)
+const _savedSettings = loadSettings();
+if (_savedSettings) {
+  if (_savedSettings.theme) setTheme(_savedSettings.theme);
+  if (_savedSettings.lang) { currentLang = _savedSettings.lang; applyI18n(); }
+  if (_savedSettings.projectTitle) { titleEl.textContent = _savedSettings.projectTitle; document.title = _savedSettings.projectTitle + ' \u2014 Architecture Viewer'; }
+  // Set slider positions (visual only \u2014 graph not built yet)
+  if (_savedSettings.fontSize) { document.getElementById('font-size-slider').value = _savedSettings.fontSize; document.getElementById('font-size-val').textContent = _savedSettings.fontSize; }
+  if (_savedSettings.nodeSize) { document.getElementById('node-size-slider').value = _savedSettings.nodeSize; document.getElementById('node-size-val').textContent = _savedSettings.nodeSize; nodeScale = _savedSettings.nodeSize / 100; }
+  if (_savedSettings.linkOpacity) { document.getElementById('link-opacity-slider').value = _savedSettings.linkOpacity; document.getElementById('link-opacity-val').textContent = _savedSettings.linkOpacity; baseLinkOpacity = _savedSettings.linkOpacity / 100; }
+  if (_savedSettings.gravity) { document.getElementById('gravity-slider').value = _savedSettings.gravity; document.getElementById('gravity-val').textContent = _savedSettings.gravity; gravityStrength = +_savedSettings.gravity; }
+}
+
+document.getElementById('s-files').textContent = DATA.nodes.length;
+document.getElementById('s-edges').textContent = DATA.links.length;
+document.getElementById('s-circular').textContent = DATA.circularFiles.length;
+
+const dirColor = d3.scaleOrdinal()
+  .domain(DATA.dirs)
+  .range(['#58a6ff','#3fb950','#d2a8ff','#f0883e','#79c0ff','#56d4dd','#db61a2','#f778ba','#ffa657','#7ee787']);
+function nodeColor(d) {
+  if (circularSet.has(d.id)) return '#f97583';
+  if (d.isOrphan) return '#484f58';
+  return dirColor(d.dir);
+}
+function nodeRadius(d) { return Math.max(5, Math.min(22, 4 + d.dependents * 1.8)); }
+function fileName(id) { return id.split('/').pop(); }
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// TAB SWITCHING
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+let hierBuilt = false;
+document.querySelectorAll('.tab').forEach(tab => {
+  tab.addEventListener('click', () => {
+    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+    document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
+    tab.classList.add('active');
+    document.getElementById(tab.dataset.view).classList.add('active');
+    if (tab.dataset.view === 'hier-view' && !hierBuilt) { buildHierarchy(); hierBuilt = true; }
+  });
+});
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// TOOLTIP \u2014 delayed hide + interactive
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+const tooltip = document.getElementById('tooltip');
+let tooltipHideTimer = null;
+let tooltipLocked = false;
+
+function showTooltip(e, d) {
+  clearTimeout(tooltipHideTimer);
+  document.getElementById('tt-name').textContent = d.id;
+  document.getElementById('tt-dep-count').textContent = d.deps;
+  document.getElementById('tt-dpt-count').textContent = d.dependents;
+  const out = (d.dependencies||[]).map(x => '<div class="tt-out">\u2192 '+x+'</div>');
+  const inc = (d.dependentsList||[]).map(x => '<div class="tt-in">\u2190 '+x+'</div>');
+  document.getElementById('tt-details').innerHTML = [...out, ...inc].join('');
+  tooltip.style.display = 'block';
+  positionTooltip(e);
+}
+function positionTooltip(e) {
+  const gap = 24;
+  const tw = 420, th = tooltip.offsetHeight || 200;
+  // Prefer placing to the right and above the cursor so it doesn't cover nodes below
+  let x = e.clientX + gap;
+  let y = e.clientY - th - 12;
+  // If no room on the right, flip left
+  if (x + tw > window.innerWidth) x = e.clientX - tw - gap;
+  // If no room above, place below the cursor with gap
+  if (y < 50) y = e.clientY + gap;
+  // Final clamp
+  if (y + th > window.innerHeight) y = window.innerHeight - th - 8;
+  if (x < 8) x = 8;
+  tooltip.style.left = x + 'px';
+  tooltip.style.top = y + 'px';
+}
+function scheduleHideTooltip() {
+  clearTimeout(tooltipHideTimer);
+  tooltipHideTimer = setTimeout(() => {
+    if (!tooltipLocked) {
+      tooltip.style.display = 'none';
+      if (!pinnedNode) resetGraphHighlight();
+    }
+  }, 250);
+}
+
+// Keep tooltip visible when mouse enters it
+tooltip.addEventListener('mouseenter', () => {
+  clearTimeout(tooltipHideTimer);
+  tooltipLocked = true;
+});
+tooltip.addEventListener('mouseleave', () => {
+  tooltipLocked = false;
+  scheduleHideTooltip();
+});
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// GRAPH VIEW
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+const svg = d3.select('#graph-svg').attr('width', W).attr('height', H);
+const g = svg.append('g');
+const zoom = d3.zoom().scaleExtent([0.05, 10]).on('zoom', e => g.attr('transform', e.transform));
+svg.call(zoom);
+svg.call(zoom.transform, d3.zoomIdentity.translate(W/2, H/2).scale(0.7));
+
+window.zoomIn = () => svg.transition().duration(300).call(zoom.scaleBy, 1.4);
+window.zoomOut = () => svg.transition().duration(300).call(zoom.scaleBy, 0.7);
+window.zoomFit = () => {
+  const b = g.node().getBBox(); if (!b.width) return;
+  const s = Math.min(W/(b.width+80), H/(b.height+80))*0.9;
+  svg.transition().duration(500).call(zoom.transform, d3.zoomIdentity.translate(W/2-(b.x+b.width/2)*s, H/2-(b.y+b.height/2)*s).scale(s));
+};
+
+// Defs
+const defs = svg.append('defs');
+['#30363d','#58a6ff','#3fb950'].forEach((c,i) => {
+  defs.append('marker').attr('id','arrow-'+i).attr('viewBox','0 -4 8 8')
+    .attr('refX',8).attr('refY',0).attr('markerWidth',7).attr('markerHeight',7).attr('orient','auto')
+    .append('path').attr('d','M0,-3.5L8,0L0,3.5Z').attr('fill',c);
+});
+
+// Links
+const link = g.append('g').selectAll('line').data(DATA.links).join('line')
+  .attr('stroke', d => d.type==='type-only'?'#1f3d5c':'#30363d')
+  .attr('stroke-width',1)
+  .attr('stroke-dasharray', d => d.type==='type-only'?'4,3':d.type==='dynamic'?'6,3':null)
+  .attr('marker-end','url(#arrow-0)')
+  .attr('opacity', baseLinkOpacity);
+
+// 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})\`);
+  });
+
+setTimeout(()=>zoomFit(), 1500);
+
+// Restore saved settings \u2014 phase 2: apply to graph elements now that they exist
+if (_savedSettings) {
+  if (_savedSettings.fontSize) setFontSize(_savedSettings.fontSize);
+}
+
+// \u2500\u2500\u2500 Highlight helper \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+let pinnedNode = null;
+
+function highlightNode(d) {
+  const conn = new Set([d.id]);
+  DATA.links.forEach(l => { const s=l.source.id??l.source,t=l.target.id??l.target; if(s===d.id)conn.add(t); if(t===d.id)conn.add(s); });
+  node.select('circle').transition().duration(150).attr('opacity',n=>conn.has(n.id)?1:0.1);
+  node.select('text').transition().duration(150).attr('opacity',n=>conn.has(n.id)?1:0.05);
+  link.transition().duration(150)
+    .attr('opacity',l=>{const s=l.source.id??l.source,t=l.target.id??l.target;return s===d.id||t===d.id?0.9:0.03;})
+    .attr('stroke',l=>{const s=l.source.id??l.source,t=l.target.id??l.target;if(s===d.id)return'#58a6ff';if(t===d.id)return'#3fb950';return l.type==='type-only'?'#1f3d5c':'#30363d';})
+    .attr('stroke-width',l=>{const s=l.source.id??l.source,t=l.target.id??l.target;return s===d.id||t===d.id?2:1;})
+    .attr('marker-end',l=>{const s=l.source.id??l.source,t=l.target.id??l.target;if(s===d.id)return'url(#arrow-1)';if(t===d.id)return'url(#arrow-2)';return'url(#arrow-0)';});
+}
+
+function resetGraphHighlight() {
+  pinnedNode = null;
+  node.select('circle').transition().duration(200).attr('opacity',1);
+  node.select('text').transition().duration(200).attr('opacity',d=>d.dependents>=1||d.deps>=3?1:0.5);
+  link.transition().duration(200)
+    .attr('opacity',baseLinkOpacity)
+    .attr('stroke',d=>d.type==='type-only'?'#1f3d5c':'#30363d')
+    .attr('stroke-width',1).attr('marker-end','url(#arrow-0)');
+}
+
+// \u2500\u2500\u2500 Hover \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+node.on('mouseover', (e,d) => {
+  showTooltip(e,d);
+  if (!pinnedNode) highlightNode(d);
+})
+.on('mousemove', e=>positionTooltip(e))
+.on('mouseout', () => { scheduleHideTooltip(); if (!pinnedNode) { /* highlight resets via scheduleHideTooltip */ } });
+
+// \u2500\u2500\u2500 Click: pin highlight + detail panel \u2500\u2500\u2500\u2500\u2500
+node.on('click', (e,d) => {
+  e.stopPropagation();
+  pinnedNode = d;
+  highlightNode(d);
+  showDetail(d);
+});
+svg.on('click', () => {
+  resetGraphHighlight();
+  tooltip.style.display = 'none';
+  tooltipLocked = false;
+  closeDetail();
+});
+
+function showDetail(d) {
+  const p=document.getElementById('detail');
+  document.getElementById('d-name').textContent=d.id;
+  document.getElementById('d-meta').innerHTML=i('detail.dir')+': '+d.dir+'<br>'+i('detail.dependencies')+': '+d.deps+' \xB7 '+i('detail.dependents')+': '+d.dependents;
+  const deptL=document.getElementById('d-dependents'), depsL=document.getElementById('d-deps');
+  deptL.innerHTML=(d.dependentsList||[]).map(x=>'<li onclick="focusNode(\\''+x+'\\')">\u2190 '+x+'</li>').join('')||'<li style="color:var(--text-muted)">'+i('detail.none')+'</li>';
+  depsL.innerHTML=(d.dependencies||[]).map(x=>'<li onclick="focusNode(\\''+x+'\\')">\u2192 '+x+'</li>').join('')||'<li style="color:var(--text-muted)">'+i('detail.none')+'</li>';
+  p.classList.add('open');
+}
+window.closeDetail=()=>document.getElementById('detail').classList.remove('open');
+window.focusNode=(id)=>{
+  const n=DATA.nodes.find(x=>x.id===id); if(!n)return; showDetail(n);
+  svg.transition().duration(500).call(zoom.transform,d3.zoomIdentity.translate(W/2-n.x*1.5,H/2-n.y*1.5).scale(1.5));
+};
+
+// Drag
+function dragStart(e,d){if(!e.active)simulation.alphaTarget(0.3).restart();d.fx=d.x;d.fy=d.y;}
+function dragging(e,d){d.fx=e.x;d.fy=e.y;}
+function dragEnd(e,d){if(!e.active)simulation.alphaTarget(0);}
+
+// \u2500\u2500\u2500 Search \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+const searchInput=document.getElementById('search');
+document.addEventListener('keydown',e=>{
+  if(e.key==='/'&&document.activeElement!==searchInput){e.preventDefault();searchInput.focus();}
+  if(e.key==='Escape'){searchInput.value='';searchInput.blur();resetGraphHighlight();}
+});
+searchInput.addEventListener('input',e=>{
+  const q=e.target.value.toLowerCase();
+  if(!q){resetGraphHighlight();return;}
+  node.select('circle').attr('opacity',d=>d.id.toLowerCase().includes(q)?1:0.06);
+  node.select('text').attr('opacity',d=>d.id.toLowerCase().includes(q)?1:0.04);
+  link.attr('opacity',0.03);
+});
+
+// \u2500\u2500\u2500 Filters (click=toggle, hover=highlight nodes) \u2500\u2500
+const filtersEl=document.getElementById('filters');
+const activeDirs=new Set(DATA.dirs);
+const dirCounts={};
+DATA.nodes.forEach(n=>dirCounts[n.dir]=(dirCounts[n.dir]||0)+1);
+DATA.dirs.forEach(dir=>{
+  const pill=document.createElement('div');
+  pill.className='filter-pill active';
+  pill.innerHTML='<div class="pill-dot" style="background:'+dirColor(dir)+'"></div>'+(dir||'.')+' <span class="pill-count">'+dirCounts[dir]+'</span>';
+  pill.onclick=()=>{
+    if(activeDirs.has(dir)){activeDirs.delete(dir);pill.classList.remove('active');}
+    else{activeDirs.add(dir);pill.classList.add('active');}
+    applyFilter();
+  };
+  pill.onmouseenter=()=>{
+    if(pinnedNode)return;
+    node.select('circle').transition().duration(120).attr('opacity',d=>d.dir===dir?1:0.1);
+    node.select('text').transition().duration(120).attr('opacity',d=>d.dir===dir?1:0.05);
+  };
+  pill.onmouseleave=()=>{
+    if(pinnedNode)return;
+    node.select('circle').transition().duration(150).attr('opacity',1);
+    node.select('text').transition().duration(150).attr('opacity',d=>d.dependents>=1||d.deps>=3?1:0.5);
+  };
+  filtersEl.appendChild(pill);
+});
+function applyFilter(){
+  node.attr('display',d=>activeDirs.has(d.dir)?null:'none');
+  link.attr('display',l=>{
+    const s=l.source.id??l.source,t=l.target.id??l.target;
+    const sD=DATA.nodes.find(n=>n.id===s)?.dir,tD=DATA.nodes.find(n=>n.id===t)?.dir;
+    return activeDirs.has(sD)&&activeDirs.has(tD)?null:'none';
+  });
+}
+
+// \u2500\u2500\u2500 Impact simulation mode \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+let impactMode=false;
+const impactBadge=document.getElementById('impact-badge');
+window.toggleImpactMode=()=>{
+  impactMode=!impactMode;
+  document.getElementById('impact-btn').classList.toggle('active',impactMode);
+  if(!impactMode){impactBadge.style.display='none';resetGraphHighlight();}
+};
+function getTransitiveDependents(startId){
+  const result=new Set();const queue=[startId];
+  const revMap={};
+  DATA.links.forEach(l=>{const s=l.source.id??l.source,t=l.target.id??l.target;if(!revMap[t])revMap[t]=[];revMap[t].push(s);});
+  while(queue.length){const id=queue.shift();if(result.has(id))continue;result.add(id);(revMap[id]||[]).forEach(x=>queue.push(x));}
+  return result;
+}
+// Override click in impact mode
+const origClick=node.on('click');
+node.on('click',(e,d)=>{
+  if(!impactMode){e.stopPropagation();pinnedNode=d;highlightNode(d);showDetail(d);return;}
+  e.stopPropagation();
+  const affected=getTransitiveDependents(d.id);
+  node.select('circle').transition().duration(200).attr('opacity',n=>affected.has(n.id)?1:0.06)
+    .attr('stroke',n=>affected.has(n.id)&&n.id!==d.id?'var(--red)':n.deps>=5?'var(--yellow)':nodeColor(n))
+    .attr('stroke-width',n=>affected.has(n.id)?3:1.5);
+  node.select('text').transition().duration(200).attr('opacity',n=>affected.has(n.id)?1:0.04);
+  link.transition().duration(200).attr('opacity',l=>{
+    const s=l.source.id??l.source,t=l.target.id??l.target;
+    return affected.has(s)&&affected.has(t)?0.8:0.03;
+  }).attr('stroke',l=>{
+    const s=l.source.id??l.source,t=l.target.id??l.target;
+    return affected.has(s)&&affected.has(t)?'var(--red)':l.type==='type-only'?'#1f3d5c':'#30363d';
+  });
+  impactBadge.textContent=d.id.split('/').pop()+' \u2192 '+(affected.size-1)+' '+i('impact.transitive');
+  impactBadge.style.display='block';
+});
+
+window.addEventListener('resize',()=>{
+  const w=window.innerWidth,h=window.innerHeight-44;
+  svg.attr('width',w).attr('height',h);
+});
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// HIERARCHY VIEW
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+function buildHierarchy(){
+  const hSvg=d3.select('#hier-svg');
+  const hG=hSvg.append('g');
+  const hZoom=d3.zoom().scaleExtent([0.1,4]).on('zoom',e=>hG.attr('transform',e.transform));
+  hSvg.call(hZoom);
+
+  const nodeMap={}; DATA.nodes.forEach(n=>nodeMap[n.id]=n);
+  const importsMap={}; DATA.links.forEach(l=>{const s=l.source.id??l.source,t=l.target.id??l.target;if(!importsMap[s])importsMap[s]=[];importsMap[s].push(t);});
+
+  const entryPoints=DATA.nodes.filter(n=>n.dependents===0).map(n=>n.id);
+  const layers={};const visited=new Set();
+  const queue=entryPoints.map(id=>({id,layer:0}));
+  DATA.nodes.forEach(n=>{if(n.isOrphan)layers[n.id]=0;});
+
+  while(queue.length>0){
+    const{id,layer}=queue.shift();
+    if(visited.has(id)&&(layers[id]??-1)>=layer)continue;
+    layers[id]=Math.max(layers[id]??0,layer);visited.add(id);
+    (importsMap[id]||[]).forEach(t=>queue.push({id:t,layer:layer+1}));
+  }
+  DATA.nodes.forEach(n=>{if(!(n.id in layers))layers[n.id]=0;});
+
+  const maxLayer=Math.max(0,...Object.values(layers));
+  const layerGroups={};
+  for(let i=0;i<=maxLayer;i++)layerGroups[i]=[];
+  Object.entries(layers).forEach(([id,l])=>layerGroups[l].push(id));
+  Object.values(layerGroups).forEach(arr=>arr.sort((a,b)=>(nodeMap[a]?.dir||'').localeCompare(nodeMap[b]?.dir||'')||a.localeCompare(b)));
+
+  const boxW=200,boxH=30,gapX=24,gapY=70,padY=60,padX=40;
+  const positions={};let maxRowWidth=0;
+  for(let layer=0;layer<=maxLayer;layer++){const items=layerGroups[layer];maxRowWidth=Math.max(maxRowWidth,items.length*(boxW+gapX)-gapX);}
+  for(let layer=0;layer<=maxLayer;layer++){
+    const items=layerGroups[layer],rowWidth=items.length*(boxW+gapX)-gapX,startX=padX+(maxRowWidth-rowWidth)/2;
+    items.forEach((id,i)=>{positions[id]={x:startX+i*(boxW+gapX),y:padY+layer*(boxH+gapY)};});
+  }
+
+  const totalW=maxRowWidth+padX*2,totalH=padY*2+(maxLayer+1)*(boxH+gapY);
+  hSvg.attr('width',Math.max(totalW,W)).attr('height',Math.max(totalH,H));
+
+  const linkG=hG.append('g');
+  DATA.links.forEach(l=>{
+    const sId=l.source.id??l.source,tId=l.target.id??l.target;
+    const s=positions[sId],t=positions[tId]; if(!s||!t)return;
+    const x1=s.x+boxW/2,y1=s.y+boxH,x2=t.x+boxW/2,y2=t.y,midY=(y1+y2)/2;
+    linkG.append('path').attr('class','hier-link')
+      .attr('d',\`M\${x1},\${y1} C\${x1},\${midY} \${x2},\${midY} \${x2},\${y2}\`)
+      .attr('stroke',l.type==='type-only'?'#1f3d5c':'var(--border)')
+      .attr('stroke-dasharray',l.type==='type-only'?'4,3':null)
+      .attr('data-source',sId).attr('data-target',tId);
+  });
+
+  hSvg.append('defs').append('marker').attr('id','harrow').attr('viewBox','0 -3 6 6')
+    .attr('refX',6).attr('refY',0).attr('markerWidth',6).attr('markerHeight',6).attr('orient','auto')
+    .append('path').attr('d','M0,-3L6,0L0,3Z').attr('fill','var(--border)');
+  linkG.selectAll('path').attr('marker-end','url(#harrow)');
+
+  for(let layer=0;layer<=maxLayer;layer++){
+    if(!layerGroups[layer].length)continue;
+    hG.append('text').attr('class','hier-layer-label').attr('font-size',11)
+      .attr('x',12).attr('y',padY+layer*(boxH+gapY)+boxH/2+4).text('L'+layer);
+  }
+
+  const nodeG=hG.append('g');
+  DATA.nodes.forEach(n=>{
+    const pos=positions[n.id]; if(!pos)return;
+    const gn=nodeG.append('g').attr('class','hier-node').attr('transform',\`translate(\${pos.x},\${pos.y})\`);
+    gn.append('rect').attr('width',boxW).attr('height',boxH)
+      .attr('fill','var(--bg-card)').attr('stroke',nodeColor(n))
+      .attr('stroke-width',circularSet.has(n.id)?2:1.5);
+    gn.append('text').attr('x',8).attr('y',boxH/2+4).attr('font-size',11)
+      .text(fileName(n.id).length>24?fileName(n.id).slice(0,22)+'\u2026':fileName(n.id));
+    gn.append('text').attr('x',boxW-8).attr('y',boxH/2+4)
+      .attr('text-anchor','end').attr('font-size',10).attr('fill','var(--text-muted)')
+      .text(n.dependents>0?'\u2191'+n.dependents:'');
+    gn.append('text').attr('x',8).attr('y',-4).attr('font-size',9)
+      .attr('fill',dirColor(n.dir)).attr('opacity',0.7).text(n.dir);
+
+    gn.node().__data_id=n.id;
+    gn.on('mouseover',e=>{
+      showTooltip(e,n);
+      if (!hierPinned) hierHighlight(n.id);
+    })
+    .on('mousemove',e=>positionTooltip(e))
+    .on('mouseout',()=>{
+      scheduleHideTooltip();
+      if (!hierPinned) hierResetHighlight();
+    })
+    .on('click',(e)=>{
+      e.stopPropagation();
+      hierPinned=n.id;
+      hierHighlight(n.id);
+      showHierDetail(n);
+    });
+  });
+
+  // Hierarchy highlight helpers
+  let hierPinned=null;
+  function hierHighlight(nId){
+    linkG.selectAll('path')
+      .attr('stroke',function(){const s=this.getAttribute('data-source'),t=this.getAttribute('data-target');if(s===nId)return'#58a6ff';if(t===nId)return'#3fb950';return this.getAttribute('stroke-dasharray')?'#1f3d5c':'var(--border)';})
+      .attr('stroke-width',function(){const s=this.getAttribute('data-source'),t=this.getAttribute('data-target');return(s===nId||t===nId)?2.5:1;})
+      .attr('opacity',function(){const s=this.getAttribute('data-source'),t=this.getAttribute('data-target');return(s===nId||t===nId)?1:0.15;});
+    nodeG.selectAll('.hier-node').attr('opacity',function(){
+      const id=this.__data_id; if(id===nId)return 1;
+      const connected=DATA.links.some(l=>{const s=l.source.id??l.source,t=l.target.id??l.target;return(s===nId&&t===id)||(t===nId&&s===id);});
+      return connected?1:0.3;
+    });
+  }
+  function hierResetHighlight(){
+    hierPinned=null;
+    linkG.selectAll('path')
+      .attr('stroke',function(){return this.getAttribute('stroke-dasharray')?'#1f3d5c':'var(--border)';})
+      .attr('stroke-width',1).attr('opacity',1);
+    nodeG.selectAll('.hier-node').attr('opacity',1);
+  }
+  function showHierDetail(n){
+    const p=document.getElementById('hier-detail');
+    document.getElementById('hd-name').textContent=n.id;
+    document.getElementById('hd-meta').innerHTML=i('detail.dir')+': '+n.dir+'<br>'+i('detail.dependencies')+': '+n.deps+' \xB7 '+i('detail.dependents')+': '+n.dependents;
+    document.getElementById('hd-dependents').innerHTML=(n.dependentsList||[]).map(x=>'<li>\u2190 '+x+'</li>').join('')||'<li style="color:var(--text-muted)">'+i('detail.none')+'</li>';
+    document.getElementById('hd-deps').innerHTML=(n.dependencies||[]).map(x=>'<li>\u2192 '+x+'</li>').join('')||'<li style="color:var(--text-muted)">'+i('detail.none')+'</li>';
+    p.classList.add('open');
+  }
+  window.closeHierDetail=()=>{document.getElementById('hier-detail').classList.remove('open');hierResetHighlight();tooltip.style.display='none';tooltipLocked=false;};
+
+  // Click on empty space to deselect
+  hSvg.on('click',()=>{closeHierDetail();});
+
+  // Hierarchy dir filters
+  const hFiltersEl=document.getElementById('hier-filters');
+  const hActiveDirs=new Set(DATA.dirs);
+  DATA.dirs.forEach(dir=>{
+    const pill=document.createElement('div');
+    pill.className='filter-pill active';
+    pill.innerHTML='<div class="pill-dot" style="background:'+dirColor(dir)+'"></div>'+(dir||'.')+' <span class="pill-count">'+(dirCounts[dir]||0)+'</span>';
+    pill.onclick=()=>{
+      if(hActiveDirs.has(dir)){hActiveDirs.delete(dir);pill.classList.remove('active');}
+      else{hActiveDirs.add(dir);pill.classList.add('active');}
+      nodeG.selectAll('.hier-node').attr('opacity',function(){const nId=this.__data_id;return hActiveDirs.has(nodeMap[nId]?.dir)?1:0.1;});
+    };
+    pill.onmouseenter=()=>{
+      nodeG.selectAll('.hier-node').attr('opacity',function(){return this.__data_id&&nodeMap[this.__data_id]?.dir===dir?1:0.1;});
+    };
+    pill.onmouseleave=()=>{
+      nodeG.selectAll('.hier-node').attr('opacity',1);
+    };
+    hFiltersEl.appendChild(pill);
+  });
+
+  hSvg.call(hZoom.transform,d3.zoomIdentity.translate(
+    Math.max(0,(W-totalW)/2),20
+  ).scale(Math.min(1,W/(totalW+40),H/(totalH+40))));
+}
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// DIFF VIEW
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+const DIFF = ${diffData};
+if (DIFF) {
+  document.getElementById('diff-tab').style.display = '';
+  const addedSet = new Set(DIFF.added||[]);
+  const removedSet = new Set(DIFF.removed||[]);
+  const modifiedSet = new Set(DIFF.modified||[]);
+  const affectedSet = new Set((DIFF.affectedDependents||[]).map(a=>a.file));
+
+  let diffBuilt = false;
+  function buildDiffView() {
+    const dSvg = d3.select('#diff-svg').attr('width', W).attr('height', H);
+    const dG = dSvg.append('g');
+    const dZoom = d3.zoom().scaleExtent([0.05,10]).on('zoom', e=>dG.attr('transform',e.transform));
+    dSvg.call(dZoom);
+
+    function diffColor(d) {
+      if (addedSet.has(d.id)) return 'var(--green)';
+      if (removedSet.has(d.id)) return 'var(--red)';
+      if (modifiedSet.has(d.id)) return 'var(--yellow)';
+      if (affectedSet.has(d.id)) return 'var(--accent)';
+      return '#30363d';
+    }
+
+    const dDefs = dSvg.append('defs');
+    dDefs.append('marker').attr('id','darrow').attr('viewBox','0 -4 8 8')
+      .attr('refX',8).attr('refY',0).attr('markerWidth',7).attr('markerHeight',7).attr('orient','auto')
+      .append('path').attr('d','M0,-3.5L8,0L0,3.5Z').attr('fill','#30363d');
+
+    const dLink = dG.append('g').selectAll('line').data(DATA.links).join('line')
+      .attr('stroke','#30363d').attr('stroke-width',1).attr('marker-end','url(#darrow)').attr('opacity',0.3);
+
+    const simNodes = DATA.nodes.map(d=>({...d}));
+    const simLinks = DATA.links.map(d=>({source:d.source.id??d.source,target:d.target.id??d.target,type:d.type}));
+
+    const dNode = dG.append('g').selectAll('g').data(simNodes).join('g').attr('cursor','pointer');
+    dNode.append('circle')
+      .attr('r', d=>nodeRadius(d)*nodeScale)
+      .attr('fill', diffColor)
+      .attr('stroke', diffColor).attr('stroke-width', d=>(addedSet.has(d.id)||removedSet.has(d.id)||modifiedSet.has(d.id)||affectedSet.has(d.id))?3:1)
+      .attr('opacity', d=>(addedSet.has(d.id)||removedSet.has(d.id)||modifiedSet.has(d.id)||affectedSet.has(d.id))?1:0.2);
+    dNode.append('text')
+      .text(d=>fileName(d.id).replace(/\\.tsx?$/,''))
+      .attr('dx', d=>nodeRadius(d)*nodeScale+4).attr('dy',3.5).attr('font-size',11)
+      .attr('fill', d=>(addedSet.has(d.id)||removedSet.has(d.id)||modifiedSet.has(d.id)||affectedSet.has(d.id))?'var(--text)':'var(--text-muted)')
+      .attr('opacity', d=>(addedSet.has(d.id)||removedSet.has(d.id)||modifiedSet.has(d.id)||affectedSet.has(d.id))?1:0.2)
+      .attr('pointer-events','none');
+
+    const dSim = d3.forceSimulation(simNodes)
+      .force('link', d3.forceLink(simLinks).id(d=>d.id).distance(70).strength(0.25))
+      .force('charge', d3.forceManyBody().strength(-150).distanceMax(500))
+      .force('center', d3.forceCenter(0,0))
+      .force('collision', d3.forceCollide().radius(d=>nodeRadius(d)*nodeScale+4))
+      .on('tick', ()=>{
+        dLink.each(function(d){
+          const dx=d.target.x-d.source.x,dy=d.target.y-d.source.y,dist=Math.sqrt(dx*dx+dy*dy)||1;
+          const rT=nodeRadius(d.target)*nodeScale,rS=nodeRadius(d.source)*nodeScale;
+          d3.select(this).attr('x1',d.source.x+(dx/dist)*rS).attr('y1',d.source.y+(dy/dist)*rS)
+            .attr('x2',d.target.x-(dx/dist)*rT).attr('y2',d.target.y-(dy/dist)*rT);
+        });
+        dNode.attr('transform', d=>\`translate(\${d.x},\${d.y})\`);
+      });
+
+    dNode.on('mouseover',(e,d)=>showTooltip(e,d)).on('mousemove',e=>positionTooltip(e)).on('mouseout',()=>scheduleHideTooltip());
+
+    setTimeout(()=>{
+      const b=dG.node().getBBox();if(!b.width)return;
+      const s=Math.min(W/(b.width+80),H/(b.height+80))*0.9;
+      dSvg.call(dZoom.transform,d3.zoomIdentity.translate(W/2-(b.x+b.width/2)*s,H/2-(b.y+b.height/2)*s).scale(s));
+    },1500);
+  }
+
+  // Hook into tab switching
+  const origTabHandler = document.querySelectorAll('.tab');
+  origTabHandler.forEach(tab=>{
+    tab.addEventListener('click',()=>{
+      if(tab.dataset.view==='diff-view'&&!diffBuilt){buildDiffView();diffBuilt=true;}
+    });
+  });
+}
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// INIT
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+applyI18n();
+</script>
+</body>
+</html>`
+  );
+}
+
+// src/web/server.ts
+function startViewer(graph, options = {}) {
+  const port = options.port ?? 3e3;
+  const locale = options.locale ?? getLocale();
+  const html = buildGraphPage(graph, { locale, diff: options.diff });
+  const graphJson = JSON.stringify(graph);
+  const server = createServer((req, res) => {
+    if (req.url === "/api/graph") {
+      res.writeHead(200, { "Content-Type": "application/json" });
+      res.end(graphJson);
+      return;
+    }
+    res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+    res.end(html);
+  });
+  server.listen(port);
+  return {
+    port,
+    close: () => server.close()
+  };
+}
+
+// src/cli/index.ts
+var program = new Command();
+program.name("archtracker").description(
+  "Architecture & Dependency Tracker \u2014 Prevent missed architecture changes in AI-driven development"
+).version("0.1.0").option("--lang <locale>", "Language (en/ja, auto-detected from LANG env)").hook("preAction", (thisCommand) => {
+  const lang = thisCommand.opts().lang;
+  if (lang === "en" || lang === "ja") {
+    setLocale(lang);
+  }
+});
+program.command("init").description("Generate initial snapshot and save to .archtracker/").option("-t, --target <dir>", "Target directory", "src").option("-r, --root <dir>", "Project root", ".").option(
+  "-e, --exclude <patterns...>",
+  "Exclude patterns (regex)"
+).action(async (opts) => {
+  try {
+    console.log(t("cli.analyzing"));
+    const graph = await analyzeProject(opts.target, {
+      exclude: opts.exclude
+    });
+    const snapshot = await saveSnapshot(opts.root, graph);
+    console.log(t("cli.snapshotSaved"));
+    console.log(t("cli.timestamp", { ts: snapshot.timestamp }));
+    console.log(t("cli.fileCount", { count: graph.totalFiles }));
+    console.log(t("cli.edgeCount", { count: graph.totalEdges }));
+    if (graph.circularDependencies.length > 0) {
+      console.log(
+        t("cli.circularCount", { count: graph.circularDependencies.length })
+      );
+    }
+    const top = Object.values(graph.files).sort((a, b) => b.dependents.length - a.dependents.length).slice(0, 5);
+    if (top.length > 0 && top[0].dependents.length > 0) {
+      console.log(t("cli.keyComponents"));
+      for (const f of top) {
+        if (f.dependents.length === 0) break;
+        console.log(`  ${t("cli.dependedBy", { path: f.path, count: f.dependents.length })}`);
+      }
+    }
+  } catch (error) {
+    handleError(error);
+  }
+});
+program.command("analyze").description(
+  "Comprehensive architecture analysis for existing projects"
+).option("-t, --target <dir>", "Target directory", "src").option("-r, --root <dir>", "Project root", ".").option(
+  "-e, --exclude <patterns...>",
+  "Exclude patterns (regex)"
+).option("-n, --top <number>", "Number of top components to show", "10").option("--save", "Also save a snapshot after analysis").action(async (opts) => {
+  try {
+    console.log(t("cli.analyzing"));
+    const graph = await analyzeProject(opts.target, {
+      exclude: opts.exclude
+    });
+    const report = formatAnalysisReport(graph, { topN: parseInt(opts.top, 10) });
+    console.log(report);
+    if (opts.save) {
+      await saveSnapshot(opts.root, graph);
+      console.log(t("analyze.snapshotSaved"));
+    }
+  } catch (error) {
+    handleError(error);
+  }
+});
+program.command("check").description(
+  "Compare snapshot with current code and report change impacts"
+).option("-t, --target <dir>", "Target directory", "src").option("-r, --root <dir>", "Project root", ".").option("--ci", "CI mode: exit code 1 if affected files exist").action(async (opts) => {
+  try {
+    const existingSnapshot = await loadSnapshot(opts.root);
+    if (!existingSnapshot) {
+      console.log(t("cli.noSnapshot"));
+      process.exit(1);
+    }
+    console.log(t("cli.analyzing"));
+    const currentGraph = await analyzeProject(opts.target);
+    const diff = computeDiff(existingSnapshot.graph, currentGraph);
+    const report = formatDiffReport(diff);
+    console.log(report);
+    if (opts.ci && diff.affectedDependents.length > 0) {
+      console.log(t("cli.ciFailed", { count: diff.affectedDependents.length }));
+      process.exit(1);
+    }
+  } catch (error) {
+    handleError(error);
+  }
+});
+program.command("context").description(
+  "Display current architecture context (for AI session initialization)"
+).option("-t, --target <dir>", "Target directory", "src").option("-r, --root <dir>", "Project root", ".").option("--json", "Output in JSON format").action(async (opts) => {
+  try {
+    let snapshot = await loadSnapshot(opts.root);
+    if (!snapshot) {
+      console.log(t("cli.autoGenerating"));
+      const graph2 = await analyzeProject(opts.target);
+      snapshot = await saveSnapshot(opts.root, graph2);
+    }
+    const graph = snapshot.graph;
+    if (opts.json) {
+      const context = {
+        validPaths: Object.keys(graph.files).sort(),
+        snapshotTimestamp: snapshot.timestamp,
+        totalFiles: graph.totalFiles,
+        totalEdges: graph.totalEdges,
+        circularDependencies: graph.circularDependencies.length,
+        keyComponents: Object.values(graph.files).sort((a, b) => b.dependents.length - a.dependents.length).slice(0, 20).map((f) => ({
+          path: f.path,
+          dependentCount: f.dependents.length,
+          dependencyCount: f.dependencies.length
+        }))
+      };
+      console.log(JSON.stringify(context, null, 2));
+      return;
+    }
+    console.log(t("cli.project", { path: graph.rootDir }));
+    console.log(t("cli.fileCount", { count: graph.totalFiles }));
+    console.log(t("cli.edgeCount", { count: graph.totalEdges }));
+    console.log(t("cli.circularCount", { count: graph.circularDependencies.length }));
+    console.log(t("cli.snapshot", { ts: snapshot.timestamp }));
+    console.log(t("cli.validPaths"));
+    for (const f of Object.keys(graph.files).sort()) {
+      console.log(`  ${f}`);
+    }
+  } catch (error) {
+    handleError(error);
+  }
+});
+program.command("serve").description(
+  "Start interactive architecture graph viewer in browser"
+).option("-t, --target <dir>", "Target directory", "src").option("-r, --root <dir>", "Project root", ".").option("-p, --port <number>", "Port number", "3000").option(
+  "-e, --exclude <patterns...>",
+  "Exclude patterns (regex)"
+).option("-w, --watch", "Watch for file changes and auto-reload").action(async (opts) => {
+  try {
+    console.log(t("web.starting"));
+    console.log(t("cli.analyzing"));
+    let graph;
+    let diff = null;
+    const snapshot = await loadSnapshot(opts.root);
+    if (snapshot) {
+      const currentGraph = await analyzeProject(opts.target, { exclude: opts.exclude });
+      diff = computeDiff(snapshot.graph, currentGraph);
+      graph = currentGraph;
+    } else {
+      graph = await analyzeProject(opts.target, { exclude: opts.exclude });
+    }
+    const port = parseInt(opts.port, 10);
+    const viewer = startViewer(graph, { port, diff });
+    console.log(t("web.listening", { port }));
+    console.log(t("web.stop"));
+    if (opts.watch) {
+      console.log(t("web.watching", { dir: opts.target }));
+      let debounce = null;
+      watch(opts.target, { recursive: true }, () => {
+        if (debounce) clearTimeout(debounce);
+        debounce = setTimeout(async () => {
+          try {
+            console.log(t("web.reloading"));
+            const newGraph = await analyzeProject(opts.target, { exclude: opts.exclude });
+            viewer.close();
+            startViewer(newGraph, { port });
+            console.log(t("web.reloaded"));
+          } catch {
+          }
+        }, 500);
+      });
+    }
+  } catch (error) {
+    handleError(error);
+  }
+});
+program.command("ci-setup").description(
+  "Generate GitHub Actions workflow for architecture checks on PRs"
+).option("-t, --target <dir>", "Target directory", "src").action(async (opts) => {
+  const workflow = `name: Architecture Check
+
+on:
+  pull_request:
+    branches: [main, master]
+
+jobs:
+  arch-check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      - run: npm ci
+      - run: npx archtracker check --target ${opts.target} --ci
+`;
+  try {
+    const dir = join2(".github", "workflows");
+    await mkdir2(dir, { recursive: true });
+    const path = join2(dir, "arch-check.yml");
+    await writeFile2(path, workflow, "utf-8");
+    console.log(t("ci.generated", { path }));
+  } catch (error) {
+    handleError(error);
+  }
+});
+function handleError(error) {
+  if (error instanceof AnalyzerError) {
+    console.error(t("error.cli.analyzer", { message: error.message }));
+  } else if (error instanceof StorageError) {
+    console.error(t("error.cli.storage", { message: error.message }));
+  } else if (error instanceof Error) {
+    console.error(t("error.cli.generic", { message: error.message }));
+  } else {
+    console.error(t("error.cli.unexpected", { message: String(error) }));
+  }
+  process.exit(1);
+}
+program.parse();
+//# sourceMappingURL=index.js.map