@wtdlee/repomap 0.2.0 → 0.3.1

package/dist/{server/doc-server.js → chunk-M6YNU536.js}

@@ -1,200 +1,609 @@
+import { RailsMapGenerator } from './chunk-E4WRODSI.js';
+import { detectEnvironments } from './chunk-3PWXDB7B.js';
+import { RestApiAnalyzer, DataFlowAnalyzer, GraphQLAnalyzer, PagesAnalyzer } from './chunk-GNBMJMET.js';
+import { MermaidGenerator, MarkdownGenerator } from './chunk-SSU6QFTX.js';
+import { PageMapGenerator } from './chunk-3YFXZAP7.js';
+import { analyzeRailsApp } from './chunk-OWM6WNLE.js';
+import { simpleGit } from 'simple-git';
+import * as fs from 'fs/promises';
+import * as path2 from 'path';
+import fg from 'fast-glob';
+import * as crypto from 'crypto';
 import express from 'express';
 import { Server } from 'socket.io';
 import * as http from 'http';
-import * as fs from 'fs/promises';
-import * as path from 'path';
 import { marked } from 'marked';
-import { DocGeneratorEngine } from '../core/engine.js';
-import { PageMapGenerator } from '../generators/page-map-generator.js';
-import { RailsMapGenerator } from '../generators/rails-map-generator.js';
-import { detectEnvironments } from '../utils/env-detector.js';
-import { analyzeRailsApp } from '../analyzers/rails/index.js';
-/**
- * Documentation server with live reload
- * ライブリロード機能付きドキュメントサーバー
- */
-export class DocServer {
-    config;
-    port;
-    app;
-    server;
-    io;
-    engine;
-    currentReport = null;
-    envResult = null;
-    railsAnalysis = null;
-    constructor(config, port = 3030, options) {
-        this.config = config;
-        this.port = port;
-        this.app = express();
-        this.server = http.createServer(this.app);
-        this.io = new Server(this.server);
-        this.engine = new DocGeneratorEngine(config, { noCache: options?.noCache });
-        this.setupRoutes();
-        this.setupSocketIO();
+import * as net from 'net';
+
+var CACHE_VERSION = "1.1";
+var AnalysisCache = class {
+  cacheDir;
+  manifest;
+  manifestPath;
+  dirty = false;
+  constructor(repoPath) {
+    this.cacheDir = path2.join(repoPath, ".repomap-cache");
+    this.manifestPath = path2.join(this.cacheDir, "manifest.json");
+    this.manifest = { version: CACHE_VERSION, entries: {} };
+  }
+  /**
+   * Initialize cache directory and load manifest
+   */
+  async init() {
+    try {
+      await fs.mkdir(this.cacheDir, { recursive: true });
+    } catch (err) {
+      console.warn(`  Warning: Could not create cache directory: ${err.message}`);
+      return;
     }
-    setupRoutes() {
-        // Serve static assets
-        this.app.use('/assets', express.static(path.join(this.config.outputDir, 'assets')));
-        // Serve CSS files from generators/assets
-        const cssFiles = ['common.css', 'page-map.css', 'docs.css', 'rails-map.css'];
-        cssFiles.forEach((file) => {
-            this.app.get(`/${file}`, async (req, res) => {
-                try {
-                    const cssPath = new URL(`../generators/assets/${file}`, import.meta.url);
-                    const css = await fs.readFile(cssPath, 'utf-8');
-                    res.type('text/css').send(css);
-                }
-                catch {
-                    res.status(404).send('CSS not found');
-                }
-            });
-        });
-        // Main page - redirect to page-map
-        this.app.get('/', (req, res) => {
-            res.redirect('/page-map');
-        });
-        // Interactive page map (main view) - now with environment awareness
-        this.app.get('/page-map', (req, res) => {
-            if (!this.currentReport) {
-                res.status(503).send('Documentation not ready yet');
-                return;
-            }
-            const generator = new PageMapGenerator();
-            res.send(generator.generatePageMapHtml(this.currentReport, {
-                envResult: this.envResult,
-                railsAnalysis: this.railsAnalysis,
-            }));
-        });
-        // Rails map (standalone view)
-        this.app.get('/rails-map', (req, res) => {
-            if (!this.railsAnalysis) {
-                res.status(404).send('No Rails environment detected');
-                return;
-            }
-            const generator = new RailsMapGenerator();
-            res.send(generator.generateFromResult(this.railsAnalysis));
-        });
-        // Markdown pages - index
-        this.app.get('/docs', async (req, res) => {
-            res.send(await this.renderPage('index'));
-        });
-        // Markdown pages - specific path
-        this.app.get('/docs/*', async (req, res) => {
-            const pagePath = req.params[0] || 'index';
-            res.send(await this.renderPage(pagePath));
-        });
-        // API endpoints
-        this.app.get('/api/report', (req, res) => {
-            res.json(this.currentReport);
-        });
-        // Environment detection result
-        this.app.get('/api/env', (req, res) => {
-            res.json(this.envResult);
-        });
-        // Rails analysis result
-        this.app.get('/api/rails', (req, res) => {
-            if (this.railsAnalysis) {
-                res.json(this.railsAnalysis);
-            }
-            else {
-                res.status(404).json({ error: 'No Rails analysis available' });
-            }
-        });
-        this.app.get('/api/diagram/:name', (req, res) => {
-            const diagram = this.currentReport?.diagrams.find((d) => d.title.toLowerCase().replace(/\s+/g, '-') === req.params.name);
-            if (diagram) {
-                res.json(diagram);
-            }
-            else {
-                res.status(404).json({ error: 'Diagram not found' });
-            }
-        });
-        // Regenerate endpoint
-        this.app.post('/api/regenerate', async (req, res) => {
-            try {
-                await this.regenerate();
-                res.json({ success: true });
-            }
-            catch (error) {
-                res.status(500).json({ error: error.message });
-            }
-        });
+    try {
+      const data = await fs.readFile(this.manifestPath, "utf-8");
+      const loaded = JSON.parse(data);
+      if (loaded.version === CACHE_VERSION) {
+        this.manifest = loaded;
+      } else {
+        console.log("  Cache version mismatch, clearing cache...");
+        await this.clear();
+      }
+    } catch {
     }
-    setupSocketIO() {
-        this.io.on('connection', (socket) => {
-            console.log('Client connected');
-            socket.on('disconnect', () => {
-                console.log('Client disconnected');
-            });
-        });
+  }
+  /**
+   * Compute hash for a file
+   */
+  async computeFileHash(filePath) {
+    try {
+      const content = await fs.readFile(filePath, "utf-8");
+      return crypto.createHash("md5").update(content).digest("hex");
+    } catch {
+      return "";
     }
-    async renderPage(pagePath) {
-        // Remove .md extension if present
-        const cleanPath = pagePath.replace(/\.md$/, '');
-        const mdPath = path.join(this.config.outputDir, `${cleanPath}.md`);
-        let content = '';
-        try {
-            const markdown = await fs.readFile(mdPath, 'utf-8');
-            // Parse markdown to HTML
-            let html = await marked.parse(markdown);
-            // Convert mermaid code blocks to mermaid divs
-            // marked renders: <pre><code class="language-mermaid">...</code></pre>
-            // mermaid expects: <div class="mermaid">...</div>
-            html = html.replace(/<pre><code class="language-mermaid">([\s\S]*?)<\/code><\/pre>/g, '<div class="mermaid">$1</div>');
-            // Wrap tables for horizontal scroll
-            html = html.replace(/<table>/g, '<div class="table-wrapper"><table>');
-            html = html.replace(/<\/table>/g, '</table></div>');
-            content = html;
-        }
-        catch (e) {
-            console.error(`Failed to render page: ${mdPath}`, e);
-            content = `<h1>Page not found</h1><p>Path: ${cleanPath}</p>`;
+  }
+  /**
+   * Compute hash for multiple files
+   * Sort files first for consistent ordering, then use a sample of files
+   */
+  async computeFilesHash(filePaths) {
+    const sortedFiles = [...filePaths].sort();
+    const sampleSize = 50;
+    let sampleFiles;
+    if (sortedFiles.length <= sampleSize * 2) {
+      sampleFiles = sortedFiles;
+    } else {
+      sampleFiles = [...sortedFiles.slice(0, sampleSize), ...sortedFiles.slice(-sampleSize)];
+    }
+    const hashes = await Promise.all(sampleFiles.map((f) => this.computeFileHash(f)));
+    const countHash = crypto.createHash("md5").update(String(sortedFiles.length)).digest("hex");
+    return crypto.createHash("md5").update(hashes.join("") + countHash).digest("hex");
+  }
+  /**
+   * Get cached data if valid
+   */
+  get(key, currentHash) {
+    const entry = this.manifest.entries[key];
+    if (entry && entry.hash === currentHash) {
+      return entry.data;
+    }
+    return null;
+  }
+  /**
+   * Store data in cache
+   */
+  set(key, hash, data) {
+    this.manifest.entries[key] = {
+      hash,
+      timestamp: Date.now(),
+      data
+    };
+    this.dirty = true;
+  }
+  /**
+   * Save manifest to disk
+   */
+  async save() {
+    if (!this.dirty) return;
+    try {
+      await fs.mkdir(this.cacheDir, { recursive: true });
+      await fs.writeFile(this.manifestPath, JSON.stringify(this.manifest, null, 2));
+      this.dirty = false;
+    } catch (error) {
+      console.warn("  Warning: Failed to save cache:", error.message);
+    }
+  }
+  /**
+   * Clear all cache
+   */
+  async clear() {
+    this.manifest = { version: CACHE_VERSION, entries: {} };
+    this.dirty = true;
+    try {
+      await fs.rm(this.cacheDir, { recursive: true, force: true });
+      await fs.mkdir(this.cacheDir, { recursive: true });
+    } catch {
+    }
+  }
+  /**
+   * Get cache statistics
+   */
+  getStats() {
+    const entries = Object.keys(this.manifest.entries).length;
+    const size = JSON.stringify(this.manifest).length;
+    return {
+      entries,
+      size: size > 1024 * 1024 ? `${(size / 1024 / 1024).toFixed(1)}MB` : `${(size / 1024).toFixed(1)}KB`
+    };
+  }
+};
+
+// src/core/engine.ts
+var DocGeneratorEngine = class {
+  config;
+  mermaidGenerator;
+  markdownGenerator;
+  noCache;
+  constructor(config, options) {
+    this.config = config;
+    this.mermaidGenerator = new MermaidGenerator();
+    this.markdownGenerator = new MarkdownGenerator();
+    this.noCache = options?.noCache ?? false;
+  }
+  /**
+   * Run documentation generation for all configured repositories
+   */
+  async generate() {
+    console.log("\u{1F680} Starting documentation generation...\n");
+    const repositoryReports = [];
+    for (const repoConfig of this.config.repositories) {
+      try {
+        console.log(`
+\u{1F4E6} Analyzing ${repoConfig.displayName}...`);
+        const report2 = await this.analyzeRepository(repoConfig);
+        repositoryReports.push(report2);
+        console.log(`\u2705 Completed ${repoConfig.displayName}`);
+      } catch (error) {
+        console.error(`\u274C Failed to analyze ${repoConfig.name}:`, error.message);
+      }
+    }
+    console.log("\n\u{1F517} Running cross-repository analysis...");
+    const crossRepoAnalysis = this.analyzeCrossRepo(repositoryReports);
+    console.log("\n\u{1F4CA} Generating diagrams...");
+    const results = repositoryReports.map((r) => r.analysis);
+    const crossRepoLinks = this.extractCrossRepoLinks(results);
+    const diagrams = this.mermaidGenerator.generateAll(results, crossRepoLinks);
+    const report = {
+      generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      repositories: repositoryReports,
+      crossRepoAnalysis,
+      diagrams
+    };
+    console.log("\n\u{1F4DD} Writing documentation...");
+    await this.writeDocumentation(report);
+    console.log("\n\u2728 Documentation generation complete!");
+    console.log(`\u{1F4C1} Output: ${this.config.outputDir}`);
+    return report;
+  }
+  /**
+   * Analyze a single repository (with caching)
+   */
+  async analyzeRepository(repoConfig) {
+    const cache = new AnalysisCache(repoConfig.path);
+    await cache.init();
+    const { version, commitHash } = await this.getRepoInfo(repoConfig);
+    const sourceFiles = await fg(["**/*.{ts,tsx,graphql}"], {
+      cwd: repoConfig.path,
+      ignore: ["**/node_modules/**", "**/.next/**", "**/dist/**", "**/build/**"],
+      absolute: true
+    });
+    const contentHash = await cache.computeFilesHash(sourceFiles);
+    const cacheKey = `analysis_v${version}_${repoConfig.name}_${commitHash}`;
+    if (this.noCache) {
+      console.log(`  \u{1F504} Cache disabled, analyzing from scratch...`);
+    }
+    const cachedResult = this.noCache ? null : cache.get(cacheKey, contentHash);
+    if (cachedResult) {
+      console.log(`  \u26A1 Using cached analysis (hash: ${contentHash.slice(0, 8)}...)`);
+      const summary2 = {
+        totalPages: cachedResult.pages.length,
+        totalComponents: cachedResult.components.length,
+        totalGraphQLOperations: cachedResult.graphqlOperations.length,
+        totalDataFlows: cachedResult.dataFlows.length,
+        authRequiredPages: cachedResult.pages.filter((p) => p.authentication.required).length,
+        publicPages: cachedResult.pages.filter((p) => !p.authentication.required).length
+      };
+      return {
+        name: repoConfig.name,
+        displayName: repoConfig.displayName,
+        version,
+        commitHash,
+        analysis: cachedResult,
+        summary: summary2
+      };
+    }
+    const analyzers = repoConfig.analyzers.map((analyzerType) => this.createAnalyzer(analyzerType, repoConfig)).filter((a) => a !== null);
+    console.log(`  Running ${analyzers.length} analyzers in parallel...`);
+    const startTime = Date.now();
+    const analysisResults = await Promise.all(analyzers.map((analyzer) => analyzer.analyze()));
+    console.log(`  Analysis completed in ${((Date.now() - startTime) / 1e3).toFixed(1)}s`);
+    const analysis = this.mergeAnalysisResults(
+      analysisResults,
+      repoConfig.name,
+      version,
+      commitHash
+    );
+    cache.set(cacheKey, contentHash, analysis);
+    await cache.save();
+    console.log(`  \u{1F4BE} Analysis cached (hash: ${contentHash.slice(0, 8)}...)`);
+    const summary = {
+      totalPages: analysis.pages.length,
+      totalComponents: analysis.components.length,
+      totalGraphQLOperations: analysis.graphqlOperations.length,
+      totalDataFlows: analysis.dataFlows.length,
+      authRequiredPages: analysis.pages.filter((p) => p.authentication.required).length,
+      publicPages: analysis.pages.filter((p) => !p.authentication.required).length
+    };
+    return {
+      name: repoConfig.name,
+      displayName: repoConfig.displayName,
+      version,
+      commitHash,
+      analysis,
+      summary
+    };
+  }
+  /**
+   * Get repository version and commit info
+   */
+  async getRepoInfo(repoConfig) {
+    try {
+      const git = simpleGit(repoConfig.path);
+      const log = await git.log({ n: 1 });
+      const commitHash = log.latest?.hash || "unknown";
+      let version = "unknown";
+      try {
+        const packageJsonPath = path2.join(repoConfig.path, "package.json");
+        const packageJson = JSON.parse(await fs.readFile(packageJsonPath, "utf-8"));
+        version = packageJson.version || "unknown";
+      } catch {
+      }
+      return { version, commitHash };
+    } catch {
+      return { version: "unknown", commitHash: "unknown" };
+    }
+  }
+  /**
+   * Create analyzer instance based on type
+   */
+  createAnalyzer(type, config) {
+    switch (type) {
+      case "pages":
+        if (config.type === "nextjs" || config.type === "rails" || config.type === "generic") {
+          return new PagesAnalyzer(config);
         }
-        return this.getHtmlTemplate(content);
+        break;
+      case "graphql":
+        return new GraphQLAnalyzer(config);
+      case "dataflow":
+      case "components":
+        return new DataFlowAnalyzer(config);
+      case "rest-api":
+      case "api":
+        return new RestApiAnalyzer(config);
     }
-    getGraphQLData() {
-        if (!this.currentReport)
-            return '[]';
-        const ops = [];
-        for (const repo of this.currentReport.repositories) {
-            for (const op of repo.analysis?.graphqlOperations || []) {
-                ops.push({
-                    name: op.name,
-                    type: op.type,
-                    returnType: op.returnType,
-                    variables: op.variables,
-                    fields: op.fields,
-                    usedIn: op.usedIn,
-                });
-            }
+    return null;
+  }
+  /**
+   * Merge multiple analysis results
+   */
+  mergeAnalysisResults(results, repository, version, commitHash) {
+    const merged = {
+      repository,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      version,
+      commitHash,
+      pages: [],
+      graphqlOperations: [],
+      apiCalls: [],
+      components: [],
+      dataFlows: [],
+      apiEndpoints: [],
+      models: [],
+      crossRepoLinks: []
+    };
+    for (const result of results) {
+      if (result.pages) merged.pages.push(...result.pages);
+      if (result.graphqlOperations) merged.graphqlOperations.push(...result.graphqlOperations);
+      if (result.apiCalls) merged.apiCalls.push(...result.apiCalls);
+      if (result.components) merged.components.push(...result.components);
+      if (result.dataFlows) merged.dataFlows.push(...result.dataFlows);
+      if (result.apiEndpoints) merged.apiEndpoints.push(...result.apiEndpoints);
+      if (result.models) merged.models.push(...result.models);
+      if (result.crossRepoLinks) merged.crossRepoLinks.push(...result.crossRepoLinks);
+    }
+    return merged;
+  }
+  /**
+   * Analyze cross-repository relationships
+   */
+  analyzeCrossRepo(reports) {
+    const sharedTypes = [];
+    const apiConnections = [];
+    const navigationFlows = [];
+    const dataFlowAcrossRepos = [];
+    const operationsByName = /* @__PURE__ */ new Map();
+    for (const report of reports) {
+      for (const op of report.analysis.graphqlOperations) {
+        const repos = operationsByName.get(op.name) || [];
+        repos.push(report.name);
+        operationsByName.set(op.name, repos);
+      }
+    }
+    for (const [name, repos] of operationsByName) {
+      if (repos.length > 1) {
+        sharedTypes.push(name);
+      }
+    }
+    const frontendRepos = reports.filter((r) => r.analysis.pages.length > 0);
+    const backendRepos = reports.filter((r) => r.analysis.apiEndpoints.length > 0);
+    for (const frontend of frontendRepos) {
+      for (const backend of backendRepos) {
+        for (const endpoint of backend.analysis.apiEndpoints) {
+          apiConnections.push({
+            frontend: frontend.name,
+            backend: backend.name,
+            endpoint: endpoint.path,
+            operations: frontend.analysis.graphqlOperations.filter((op) => op.usedIn.length > 0).map((op) => op.name)
+          });
         }
-        return JSON.stringify(ops);
+      }
     }
-    getApiCallsData() {
-        if (!this.currentReport)
-            return '[]';
-        const calls = [];
-        for (const repo of this.currentReport.repositories) {
-            for (const call of repo.analysis?.apiCalls || []) {
-                calls.push({
-                    id: call.id,
-                    method: call.method,
-                    url: call.url,
-                    callType: call.callType,
-                    filePath: call.filePath,
-                    line: call.line,
-                    containingFunction: call.containingFunction,
-                    requiresAuth: call.requiresAuth,
-                });
-            }
+    return {
+      sharedTypes,
+      apiConnections,
+      navigationFlows,
+      dataFlowAcrossRepos
+    };
+  }
+  /**
+   * Extract cross-repository links
+   */
+  extractCrossRepoLinks(results) {
+    const links = [];
+    const operationsByName = /* @__PURE__ */ new Map();
+    for (const result of results) {
+      for (const op of result.graphqlOperations) {
+        const existing = operationsByName.get(op.name) || [];
+        existing.push(result);
+        operationsByName.set(op.name, existing);
+      }
+    }
+    for (const [name, repos] of operationsByName) {
+      if (repos.length > 1) {
+        links.push({
+          sourceRepo: repos[0].repository,
+          sourcePath: `graphql/${name}`,
+          targetRepo: repos[1].repository,
+          targetPath: `graphql/${name}`,
+          linkType: "graphql-operation",
+          description: `Shared GraphQL operation: ${name}`
+        });
+      }
+    }
+    return links;
+  }
+  /**
+   * Write documentation to output directory
+   */
+  async writeDocumentation(report) {
+    const outputDir = this.config.outputDir;
+    await fs.mkdir(outputDir, { recursive: true });
+    const docs = this.markdownGenerator.generateDocumentation(report);
+    for (const [filePath, content] of docs) {
+      const fullPath = path2.join(outputDir, filePath);
+      const dir = path2.dirname(fullPath);
+      await fs.mkdir(dir, { recursive: true });
+      await fs.writeFile(fullPath, content, "utf-8");
+      console.log(`  \u{1F4C4} ${filePath}`);
+    }
+    const jsonPath = path2.join(outputDir, "report.json");
+    await fs.writeFile(jsonPath, JSON.stringify(report, null, 2), "utf-8");
+    console.log(`  \u{1F4CB} report.json`);
+  }
+};
+function isPortAvailable(port) {
+  return new Promise((resolve) => {
+    const server = net.createServer();
+    server.once("error", (err) => {
+      if (err.code === "EADDRINUSE") {
+        resolve(false);
+      } else {
+        resolve(false);
+      }
+    });
+    server.once("listening", () => {
+      server.close();
+      resolve(true);
+    });
+    server.listen(port);
+  });
+}
+async function findAvailablePort(startPort, maxAttempts = 10) {
+  for (let i = 0; i < maxAttempts; i++) {
+    const port = startPort + i;
+    if (await isPortAvailable(port)) {
+      return port;
+    }
+  }
+  throw new Error(
+    `No available port found between ${startPort} and ${startPort + maxAttempts - 1}`
+  );
+}
+
+// src/server/doc-server.ts
+var DocServer = class {
+  config;
+  port;
+  app;
+  server;
+  io;
+  engine;
+  currentReport = null;
+  envResult = null;
+  railsAnalysis = null;
+  constructor(config, port = 3030, options) {
+    this.config = config;
+    this.port = port;
+    this.app = express();
+    this.server = http.createServer(this.app);
+    this.io = new Server(this.server);
+    this.engine = new DocGeneratorEngine(config, { noCache: options?.noCache });
+    this.setupRoutes();
+    this.setupSocketIO();
+  }
+  setupRoutes() {
+    this.app.use("/assets", express.static(path2.join(this.config.outputDir, "assets")));
+    const cssFiles = ["common.css", "page-map.css", "docs.css", "rails-map.css"];
+    cssFiles.forEach((file) => {
+      this.app.get(`/${file}`, async (req, res) => {
+        try {
+          const cssPath = new URL(`../generators/assets/${file}`, import.meta.url);
+          const css = await fs.readFile(cssPath, "utf-8");
+          res.type("text/css").send(css);
+        } catch {
+          res.status(404).send("CSS not found");
         }
-        return JSON.stringify(calls);
+      });
+    });
+    this.app.get("/", (req, res) => {
+      res.redirect("/page-map");
+    });
+    this.app.get("/page-map", (req, res) => {
+      if (!this.currentReport) {
+        res.status(503).send("Documentation not ready yet");
+        return;
+      }
+      const generator = new PageMapGenerator();
+      res.send(
+        generator.generatePageMapHtml(this.currentReport, {
+          envResult: this.envResult,
+          railsAnalysis: this.railsAnalysis
+        })
+      );
+    });
+    this.app.get("/rails-map", (req, res) => {
+      if (!this.railsAnalysis) {
+        res.status(404).send("No Rails environment detected");
+        return;
+      }
+      const generator = new RailsMapGenerator();
+      res.send(generator.generateFromResult(this.railsAnalysis));
+    });
+    this.app.get("/docs", async (req, res) => {
+      res.send(await this.renderPage("index"));
+    });
+    this.app.get("/docs/*", async (req, res) => {
+      const pagePath = req.params[0] || "index";
+      res.send(await this.renderPage(pagePath));
+    });
+    this.app.get("/api/report", (req, res) => {
+      res.json(this.currentReport);
+    });
+    this.app.get("/api/env", (req, res) => {
+      res.json(this.envResult);
+    });
+    this.app.get("/api/rails", (req, res) => {
+      if (this.railsAnalysis) {
+        res.json(this.railsAnalysis);
+      } else {
+        res.status(404).json({ error: "No Rails analysis available" });
+      }
+    });
+    this.app.get("/api/diagram/:name", (req, res) => {
+      const diagram = this.currentReport?.diagrams.find(
+        (d) => d.title.toLowerCase().replace(/\s+/g, "-") === req.params.name
+      );
+      if (diagram) {
+        res.json(diagram);
+      } else {
+        res.status(404).json({ error: "Diagram not found" });
+      }
+    });
+    this.app.post("/api/regenerate", async (req, res) => {
+      try {
+        await this.regenerate();
+        res.json({ success: true });
+      } catch (error) {
+        res.status(500).json({ error: error.message });
+      }
+    });
+  }
+  setupSocketIO() {
+    this.io.on("connection", (socket) => {
+      console.log("Client connected");
+      socket.on("disconnect", () => {
+        console.log("Client disconnected");
+      });
+    });
+  }
+  async renderPage(pagePath) {
+    const cleanPath = pagePath.replace(/\.md$/, "");
+    const mdPath = path2.join(this.config.outputDir, `${cleanPath}.md`);
+    let content = "";
+    try {
+      const markdown = await fs.readFile(mdPath, "utf-8");
+      let html = await marked.parse(markdown);
+      html = html.replace(
+        /<pre><code class="language-mermaid">([\s\S]*?)<\/code><\/pre>/g,
+        '<div class="mermaid">$1</div>'
+      );
+      html = html.replace(/<table>/g, '<div class="table-wrapper"><table>');
+      html = html.replace(/<\/table>/g, "</table></div>");
+      content = html;
+    } catch (e) {
+      console.error(`Failed to render page: ${mdPath}`, e);
+      content = `<h1>Page not found</h1><p>Path: ${cleanPath}</p>`;
+    }
+    return this.getHtmlTemplate(content);
+  }
+  getGraphQLData() {
+    if (!this.currentReport) return "[]";
+    const ops = [];
+    for (const repo of this.currentReport.repositories) {
+      for (const op of repo.analysis?.graphqlOperations || []) {
+        ops.push({
+          name: op.name,
+          type: op.type,
+          returnType: op.returnType,
+          variables: op.variables,
+          fields: op.fields,
+          usedIn: op.usedIn
+        });
+      }
     }
-    getHtmlTemplate(content) {
-        const graphqlData = this.getGraphQLData();
-        const apiCallsData = this.getApiCallsData();
-        return `<!DOCTYPE html>
+    return JSON.stringify(ops);
+  }
+  getApiCallsData() {
+    if (!this.currentReport) return "[]";
+    const calls = [];
+    for (const repo of this.currentReport.repositories) {
+      for (const call of repo.analysis?.apiCalls || []) {
+        calls.push({
+          id: call.id,
+          method: call.method,
+          url: call.url,
+          callType: call.callType,
+          filePath: call.filePath,
+          line: call.line,
+          containingFunction: call.containingFunction,
+          requiresAuth: call.requiresAuth
+        });
+      }
+    }
+    return JSON.stringify(calls);
+  }
+  getHtmlTemplate(content) {
+    const graphqlData = this.getGraphQLData();
+    const apiCallsData = this.getApiCallsData();
+    return `<!DOCTYPE html>
 <html lang="ja">
 <head>
   <meta charset="UTF-8">
@@ -272,10 +681,10 @@ export class DocServer {
 <body>
   <header class="header">
     <div style="display:flex;align-items:center;gap:24px">
-      <h1 style="cursor:pointer" onclick="location.href='/'">📊 ${this.config.repositories[0]?.displayName || this.config.repositories[0]?.name || 'Repository'}</h1>
+      <h1 style="cursor:pointer" onclick="location.href='/'">\u{1F4CA} ${this.config.repositories[0]?.displayName || this.config.repositories[0]?.name || "Repository"}</h1>
       <nav style="display:flex;gap:4px">
         <a href="/page-map" class="nav-link">Page Map</a>
-        ${this.railsAnalysis ? '<a href="/rails-map" class="nav-link">Rails Map</a>' : ''}
+        ${this.railsAnalysis ? '<a href="/rails-map" class="nav-link">Rails Map</a>' : ""}
         <a href="/docs" class="nav-link active">Docs</a>
         <a href="/api/report" class="nav-link" target="_blank">API</a>
       </nav>
@@ -287,14 +696,14 @@ export class DocServer {
         <div class="nav-group">
           <span class="nav-group-title">Documentation</span>
           <div class="nav-subitems">
-            ${this.config.repositories
-            .map((repo) => `
+            ${this.config.repositories.map(
+      (repo) => `
               <a href="/docs/repos/${repo.name}/pages">Pages</a>
               <a href="/docs/repos/${repo.name}/components">Components</a>
               <a href="/docs/repos/${repo.name}/graphql">GraphQL</a>
               <a href="/docs/repos/${repo.name}/dataflow">Data Flow</a>
-            `)
-            .join('')}
+            `
+    ).join("")}
           </div>
         </div>
         <div class="nav-group">
@@ -320,10 +729,10 @@ export class DocServer {
     <div class="detail-modal-content">
       <div class="detail-modal-header">
         <div style="display:flex;align-items:center;gap:8px">
-          <button id="modalBackBtn" onclick="modalBack()" style="display:none;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;padding:4px 8px;cursor:pointer;font-size:14px">← Back</button>
+          <button id="modalBackBtn" onclick="modalBack()" style="display:none;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;padding:4px 8px;cursor:pointer;font-size:14px">\u2190 Back</button>
           <h3 id="modalTitle">Details</h3>
         </div>
-        <button class="detail-modal-close" onclick="closeModal()">×</button>
+        <button class="detail-modal-close" onclick="closeModal()">\xD7</button>
       </div>
       <div id="modalBody"></div>
     </div>
@@ -349,10 +758,10 @@ export class DocServer {
         container.className = 'mermaid-container';
         container.innerHTML = \`
           <div class="mermaid-controls">
-            <button onclick="zoomDiagram(\${idx}, 0.8)" title="縮小">➖</button>
-            <button onclick="zoomDiagram(\${idx}, 1.25)" title="拡大">➕</button>
-            <button onclick="zoomDiagram(\${idx}, 'reset')" title="リセット">🔄</button>
-            <button onclick="toggleFullscreen(\${idx})" title="全画面">⛶</button>
+            <button onclick="zoomDiagram(\${idx}, 0.8)" title="\u7E2E\u5C0F">\u2796</button>
+            <button onclick="zoomDiagram(\${idx}, 1.25)" title="\u62E1\u5927">\u2795</button>
+            <button onclick="zoomDiagram(\${idx}, 'reset')" title="\u30EA\u30BB\u30C3\u30C8">\u{1F504}</button>
+            <button onclick="toggleFullscreen(\${idx})" title="\u5168\u753B\u9762">\u26F6</button>
           </div>
           <div class="mermaid-wrapper" id="wrapper-\${idx}">
             <div class="mermaid-inner" id="inner-\${idx}"></div>
@@ -480,17 +889,17 @@ export class DocServer {
       modalHistory = [];
 
       // Clean name: remove icons and extract operation name from patterns like "GraphQL: OPERATION_NAME"
-      let cleanName = text.replace(/[\u{1F512}\u{1F4E1}\u{270F}\u{FE0F}\u{1F504}]/gu, '').trim();
+      let cleanName = text.replace(/[\u{1F512}\u{1F4E1}\u270F\uFE0F\u{1F504}]/gu, '').trim();
       // Handle "GraphQL: OPERATION_NAME" pattern
       if (cleanName.includes('GraphQL:')) {
-        cleanName = cleanName.replace(/^.*GraphQL:\s*/, '').trim();
+        cleanName = cleanName.replace(/^.*GraphQL:s*/, '').trim();
       }
       // Handle "API: OPERATION_NAME" pattern
       if (cleanName.includes('API:')) {
-        cleanName = cleanName.replace(/^.*API:\s*/, '').trim();
+        cleanName = cleanName.replace(/^.*API:s*/, '').trim();
       }
       // Remove any remaining prefixes like "Query:", "Mutation:"
-      cleanName = cleanName.replace(/^(Query|Mutation|Fragment):\s*/i, '').trim();
+      cleanName = cleanName.replace(/^(Query|Mutation|Fragment):s*/i, '').trim();
 
       const op = window.findGraphQLOp?.(cleanName);
 
@@ -1117,7 +1526,7 @@ export class DocServer {
     async function regenerate() {
       try {
         const btn = document.querySelector('.regenerate-btn');
-        btn.textContent = '⏳ 生成中...';
+        btn.textContent = '\u23F3 \u751F\u6210\u4E2D...';
         btn.disabled = true;
 
         const res = await fetch('/api/regenerate', { method: 'POST' });
@@ -1126,107 +1535,110 @@ export class DocServer {
         if (data.success) {
           window.location.reload();
         } else {
-          alert('生成に失敗しました: ' + data.error);
+          alert('\u751F\u6210\u306B\u5931\u6557\u3057\u307E\u3057\u305F: ' + data.error);
         }
       } catch (e) {
-        alert('エラー: ' + e.message);
+        alert('\u30A8\u30E9\u30FC: ' + e.message);
       } finally {
         const btn = document.querySelector('.regenerate-btn');
-        btn.textContent = '🔄 再生成';
+        btn.textContent = '\u{1F504} \u518D\u751F\u6210';
         btn.disabled = false;
       }
     }
   </script>
 </body>
 </html>`;
-    }
-    async start(openBrowser = true) {
-        // Detect environments first
-        const rootPath = this.config.repositories[0]?.path || process.cwd();
-        console.log('🔍 Detecting project environments...');
-        this.envResult = await detectEnvironments(rootPath);
-        if (this.envResult.environments.length > 0) {
-            console.log(`   Found: ${this.envResult.environments.map((e) => e.type).join(', ')}`);
-            for (const env of this.envResult.environments) {
-                if (env.features.length > 0) {
-                    console.log(`   ${env.type} features: ${env.features.join(', ')}`);
-                }
-            }
-        }
-        // Generate initial documentation for frontend
-        console.log('\n📚 Generating documentation...');
-        this.currentReport = await this.engine.generate();
-        // If Rails is detected, also analyze Rails
-        if (this.envResult.hasRails) {
-            console.log('\n🛤️  Analyzing Rails application...');
-            try {
-                this.railsAnalysis = await analyzeRailsApp(rootPath);
-                console.log(`   ✅ Rails analysis complete`);
-            }
-            catch (error) {
-                console.error(`   ⚠️ Rails analysis failed:`, error.message);
-            }
-        }
-        // Start server
-        this.server.listen(this.port, () => {
-            console.log(`\n🌐 Documentation server running at http://localhost:${this.port}`);
-            if (this.envResult?.hasRails && this.envResult?.hasNextjs) {
-                console.log('   📊 Multiple environments detected - use tabs to switch views');
-            }
-            console.log('   Press Ctrl+C to stop\n');
-        });
-        // Open browser
-        if (openBrowser) {
-            const open = (await import('open')).default;
-            await open(`http://localhost:${this.port}`);
-        }
-        // Watch for changes
-        if (this.config.watch.enabled) {
-            this.watchForChanges();
+  }
+  async start(openBrowser = true) {
+    const rootPath = this.config.repositories[0]?.path || process.cwd();
+    console.log("\u{1F50D} Detecting project environments...");
+    this.envResult = await detectEnvironments(rootPath);
+    if (this.envResult.environments.length > 0) {
+      console.log(`   Found: ${this.envResult.environments.map((e) => e.type).join(", ")}`);
+      for (const env of this.envResult.environments) {
+        if (env.features.length > 0) {
+          console.log(`   ${env.type} features: ${env.features.join(", ")}`);
         }
+      }
     }
-    async regenerate() {
-        console.log('\n🔄 Regenerating documentation...');
-        this.currentReport = await this.engine.generate();
-        // Re-analyze Rails if detected
-        if (this.envResult?.hasRails) {
-            const rootPath = this.config.repositories[0]?.path || process.cwd();
-            try {
-                this.railsAnalysis = await analyzeRailsApp(rootPath);
-            }
-            catch (error) {
-                console.error(`⚠️ Rails re-analysis failed:`, error.message);
-            }
-        }
-        this.io.emit('reload');
-        console.log('✅ Documentation regenerated');
+    console.log("\n\u{1F4DA} Generating documentation...");
+    this.currentReport = await this.engine.generate();
+    if (this.envResult.hasRails) {
+      console.log("\n\u{1F6E4}\uFE0F  Analyzing Rails application...");
+      try {
+        this.railsAnalysis = await analyzeRailsApp(rootPath);
+        console.log(`   \u2705 Rails analysis complete`);
+      } catch (error) {
+        console.error(`   \u26A0\uFE0F Rails analysis failed:`, error.message);
+      }
     }
-    async watchForChanges() {
-        const watchDirs = this.config.repositories.map((r) => r.path);
-        let timeout = null;
-        for (const dir of watchDirs) {
-            try {
-                const watcher = fs.watch(dir, { recursive: true });
-                (async () => {
-                    for await (const event of watcher) {
-                        if (event.filename &&
-                            (event.filename.endsWith('.ts') || event.filename.endsWith('.tsx'))) {
-                            if (timeout)
-                                clearTimeout(timeout);
-                            timeout = setTimeout(async () => {
-                                await this.regenerate();
-                            }, this.config.watch.debounce);
-                        }
-                    }
-                })();
-            }
-            catch (error) {
-                console.warn(`Warning: Could not watch directory ${dir}:`, error.message);
-            }
-        }
+    try {
+      const availablePort = await findAvailablePort(this.port);
+      if (availablePort !== this.port) {
+        console.log(`
+\u26A0\uFE0F  Port ${this.port} is in use, using port ${availablePort} instead`);
+      }
+      this.port = availablePort;
+    } catch (error) {
+      console.error(`
+\u274C Failed to find available port: ${error.message}`);
+      process.exit(1);
+    }
+    this.server.listen(this.port, () => {
+      console.log(`
+\u{1F310} Documentation server running at http://localhost:${this.port}`);
+      if (this.envResult?.hasRails && this.envResult?.hasNextjs) {
+        console.log("   \u{1F4CA} Multiple environments detected - use tabs to switch views");
+      }
+      console.log("   Press Ctrl+C to stop\n");
+    });
+    if (openBrowser) {
+      const open = (await import('open')).default;
+      await open(`http://localhost:${this.port}`);
     }
-    stop() {
-        this.server.close();
-        console.log('\n👋 Server stopped');
+    if (this.config.watch.enabled) {
+      this.watchForChanges();
     }
-}
+  }
+  async regenerate() {
+    console.log("\n\u{1F504} Regenerating documentation...");
+    this.currentReport = await this.engine.generate();
+    if (this.envResult?.hasRails) {
+      const rootPath = this.config.repositories[0]?.path || process.cwd();
+      try {
+        this.railsAnalysis = await analyzeRailsApp(rootPath);
+      } catch (error) {
+        console.error(`\u26A0\uFE0F Rails re-analysis failed:`, error.message);
+      }
+    }
+    this.io.emit("reload");
+    console.log("\u2705 Documentation regenerated");
+  }
+  async watchForChanges() {
+    const watchDirs = this.config.repositories.map((r) => r.path);
+    let timeout = null;
+    for (const dir of watchDirs) {
+      try {
+        const watcher = fs.watch(dir, { recursive: true });
+        (async () => {
+          for await (const event of watcher) {
+            if (event.filename && (event.filename.endsWith(".ts") || event.filename.endsWith(".tsx"))) {
+              if (timeout) clearTimeout(timeout);
+              timeout = setTimeout(async () => {
+                await this.regenerate();
+              }, this.config.watch.debounce);
+            }
+          }
+        })();
+      } catch (error) {
+        console.warn(`Warning: Could not watch directory ${dir}:`, error.message);
+      }
+    }
+  }
+  stop() {
+    this.server.close();
+    console.log("\n\u{1F44B} Server stopped");
+  }
+};
+
+export { DocGeneratorEngine, DocServer };