chatbot-analyze-qweasd 1.0.0

package/apiflow5-gui.mjs

@@ -0,0 +1,1383 @@
+#!/usr/bin/env node
+/**
+ * apiflow5 GUI Server (with SSE progress)
+ * 啟動方式: node apiflow5-gui.mjs
+ * 瀏覽器開啟: http://localhost:3939
+ */
+
+import { createServer } from "node:http";
+import { spawn } from "node:child_process";
+import { readFileSync, writeFileSync, existsSync, readdirSync, statSync, mkdirSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const PORT = 3939;
+const WORKSPACE = process.env.WORKSPACE || "/Users/Timothy/IdeaProjects";
+
+// 自動掃描 workspace 中的 project 資料夾
+function scanProjects(workspace) {
+  const projects = [];
+  const ignoreList = [".git", ".idea", "node_modules", "dist", ".claude", ".vscode", ".gradle", "build"];
+
+  try {
+    const entries = readdirSync(workspace);
+    for (const entry of entries) {
+      if (ignoreList.includes(entry) || entry.startsWith(".")) continue;
+      const fullPath = path.join(workspace, entry);
+      try {
+        if (statSync(fullPath).isDirectory()) {
+          const hasSrc = existsSync(path.join(fullPath, "src"));
+          const hasPom = existsSync(path.join(fullPath, "pom.xml"));
+          const hasGradle = existsSync(path.join(fullPath, "build.gradle"));
+          if (hasSrc || hasPom || hasGradle) {
+            projects.push(entry);
+          }
+        }
+      } catch {}
+    }
+  } catch {}
+
+  return projects.sort();
+}
+
+// 歷史記錄管理
+const HISTORY_FILE = path.join(WORKSPACE, "dist", "apiflow5-history.json");
+
+function loadHistory() {
+  try {
+    if (existsSync(HISTORY_FILE)) {
+      return JSON.parse(readFileSync(HISTORY_FILE, "utf8"));
+    }
+  } catch {}
+  return [];
+}
+
+function saveHistory(history) {
+  try {
+    mkdirSync(path.dirname(HISTORY_FILE), { recursive: true });
+    writeFileSync(HISTORY_FILE, JSON.stringify(history, null, 2), "utf8");
+  } catch (err) {
+    console.error("[History] Save error:", err.message);
+  }
+}
+
+function addToHistory({ project, functionPath, svgPath, ir, stage, nodeId, nodeLabel, nodeFocus }) {
+  const history = loadHistory();
+  const id = Date.now().toString(36) + Math.random().toString(36).slice(2, 6);
+  const entry = {
+    id,
+    createdAt: new Date().toISOString(),
+    project,
+    functionPath,
+    svgPath,
+    ir,
+    stage: stage || 1,
+    nodeId: nodeId || null,
+    nodeLabel: nodeLabel || null,
+    nodeFocus: nodeFocus || null
+  };
+
+  // 檢查是否已存在相同的 project + functionPath
+  const existingIdx = history.findIndex(h =>
+    h.project === project &&
+    h.functionPath === functionPath &&
+    (h.stage || 1) === (stage || 1) &&
+    (h.nodeId || null) === (nodeId || null)
+  );
+  if (existingIdx >= 0) {
+    // 更新現有記錄
+    history[existingIdx] = entry;
+  } else {
+    // 新增到最前面
+    history.unshift(entry);
+  }
+
+  // 只保留最近 50 筆
+  const trimmed = history.slice(0, 50);
+  saveHistory(trimmed);
+  return entry;
+}
+
+// SSE helper
+function sendSSE(res, event, data) {
+  res.write(`event: ${event}\n`);
+  res.write(`data: ${JSON.stringify(data)}\n\n`);
+}
+
+// 檢查 IDEA 是否正在運行
+function checkIdeaRunning() {
+  return new Promise((resolve) => {
+    const p = spawn("pgrep", ["-f", "IntelliJ IDEA"], { stdio: ["ignore", "pipe", "ignore"] });
+    let out = "";
+    p.stdout.on("data", (d) => (out += d.toString()));
+    p.on("close", (code) => {
+      resolve(code === 0 && out.trim().length > 0);
+    });
+  });
+}
+
+// 在 IDEA 中開啟檔案
+async function openInIdea(filePath, line) {
+  const wasRunning = await checkIdeaRunning();
+
+  return new Promise((resolve, reject) => {
+    // 使用 IDEA URL scheme（最可靠的方法）
+    // idea://open?file=/path/to/file&line=42
+    let ideaUrl = "idea://open?file=" + encodeURIComponent(filePath);
+    if (line) {
+      ideaUrl += "&line=" + line;
+    }
+
+    console.log("[OpenIDEA] URL: " + ideaUrl);
+
+    const p = spawn("open", [ideaUrl], { stdio: "ignore" });
+
+    p.on("error", (err) => {
+      reject(err);
+    });
+
+    p.on("close", (code) => {
+      if (code === 0) {
+        resolve({ wasRunning, method: "url-scheme" });
+      } else {
+        reject(new Error("open command failed with code " + code));
+      }
+    });
+  });
+}
+
+// 執行 apiflow 並透過 SSE 回報進度
+function runApiflowWithProgress(res, { project, functionPath, workspace, stage, nodeId, nodeLabel, nodeFocus }) {
+  const apiflowPath = path.join(__dirname, "apiflow5.mjs");
+  const outPath = path.join(workspace, "dist", `flow-stage${stage || 1}-${Date.now()}.svg`);
+
+  const args = [
+    apiflowPath,
+    "--folder", workspace,
+    "--project", project,
+    "--path", functionPath,
+    "--out", outPath,
+    "--keep",
+    "--stage", String(stage || 1)
+  ];
+  if (stage === 2 && nodeId) {
+    args.push("--node", nodeId);
+    if (nodeLabel) args.push("--node-label", nodeLabel);
+    if (nodeFocus) args.push("--node-focus", nodeFocus);
+  }
+
+  sendSSE(res, "progress", { stage: 0, percent: 0, message: "啟動中..." });
+
+  const p = spawn("node", args, { cwd: workspace });
+  let stdout = "";
+  let lastPercent = 0;
+
+  // 捕獲 stderr，解析 [PROGRESS] 訊息
+  p.stderr.on("data", (chunk) => {
+    const lines = chunk.toString().split("\n");
+    for (const line of lines) {
+      if (line.startsWith("[PROGRESS]")) {
+        try {
+          const json = line.replace("[PROGRESS]", "").trim();
+          const progress = JSON.parse(json);
+          lastPercent = progress.percent;
+          sendSSE(res, "progress", progress);
+        } catch {}
+      } else if (line.trim()) {
+        // 其他 stderr 輸出當作 log
+        sendSSE(res, "log", { message: line.trim() });
+      }
+    }
+  });
+
+  p.stdout.on("data", (d) => {
+    stdout += d.toString();
+  });
+
+  p.on("close", (code) => {
+    if (code !== 0) {
+      sendSSE(res, "error", { message: `執行失敗 (exit code: ${code})` });
+    } else {
+      // 讀取 IR 資料以提供 function 列表
+      let ir = null;
+      const irPath = path.join(workspace, "dist", "ir.json");
+      try {
+        if (existsSync(irPath)) {
+          ir = JSON.parse(readFileSync(irPath, "utf8"));
+        }
+      } catch {}
+
+      // 保存到歷史記錄
+      const historyEntry = addToHistory({
+        project,
+        functionPath,
+        svgPath: outPath,
+        ir,
+        stage,
+        nodeId,
+        nodeLabel,
+        nodeFocus
+      });
+      console.log("[History] Saved: " + project + " / " + functionPath);
+
+      sendSSE(res, "done", { svgPath: outPath, ir, historyId: historyEntry.id });
+    }
+    res.end();
+  });
+
+  p.on("error", (err) => {
+    sendSSE(res, "error", { message: err.message });
+    res.end();
+  });
+
+  // Timeout: 15 分鐘
+  const timeout = setTimeout(() => {
+    p.kill();
+    sendSSE(res, "error", { message: "Timeout: 執行超過 15 分鐘" });
+    res.end();
+  }, 15 * 60 * 1000);
+
+  p.on("close", () => clearTimeout(timeout));
+}
+
+const HTML_PAGE = `<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>API Flow (Staged) Generator</title>
+  <style>
+    * { box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 20px;
+      background: #f5f5f5;
+    }
+    h1 { color: #333; margin-bottom: 30px; }
+    .form-group { margin-bottom: 20px; }
+    label {
+      display: block;
+      margin-bottom: 8px;
+      font-weight: 600;
+      color: #555;
+    }
+    select, input[type="text"] {
+      width: 100%;
+      padding: 12px;
+      font-size: 16px;
+      border: 1px solid #ddd;
+      border-radius: 6px;
+      background: white;
+    }
+    select:focus, input:focus {
+      outline: none;
+      border-color: #007aff;
+      box-shadow: 0 0 0 3px rgba(0,122,255,0.1);
+    }
+    .hint {
+      font-size: 13px;
+      color: #888;
+      margin-top: 6px;
+    }
+    button {
+      background: #007aff;
+      color: white;
+      border: none;
+      padding: 14px 32px;
+      font-size: 16px;
+      font-weight: 600;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+    button:hover { background: #0056b3; }
+    button:disabled {
+      background: #ccc;
+      cursor: not-allowed;
+    }
+    .result {
+      margin-top: 30px;
+      padding: 20px;
+      background: white;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+    .result h3 { margin-top: 0; }
+
+    /* Progress Section */
+    .progress-section {
+      margin-bottom: 20px;
+    }
+    .progress-bar-container {
+      background: #e9ecef;
+      border-radius: 10px;
+      height: 24px;
+      overflow: hidden;
+      margin-bottom: 10px;
+    }
+    .progress-bar {
+      height: 100%;
+      background: linear-gradient(90deg, #007aff, #00c6ff);
+      border-radius: 10px;
+      transition: width 0.3s ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-size: 12px;
+      font-weight: 600;
+      min-width: 40px;
+    }
+    .progress-message {
+      font-size: 14px;
+      color: #666;
+      margin-bottom: 10px;
+    }
+    .progress-stages {
+      display: flex;
+      justify-content: space-between;
+      font-size: 11px;
+      color: #999;
+      margin-top: 5px;
+    }
+    .progress-stages span {
+      flex: 1;
+      text-align: center;
+      padding: 4px;
+      border-radius: 4px;
+      transition: all 0.3s;
+    }
+    .progress-stages span.active {
+      background: #e7f3ff;
+      color: #007aff;
+      font-weight: 600;
+    }
+    .progress-stages span.done {
+      background: #d4edda;
+      color: #155724;
+    }
+
+    /* Log Section */
+    .log-section {
+      background: #1e1e1e;
+      border-radius: 6px;
+      padding: 12px;
+      max-height: 150px;
+      overflow-y: auto;
+      font-family: "SF Mono", Monaco, monospace;
+      font-size: 12px;
+      margin-bottom: 15px;
+    }
+    .log-section:empty { display: none; }
+    .log-line {
+      color: #9cdcfe;
+      margin: 2px 0;
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
+    .log-line.error { color: #f48771; }
+
+    .status {
+      padding: 12px 16px;
+      border-radius: 6px;
+      margin-bottom: 15px;
+    }
+    .status.success { background: #d4edda; color: #155724; }
+    .status.error { background: #f8d7da; color: #721c24; }
+    .svg-container {
+      margin-top: 20px;
+      overflow-x: auto;
+      background: white;
+      padding: 20px;
+      border: 1px solid #eee;
+      border-radius: 6px;
+    }
+    .svg-container img {
+      max-width: 100%;
+      height: auto;
+    }
+    .zoom-controls {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-top: 10px;
+    }
+    .zoom-controls button {
+      padding: 6px 10px;
+      font-size: 12px;
+      border-radius: 4px;
+    }
+    .zoom-controls input[type="range"] {
+      width: 200px;
+    }
+    .zoom-controls .zoom-label {
+      font-size: 12px;
+      color: #555;
+      min-width: 60px;
+      text-align: right;
+    }
+    .command-preview {
+      background: #2d2d2d;
+      color: #f8f8f2;
+      padding: 15px;
+      border-radius: 6px;
+      font-family: "SF Mono", Monaco, monospace;
+      font-size: 13px;
+      overflow-x: auto;
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
+
+    /* Function List */
+    .function-list {
+      margin-top: 20px;
+      border: 1px solid #e0e0e0;
+      border-radius: 8px;
+      overflow: hidden;
+    }
+    .function-list h4 {
+      margin: 0;
+      padding: 12px 16px;
+      background: #f8f9fa;
+      border-bottom: 1px solid #e0e0e0;
+      font-size: 14px;
+    }
+    .function-list-empty {
+      padding: 20px;
+      text-align: center;
+      color: #888;
+    }
+    .function-item {
+      display: flex;
+      align-items: center;
+      padding: 10px 16px;
+      border-bottom: 1px solid #f0f0f0;
+      transition: background 0.15s;
+    }
+    .function-item:last-child { border-bottom: none; }
+    .function-item:hover { background: #f8f9fa; }
+    .function-item .info { flex: 1; }
+    .function-item .name {
+      font-weight: 600;
+      color: #333;
+      font-size: 14px;
+    }
+    .function-item .location {
+      font-size: 12px;
+      color: #888;
+      font-family: "SF Mono", Monaco, monospace;
+      margin-top: 2px;
+    }
+    .function-item .type-badge {
+      font-size: 11px;
+      padding: 2px 8px;
+      border-radius: 10px;
+      margin-right: 10px;
+      font-weight: 500;
+    }
+    .type-badge.http { background: #e3f2fd; color: #1565c0; }
+    .type-badge.db { background: #fff3e0; color: #e65100; }
+    .type-badge.external { background: #fce4ec; color: #c2185b; }
+    .type-badge.method { background: #e8f5e9; color: #2e7d32; }
+    .function-item .open-btn {
+      background: #007aff;
+      color: white;
+      border: none;
+      padding: 6px 12px;
+      font-size: 12px;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+    .function-item .open-btn:hover { background: #0056b3; }
+    .function-item .open-btn:disabled {
+      background: #ccc;
+      cursor: not-allowed;
+    }
+    .function-item .open-btn.success {
+      background: #28a745;
+    }
+    .function-item .explore-btn {
+      background: #2f855a;
+      margin-right: 8px;
+    }
+    .function-item .explore-btn:hover { background: #276749; }
+
+    /* Toast */
+    .toast {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      background: #333;
+      color: white;
+      padding: 12px 20px;
+      border-radius: 8px;
+      font-size: 14px;
+      opacity: 0;
+      transform: translateY(20px);
+      transition: all 0.3s ease;
+      z-index: 1000;
+    }
+    .toast.show {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  </style>
+</head>
+<body>
+  <h1>API Flow (Staged) Generator</h1>
+
+  <div class="form-group">
+    <label for="project">Project</label>
+    <select id="project">
+      <option value="">-- 選擇專案 --</option>
+    </select>
+  </div>
+
+  <div class="form-group">
+    <label for="functionPath">Function Path</label>
+    <input type="text" id="functionPath"
+           placeholder="例: ai.omnichat.service.AiService#enterAiSession">
+    <div class="hint">格式: package.ClassName#methodName</div>
+  </div>
+
+  <div class="form-group">
+    <label>Stage</label>
+    <div style="display:flex;gap:12px;align-items:center;">
+      <label style="display:flex;align-items:center;gap:6px;font-weight:500;">
+        <input type="radio" name="stageSelect" value="1" checked onchange="setStage(1, null)">
+        Stage 1
+      </label>
+      <label style="display:flex;align-items:center;gap:6px;font-weight:500;">
+        <input type="radio" name="stageSelect" value="2" onchange="setStage(2, currentNode)">
+        Stage 2
+      </label>
+      <div class="hint">Stage 2 需先選擇細化節點</div>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="history">或從歷史記錄載入</label>
+    <select id="history" onchange="loadFromHistory()">
+      <option value="">-- 選擇歷史記錄 --</option>
+    </select>
+    <div class="hint">選擇後直接顯示結果，不需重新分析</div>
+  </div>
+
+  <div class="form-group">
+    <label>指令預覽</label>
+    <div class="command-preview" id="commandPreview">請選擇專案並輸入 function path</div>
+  </div>
+
+  <button id="generateBtn" onclick="generate()">產生 Stage 1</button>
+  <button id="regenerateBtn" onclick="generate(true)">重新產生</button>
+
+  <div class="result" id="result" style="display:none;">
+    <h3>執行進度</h3>
+
+    <div class="progress-section">
+      <div class="progress-bar-container">
+        <div class="progress-bar" id="progressBar" style="width: 0%">0%</div>
+      </div>
+      <div class="progress-message" id="progressMessage">準備中...</div>
+      <div class="progress-stages" id="progressStages">
+        <span data-stage="1">1. 提取程式碼</span>
+        <span data-stage="2">2. Codex 分析</span>
+        <span data-stage="3">3. 生成圖表</span>
+        <span data-stage="4">4. 轉換 SVG</span>
+        <span data-stage="5">5. 完成</span>
+      </div>
+    </div>
+
+    <div class="log-section" id="logSection"></div>
+
+    <div class="status" id="status" style="display:none;"></div>
+    <div class="svg-container" id="svgContainer"></div>
+    <div class="zoom-controls" id="zoomControls" style="display:none;">
+      <button type="button" onclick="zoomOut()">-</button>
+      <input type="range" id="zoomRange" min="0.5" max="10" step="0.1" value="1" oninput="zoomTo(this.value)">
+      <button type="button" onclick="zoomIn()">+</button>
+      <button type="button" onclick="zoomReset()">Reset</button>
+      <div class="zoom-label" id="zoomLabel">100%</div>
+    </div>
+
+    <div class="function-list" id="functionList" style="display:none;">
+      <h4>呼叫清單 (點擊開啟 IDEA)</h4>
+      <div id="functionListContent"></div>
+    </div>
+
+    <div class="function-list" id="refineList" style="display:none;">
+      <h4>細化節點 (Stage 2)</h4>
+      <div id="refineListContent"></div>
+    </div>
+  </div>
+
+  <div class="toast" id="toast"></div>
+
+  <script>
+    const WORKSPACE = '${WORKSPACE}';
+    var currentStage = 1;
+    var currentNode = null;
+
+    // 載入 projects
+    var projectsPromise = fetch('/api/projects')
+      .then(r => r.json())
+      .then(projects => {
+        const select = document.getElementById('project');
+        projects.forEach(p => {
+          const opt = document.createElement('option');
+          opt.value = p;
+          opt.textContent = p;
+          select.appendChild(opt);
+        });
+        return projects;
+      });
+
+    // 載入歷史記錄
+    function refreshHistory() {
+      return fetch('/api/history')
+        .then(r => r.json())
+        .then(history => {
+          const select = document.getElementById('history');
+          // 清空現有選項（保留第一個）
+          while (select.options.length > 1) {
+            select.remove(1);
+          }
+          history.forEach(h => {
+            const opt = document.createElement('option');
+            opt.value = h.id;
+            const date = new Date(h.createdAt).toLocaleString('zh-TW');
+            opt.textContent = h.label + ' (' + date + ')';
+            select.appendChild(opt);
+          });
+          return history;
+        });
+    }
+    Promise.all([projectsPromise, refreshHistory()]).then(function(results) {
+      var history = results[1] || [];
+      applyParamsFromUrl(history);
+    });
+
+    // 從歷史記錄載入
+    async function loadFromHistory() {
+      const historyId = document.getElementById('history').value;
+      if (!historyId) return;
+      await loadFromHistoryId(historyId);
+      // 重設歷史選單
+      document.getElementById('history').value = '';
+    }
+
+    async function loadFromHistoryId(historyId) {
+      if (!historyId) return;
+
+      const result = document.getElementById('result');
+      const status = document.getElementById('status');
+      const svgContainer = document.getElementById('svgContainer');
+      const progressSection = document.querySelector('.progress-section');
+
+      result.style.display = 'block';
+      progressSection.style.display = 'none';
+      document.getElementById('logSection').innerHTML = '';
+      status.style.display = 'block';
+      status.className = 'status loading';
+      status.textContent = '載入中...';
+      status.style.background = '#fff3cd';
+      status.style.color = '#856404';
+
+      try {
+        const res = await fetch('/api/history/' + historyId);
+        const data = await res.json();
+
+        if (!res.ok) {
+          throw new Error(data.error || '載入失敗');
+        }
+
+        // 更新表單與階段
+        setStage(
+          data.stage || 1,
+          data.nodeId ? { id: data.nodeId, label: data.nodeLabel || '', focus: data.nodeFocus || '' } : null
+        );
+        document.getElementById('project').value = data.project;
+        document.getElementById('functionPath').value = data.functionPath;
+        updatePreview();
+
+        // 顯示結果
+        status.className = 'status success';
+        status.textContent = '✅ 從歷史記錄載入 - 點擊圖上的方法名可跳轉到 IDEA';
+
+        // 載入可互動的 SVG
+        loadSvgInteractive(data.svgPath, data.project);
+
+        // 渲染 function 列表
+        if (data.ir && data.ir.nodes) {
+          renderFunctionList(data.ir.nodes, data.project);
+          renderRefineList(data.ir.nodes, data.project, data.functionPath);
+        }
+
+      } catch (err) {
+        status.className = 'status error';
+        status.textContent = '❌ 錯誤: ' + err.message;
+      }
+
+      return true;
+    }
+
+    function updatePreview() {
+      const project = document.getElementById('project').value;
+      const fn = document.getElementById('functionPath').value;
+      const preview = document.getElementById('commandPreview');
+
+      if (!project || !fn) {
+        preview.textContent = '請選擇專案並輸入 function path';
+        return;
+      }
+
+      var stageArg = ' --stage ' + (currentStage === 2 ? '2' : '1');
+      if (currentStage === 2 && currentNode) {
+        stageArg += ' --node ' + (currentNode.id || '');
+        if (currentNode.label) stageArg += ' --node-label "' + currentNode.label + '"';
+        if (currentNode.focus) stageArg += ' --node-focus "' + currentNode.focus + '"';
+      }
+      preview.textContent = 'apiflow5 --folder ' + WORKSPACE + ' \\\n  --project ' + project + ' \\\n  --path "' + fn + '" \\\n  --out dist/flow.svg --keep' + stageArg;
+    }
+
+    function setStage(stage, node) {
+      currentStage = stage || 1;
+      currentNode = node || null;
+      var btn = document.getElementById('generateBtn');
+      if (btn) {
+        btn.textContent = currentStage === 2 ? '產生 Stage 2' : '產生 Stage 1';
+      }
+      var projectSelect = document.getElementById('project');
+      var functionInput = document.getElementById('functionPath');
+      if (projectSelect) projectSelect.disabled = currentStage === 2;
+      if (functionInput) functionInput.readOnly = currentStage === 2;
+      var radios = document.querySelectorAll('input[name="stageSelect"]');
+      radios.forEach(function(r) {
+        r.checked = String(currentStage) === r.value;
+      });
+      updatePreview();
+    }
+
+    document.getElementById('project').addEventListener('change', updatePreview);
+    document.getElementById('functionPath').addEventListener('input', updatePreview);
+
+    function updateProgress(percent, message, stage) {
+      const bar = document.getElementById('progressBar');
+      const msg = document.getElementById('progressMessage');
+      const stages = document.querySelectorAll('#progressStages span');
+
+      bar.style.width = percent + '%';
+      bar.textContent = percent + '%';
+      msg.textContent = message;
+
+      stages.forEach(s => {
+        const stageNum = parseInt(s.dataset.stage);
+        s.classList.remove('active', 'done');
+        if (stageNum < stage) s.classList.add('done');
+        else if (stageNum === stage) s.classList.add('active');
+      });
+    }
+
+    function addLog(message, isError = false) {
+      const logSection = document.getElementById('logSection');
+      const line = document.createElement('div');
+      line.className = 'log-line' + (isError ? ' error' : '');
+      line.textContent = message;
+      logSection.appendChild(line);
+      logSection.scrollTop = logSection.scrollHeight;
+    }
+
+    function resetUI() {
+      document.getElementById('logSection').innerHTML = '';
+      document.getElementById('status').style.display = 'none';
+      document.getElementById('svgContainer').innerHTML = '';
+      document.getElementById('zoomControls').style.display = 'none';
+      document.getElementById('functionList').style.display = 'none';
+      document.getElementById('functionListContent').innerHTML = '';
+      document.getElementById('refineList').style.display = 'none';
+      document.getElementById('refineListContent').innerHTML = '';
+      document.querySelector('.progress-section').style.display = 'block';
+      updateProgress(0, '準備中...', 0);
+    }
+
+    function showToast(message, duration) {
+      duration = duration || 3000;
+      var toast = document.getElementById('toast');
+      toast.textContent = message;
+      toast.classList.add('show');
+      setTimeout(function() {
+        toast.classList.remove('show');
+      }, duration);
+    }
+
+    function renderFunctionList(nodes, currentProject) {
+      var container = document.getElementById('functionListContent');
+      var listDiv = document.getElementById('functionList');
+
+      var items = nodes.filter(function(n) {
+        return n && n.type === 'call' && n.call && n.call.file;
+      });
+
+      if (items.length === 0) {
+        container.innerHTML = '<div class="function-list-empty">沒有可開啟的函數位置資訊</div>';
+        listDiv.style.display = 'block';
+        return;
+      }
+
+      // 去重複
+      var seen = {};
+      var uniqueItems = [];
+      items.forEach(function(n) {
+        var call = n.call || {};
+        var key = call.file + ':' + call.line;
+        if (!call.file || seen[key]) return;
+        seen[key] = true;
+        uniqueItems.push({
+          name: (call.name || n.label || '').split('#').pop().replace(/\\(.*\\)$/, ''),
+          fullName: call.name || n.label || '',
+          file: call.file,
+          line: call.line,
+          type: call.kind || 'method',
+          project: call.project
+        });
+      });
+
+      var html = '';
+      uniqueItems.forEach(function(item, idx) {
+        var location = item.file + (item.line ? ':' + item.line : '');
+        var canAnalyze = item.type === 'method' && item.fullName && item.fullName.includes('#');
+        html += '<div class="function-item">';
+        html += '  <span class="type-badge ' + item.type + '">' + item.type + '</span>';
+        html += '  <div class="info">';
+        html += '    <div class="name">' + item.name + '</div>';
+        html += '    <div class="location">' + location + '</div>';
+        html += '  </div>';
+        if (canAnalyze) {
+          html += '  <button class="open-btn explore-btn" data-idx="' + idx + '" onclick="analyzeFunctionDrillDown(' + idx + ')" style="margin-right:8px;">分析此函數</button>';
+        }
+        html += '  <button class="open-btn" data-idx="' + idx + '" onclick="openInIdea(' + idx + ')">開啟</button>';
+        html += '</div>';
+      });
+
+      container.innerHTML = html;
+      listDiv.style.display = 'block';
+
+      // 儲存到全域以便開啟時使用
+      window._functionItems = uniqueItems;
+      window._currentProject = currentProject;
+    }
+
+    function renderRefineList(nodes, currentProject, functionPath) {
+      var container = document.getElementById('refineListContent');
+      var listDiv = document.getElementById('refineList');
+      var items = (nodes || []).filter(function(n) {
+        return n && n.focus;
+      });
+
+      if (items.length === 0) {
+        container.innerHTML = '<div class="function-list-empty">沒有可細化的節點</div>';
+        listDiv.style.display = 'block';
+        return;
+      }
+
+      var html = '';
+      items.forEach(function(n, idx) {
+        html += '<div class="function-item">';
+        html += '  <span class="type-badge method">focus</span>';
+        html += '  <div class="info">';
+        html += '    <div class="name">' + n.label + '</div>';
+        html += '    <div class="location">' + (n.focus || '') + '</div>';
+        html += '  </div>';
+        html += '  <button class="open-btn explore-btn" data-idx="' + idx + '" onclick="openRefine(' + idx + ')">細化</button>';
+        html += '</div>';
+      });
+
+      container.innerHTML = html;
+      listDiv.style.display = 'block';
+      window._refineItems = items;
+      window._currentProject = currentProject;
+      window._currentFunctionPath = functionPath;
+    }
+
+    async function openInIdea(idx) {
+      var item = window._functionItems[idx];
+      if (!item) return;
+
+      var btn = document.querySelector('.open-btn[data-idx="' + idx + '"]');
+      btn.disabled = true;
+      btn.textContent = '開啟中...';
+
+      try {
+        var res = await fetch('/api/open-idea', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            file: item.file,
+            line: item.line,
+            project: item.project !== 'external' && item.project !== 'db' ? item.project : window._currentProject
+          })
+        });
+
+        var data = await res.json();
+
+        if (data.success) {
+          btn.textContent = '✓ 已開啟';
+          btn.classList.add('success');
+          showToast(data.message + ' - ' + item.file + (item.line ? ':' + item.line : ''));
+        } else {
+          btn.textContent = '開啟';
+          btn.disabled = false;
+          showToast('錯誤: ' + data.error);
+        }
+      } catch (err) {
+        btn.textContent = '開啟';
+        btn.disabled = false;
+        showToast('錯誤: ' + err.message);
+      }
+
+      setTimeout(function() {
+        btn.disabled = false;
+        btn.textContent = '開啟';
+        btn.classList.remove('success');
+      }, 2000);
+    }
+
+    function openRefine(idx) {
+      var item = window._refineItems[idx];
+      if (!item) return;
+
+      var project = window._currentProject || '';
+      var functionPath = window._currentFunctionPath || '';
+      if (!project || !functionPath) {
+        showToast('缺少 project 或 function path');
+        return;
+      }
+
+      var url = new URL(window.location.href);
+      url.searchParams.set('project', project);
+      url.searchParams.set('function', functionPath);
+      url.searchParams.set('stage', '2');
+      url.searchParams.set('node', item.id || '');
+      url.searchParams.set('label', item.label || '');
+      url.searchParams.set('focus', item.focus || '');
+      window.open(url.toString(), '_blank');
+    }
+
+    function analyzeFunctionDrillDown(idx) {
+      var item = window._functionItems[idx];
+      if (!item || !item.fullName) return;
+
+      var project = item.project || window._currentProject || '';
+      if (!project || project === 'external' || project === 'db') {
+        showToast('無法分析外部函數或資料庫查詢');
+        return;
+      }
+
+      // 開啟新分頁進行分析
+      var url = new URL(window.location.href);
+      url.searchParams.set('project', project);
+      url.searchParams.set('function', item.fullName);
+      url.searchParams.delete('stage');
+      url.searchParams.delete('node');
+      url.searchParams.delete('label');
+      url.searchParams.delete('focus');
+      window.open(url.toString(), '_blank');
+    }
+
+    // 載入 SVG 並加入點擊互動
+    async function loadSvgInteractive(svgPath, currentProject) {
+      var svgContainer = document.getElementById('svgContainer');
+      var zoomControls = document.getElementById('zoomControls');
+
+      try {
+        // 取得 SVG 內容
+        var res = await fetch('/svg?path=' + encodeURIComponent(svgPath));
+        var svgText = await res.text();
+
+        // 內嵌 SVG
+        svgContainer.innerHTML = svgText;
+        zoomControls.style.display = 'flex';
+        applyZoom(1);
+
+        // 加入點擊事件監聽
+        var svg = svgContainer.querySelector('svg');
+        if (svg) {
+          svg.style.transformOrigin = '0 0';
+          svg.addEventListener('click', function(e) {
+            var target = e.target;
+            // 檢查是否點擊了可點擊的標籤
+            var el = target.closest('.clickable-node') || target.closest('[data-file]');
+            if (el) {
+              var file = el.getAttribute('data-file');
+              var line = el.getAttribute('data-line');
+              var project = el.getAttribute('data-project') || currentProject;
+
+              if (file) {
+                openInIdeaDirect(file, line, project);
+              }
+            }
+          });
+
+          // 加入 hover 提示
+          svg.querySelectorAll('.clickable-node').forEach(function(el) {
+            var file = el.getAttribute('data-file');
+            var line = el.getAttribute('data-line');
+            if (file) {
+              el.style.cursor = 'pointer';
+              el.setAttribute('title', '點擊開啟: ' + file + (line ? ':' + line : ''));
+            }
+          });
+        }
+      } catch (err) {
+        svgContainer.innerHTML = '<div style="color:red;">載入 SVG 失敗: ' + err.message + '</div>';
+      }
+    }
+
+    function applyParamsFromUrl(history) {
+      var params = new URLSearchParams(window.location.search);
+      var project = params.get('project');
+      var functionPath = params.get('function');
+      var stageParam = params.get('stage');
+      var nodeId = params.get('node');
+      var nodeLabel = params.get('label');
+      var nodeFocus = params.get('focus');
+      if (!project || !functionPath) return;
+
+      if (stageParam === '2' && nodeId) {
+        setStage(2, { id: nodeId, label: nodeLabel || '', focus: nodeFocus || '' });
+      } else {
+        setStage(1, null);
+      }
+
+      document.getElementById('project').value = project;
+      document.getElementById('functionPath').value = functionPath;
+      updatePreview();
+
+      var match = (history || []).find(function(h) {
+        return h.project === project &&
+          h.functionPath === functionPath &&
+          String(h.stage || 1) === String(currentStage || 1) &&
+          String(h.nodeId || '') === String(nodeId || '');
+      });
+      if (match && match.id) {
+        loadFromHistoryId(match.id);
+      }
+    }
+
+    var currentZoom = 1;
+    function applyZoom(value) {
+      currentZoom = Math.max(0.5, Math.min(10, Number(value) || 1));
+      var svg = document.querySelector('#svgContainer svg');
+      if (svg) {
+        svg.style.transform = 'scale(' + currentZoom + ')';
+      }
+      var zoomRange = document.getElementById('zoomRange');
+      var zoomLabel = document.getElementById('zoomLabel');
+      if (zoomRange) zoomRange.value = currentZoom;
+      if (zoomLabel) zoomLabel.textContent = Math.round(currentZoom * 100) + '%';
+    }
+    function zoomIn() { applyZoom(currentZoom + 0.1); }
+    function zoomOut() { applyZoom(currentZoom - 0.1); }
+    function zoomReset() { applyZoom(1); }
+    function zoomTo(v) { applyZoom(v); }
+
+    // 直接開啟 IDEA（給 SVG 點擊用）
+    async function openInIdeaDirect(file, line, project) {
+      showToast('正在開啟 ' + file + (line ? ':' + line : '') + '...');
+
+      try {
+        var res = await fetch('/api/open-idea', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ file: file, line: line, project: project })
+        });
+
+        var data = await res.json();
+        if (data.success) {
+          showToast(data.message + ' - ' + file + (line ? ':' + line : ''));
+        } else {
+          showToast('錯誤: ' + data.error);
+        }
+      } catch (err) {
+        showToast('錯誤: ' + err.message);
+      }
+    }
+
+    async function generate(force) {
+      const project = document.getElementById('project').value;
+      const functionPath = document.getElementById('functionPath').value;
+
+      if (!project) return alert('請選擇專案');
+      if (!functionPath) return alert('請輸入 function path');
+      if (currentStage === 2 && (!currentNode || !currentNode.id)) {
+        return alert('請先選擇要細化的節點');
+      }
+
+      const btn = document.getElementById('generateBtn');
+      const result = document.getElementById('result');
+      const status = document.getElementById('status');
+      const svgContainer = document.getElementById('svgContainer');
+
+      btn.disabled = true;
+      btn.textContent = currentStage === 2 ? '細化中...' : '產生中...';
+      result.style.display = 'block';
+      resetUI();
+
+      // 使用 SSE 接收進度
+      const params = new URLSearchParams({ project, functionPath, stage: String(currentStage) });
+      if (currentStage === 2 && currentNode) {
+        params.set('node', currentNode.id || '');
+        params.set('label', currentNode.label || '');
+        params.set('focus', currentNode.focus || '');
+      }
+      const evtSource = new EventSource('/api/generate?' + params.toString());
+
+      evtSource.addEventListener('progress', (e) => {
+        const data = JSON.parse(e.data);
+        updateProgress(data.percent, data.message, data.stage);
+      });
+
+      evtSource.addEventListener('log', (e) => {
+        const data = JSON.parse(e.data);
+        addLog(data.message);
+      });
+
+      evtSource.addEventListener('done', (e) => {
+        const data = JSON.parse(e.data);
+        evtSource.close();
+
+        status.style.display = 'block';
+        status.className = 'status success';
+        status.textContent = currentStage === 2
+          ? '✅ 細化完成！點擊圖上的方法名可跳轉到 IDEA'
+          : '✅ 產生成功！點擊圖上的方法名可跳轉到 IDEA';
+
+        // 載入可互動的 SVG
+        loadSvgInteractive(data.svgPath, project);
+
+        // 渲染 function 列表
+        if (data.ir && data.ir.nodes) {
+          renderFunctionList(data.ir.nodes, project);
+          renderRefineList(data.ir.nodes, project, functionPath);
+        }
+
+        // 刷新歷史記錄列表
+        refreshHistory();
+
+        btn.disabled = false;
+        btn.textContent = currentStage === 2 ? '產生 Stage 2' : '產生 Stage 1';
+      });
+
+      evtSource.addEventListener('error', (e) => {
+        let errorMsg = '未知錯誤';
+        try {
+          const data = JSON.parse(e.data);
+          errorMsg = data.message;
+        } catch {}
+
+        evtSource.close();
+
+        status.style.display = 'block';
+        status.className = 'status error';
+        status.textContent = '❌ 錯誤: ' + errorMsg;
+        addLog(errorMsg, true);
+
+        btn.disabled = false;
+        btn.textContent = currentStage === 2 ? '產生 Stage 2' : '產生 Stage 1';
+      });
+
+      evtSource.onerror = () => {
+        evtSource.close();
+        btn.disabled = false;
+        btn.textContent = currentStage === 2 ? '產生 Stage 2' : '產生 Stage 1';
+      };
+    }
+  </script>
+</body>
+</html>`;
+
+// HTTP Server
+const server = createServer(async (req, res) => {
+  const url = new URL(req.url, "http://localhost:" + PORT);
+
+  // CORS
+  res.setHeader("Access-Control-Allow-Origin", "*");
+  res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
+  res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+
+  if (req.method === "OPTIONS") {
+    res.writeHead(204);
+    return res.end();
+  }
+
+  // Routes
+  if (url.pathname === "/" || url.pathname === "/index.html") {
+    res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+    return res.end(HTML_PAGE);
+  }
+
+  if (url.pathname === "/api/projects") {
+    const projects = scanProjects(WORKSPACE);
+    res.writeHead(200, { "Content-Type": "application/json" });
+    return res.end(JSON.stringify(projects));
+  }
+
+  // 取得歷史記錄列表
+  if (url.pathname === "/api/history" && req.method === "GET") {
+    const history = loadHistory();
+    // 回傳精簡版（不含完整 IR）
+    const summary = history.map(h => ({
+      id: h.id,
+      createdAt: h.createdAt,
+      project: h.project,
+      functionPath: h.functionPath,
+      stage: h.stage || 1,
+      nodeId: h.nodeId || null,
+      nodeLabel: h.nodeLabel || null,
+      label: (h.stage || 1) === 2
+        ? `${h.project} / ${h.functionPath.split("#").pop()} / Stage2:${h.nodeLabel || h.nodeId || ""}`
+        : `${h.project} / ${h.functionPath.split("#").pop()}`
+    }));
+    res.writeHead(200, { "Content-Type": "application/json" });
+    return res.end(JSON.stringify(summary));
+  }
+
+  // 載入特定歷史記錄
+  if (url.pathname.startsWith("/api/history/") && req.method === "GET") {
+    const id = url.pathname.replace("/api/history/", "");
+    const history = loadHistory();
+    const entry = history.find(h => h.id === id);
+
+    if (!entry) {
+      res.writeHead(404, { "Content-Type": "application/json" });
+      return res.end(JSON.stringify({ error: "找不到歷史記錄" }));
+    }
+
+    res.writeHead(200, { "Content-Type": "application/json" });
+    return res.end(JSON.stringify(entry));
+  }
+
+  // SSE endpoint for generate
+  if (url.pathname === "/api/generate") {
+    const project = url.searchParams.get("project");
+    const functionPath = url.searchParams.get("functionPath");
+    const stage = Number(url.searchParams.get("stage") || "1");
+    const nodeId = url.searchParams.get("node");
+    const nodeLabel = url.searchParams.get("label");
+    const nodeFocus = url.searchParams.get("focus");
+
+    if (!project || !functionPath) {
+      res.writeHead(400, { "Content-Type": "application/json" });
+      return res.end(JSON.stringify({ error: "缺少 project 或 functionPath" }));
+    }
+    if (stage === 2 && !nodeId) {
+      res.writeHead(400, { "Content-Type": "application/json" });
+      return res.end(JSON.stringify({ error: "缺少 node 參數" }));
+    }
+
+    // SSE headers
+    res.writeHead(200, {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-cache",
+      "Connection": "keep-alive"
+    });
+
+    console.log("[Generate] project=" + project + ", function=" + functionPath);
+
+    runApiflowWithProgress(res, {
+      project,
+      functionPath,
+      workspace: WORKSPACE,
+      stage,
+      nodeId,
+      nodeLabel,
+      nodeFocus
+    });
+
+    return;
+  }
+
+  // 在 IDEA 中開啟檔案
+  if (url.pathname === "/api/open-idea" && req.method === "POST") {
+    let body = "";
+    req.on("data", (chunk) => (body += chunk));
+    req.on("end", async () => {
+      try {
+        const { file, line, project } = JSON.parse(body);
+
+        if (!file) {
+          res.writeHead(400, { "Content-Type": "application/json" });
+          return res.end(JSON.stringify({ error: "缺少 file 參數" }));
+        }
+
+        // 組合完整路徑（避免 project 重複）
+        let fullPath = file;
+        if (!path.isAbsolute(file)) {
+          if (project && file.startsWith(project + path.sep)) {
+            fullPath = path.join(WORKSPACE, file);
+          } else if (project) {
+            fullPath = path.join(WORKSPACE, project, file);
+          } else {
+            fullPath = path.join(WORKSPACE, file);
+          }
+        }
+
+        if (!existsSync(fullPath)) {
+          res.writeHead(404, { "Content-Type": "application/json" });
+          return res.end(JSON.stringify({ error: "檔案不存在: " + fullPath }));
+        }
+
+        console.log("[OpenIDEA] " + fullPath + (line ? ":" + line : ""));
+
+        const result = await openInIdea(fullPath, line);
+
+        res.writeHead(200, { "Content-Type": "application/json" });
+        res.end(JSON.stringify({
+          success: true,
+          wasRunning: result.wasRunning,
+          message: result.wasRunning
+            ? "已在 IDEA 中開啟"
+            : "正在啟動 IDEA..."
+        }));
+      } catch (err) {
+        console.error("[OpenIDEA Error]", err.message);
+        res.writeHead(500, { "Content-Type": "application/json" });
+        res.end(JSON.stringify({ error: err.message }));
+      }
+    });
+    return;
+  }
+
+  if (url.pathname === "/svg") {
+    const svgPath = url.searchParams.get("path");
+    if (svgPath && existsSync(svgPath)) {
+      const svg = readFileSync(svgPath);
+      res.writeHead(200, { "Content-Type": "image/svg+xml" });
+      return res.end(svg);
+    }
+    res.writeHead(404);
+    return res.end("SVG not found");
+  }
+
+  // 404
+  res.writeHead(404);
+  res.end("Not Found");
+});
+
+server.listen(PORT, () => {
+  console.log([
+    "",
+    "╔════════════════════════════════════════════╗",
+    "║     API Flow (Staged) Generator GUI        ║",
+    "║     http://localhost:" + PORT + "                  ║",
+    "╚════════════════════════════════════════════╝",
+    "",
+    "Workspace: " + WORKSPACE,
+    "按 Ctrl+C 結束",
+    ""
+  ].join("\n"));
+});