walover-line-harness-gui 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "walover-line-harness-gui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "LINE Harness のセットアップを、ターミナルを開かずにブラウザから行うためのローカルツール",
   "license": "MIT",
   "type": "module",

package/src/server/cli.js

@@ -3,6 +3,7 @@ import { start, shutdown } from "./index.js";
 import { openBrowser } from "./browser.js";
 import { ptyBackend } from "./pty.js";
 import { getVersionStatus } from "./cli-version.js";
+import { checkNodeRuntime } from "./runtime.js";
 
 const { server, url } = await start();
 
@@ -14,6 +15,15 @@ console.log("");
 console.log("  ブラウザが開かない場合は、上の URL をコピーして開いてください。");
 console.log("  終了するには Ctrl+C を押してください。");
 
+const runtime = checkNodeRuntime();
+if (!runtime.ok) {
+  // 画面を開く前に、ターミナルにも出す。ここで気づければ何も入力せずに済む
+  console.log("");
+  console.log(`  ⚠ ${runtime.problem.title}`);
+  console.log(`    ${runtime.problem.body}`);
+  for (const line of runtime.problem.fix) console.log(`    - ${line}`);
+}
+
 if (ptyBackend() === null) {
   // 本家 CLI は実際の端末（PTY）を要求する。無いと起動すらできないので先に伝える
   console.log("");

package/src/server/index.js

@@ -14,6 +14,7 @@ import {
 } from "./state.js";
 import { ptyBackend } from "./pty.js";
 import { getVersionStatus } from "./cli-version.js";
+import { checkNodeRuntime } from "./runtime.js";
 import { checkLeftoverState, leftoverWarning } from "./leftover.js";
 
 const HERE = dirname(fileURLToPath(import.meta.url));
@@ -114,7 +115,14 @@ async function route(req, res, pathname, method) {
 
   if (pathname === "/api/health" && method === "GET") {
     const backend = ptyBackend();
-    json(res, 200, { ok: true, pty: backend !== null, ptyBackend: backend });
+    // **始めても無駄な条件は、始める前に返す。**
+    // 擬似端末が無い / Node が機械に合っていない、はどちらも必ず失敗する
+    json(res, 200, {
+      ok: true,
+      pty: backend !== null,
+      ptyBackend: backend,
+      node: checkNodeRuntime(),
+    });
     return true;
   }
 

package/src/server/leftover.js

@@ -99,8 +99,13 @@ export function leftoverWarning(leftover) {
       "このファイルには**チャネルシークレットとアクセストークンが、そのまま読める形で**入っています。",
       "**このファイルも、開いた画面も、誰にも送らないでください。**（サポートへの問い合わせでも同じです）",
       "",
-      "もう一度同じ手順でセットアップを実行し、最後まで完了すれば、このファイルは自動で消えます。",
-      "途中から再開されるので、入力し直す必要はありません（選択を求められたら「続行」を選んでください）。",
+      "もう一度セットアップを実行し、最後まで完了すれば、このファイルは自動で消えます。",
+      "本家のツールは途中から再開するので、済んだところを訊かれることはありません",
+      "（選択を求められたら「続行」を選んでください）。",
+      "",
+      "**この画面の入力欄が空になっている場合は、もう一度入れてください。**",
+      "このツールは入力をメモリ上だけで扱い、ディスクに保存しないため、",
+      "ターミナルを終了すると消えます。終了せずに「もう一度実行する」を押せば、入力し直す必要はありません。",
     ],
     // 消すのはこちらの判断でやらない。再開に必要な進捗も同じファイルに入っている
     canDelete: false,

package/src/server/runner.js

@@ -102,6 +102,8 @@ export class SetupRun extends EventEmitter {
     this.pending = null;
     /** フェイルクローズで止まった理由 @type {object|null} */
     this.halt = null;
+    /** 無反応を見張る時計。出力が来なくても判定を動かす @type {NodeJS.Timeout|null} */
+    this.watchdog = null;
 
     /** 直近に検出した枠 @type {import("./prompt-detector.js").DetectedPrompt|null} */
     this.detected = null;
@@ -198,6 +200,7 @@ export class SetupRun extends EventEmitter {
     this.stop();
     if (this.timer) clearTimeout(this.timer);
     if (this.forced) clearTimeout(this.forced);
+    if (this.watchdog) clearTimeout(this.watchdog);
     for (const key of Object.keys(this.answers)) {
       this.answers[key] = "";
       delete this.answers[key];
@@ -212,6 +215,7 @@ export class SetupRun extends EventEmitter {
   #onExit(info) {
     this.exit = info;
     this.status = "finished";
+    if (this.watchdog) clearTimeout(this.watchdog);
     // 仕上げの手作業に使う値を取り出す。読めなければ端末表示のままにする
     this.completion = parseCompletion(this.term.snapshot(), {
       // 画面から読めなくても、フォームに入っていた値で補える
@@ -224,6 +228,13 @@ export class SetupRun extends EventEmitter {
   }
 
   #onData(chunk) {
+    // **出力が来ている = 本家は動いている。**
+    //
+    // 進捗を「こちらが答えたとき」だけで測っていたため、本家が長く作業すると
+    // タイマーが止まったままになり、作業明けの最初のプロンプトが
+    // 照合される前に stuck で切られていた（#44）。
+    // npx のインストールだけで1〜2分かかるので、構造的に起きていた。
+    this.progressedAt = Date.now();
     this.term.write(chunk);
     this.#schedule();
   }
@@ -248,9 +259,23 @@ export class SetupRun extends EventEmitter {
     } catch (err) {
       this.#haltWith("internal-error", "内部エラーで自動応答を止めました", String(err));
     }
+    this.#watch();
     this.emit("update", this.state());
   }
 
+  /**
+   * 無反応を見張る。
+   *
+   * `#evaluate` は出力が来たときにしか呼ばれない。つまり**本家が黙り込むと、
+   * 判定そのものが動かない**。それでは「答えたのに反応が無い」を検知できないので、
+   * ここで時計を持つ。
+   */
+  #watch() {
+    if (this.watchdog) clearTimeout(this.watchdog);
+    if (this.status === "finished" || this.status === "halted") return;
+    this.watchdog = setTimeout(() => this.#fire(), this.stuckMs);
+  }
+
   // ── 判定 ───────────────────────────────────────────────────────────
 
   #frameId(detected) {
@@ -275,18 +300,6 @@ export class SetupRun extends EventEmitter {
 
     const frameId = this.#frameId(detected);
 
-    // 同じ枠が出たまま何も進んでいないなら、諦めて人に委ねる。
-    // 黙って固まると、参加者は何が起きているのか分からない
-    if (this.status === "running" && Date.now() - this.progressedAt > this.stuckMs) {
-      this.#haltWith(
-        "stuck",
-        "画面が進まなくなりました",
-        "この端末では自動で答えられない場面のようです。下の画面を見て、必要な入力を自分で送ってください。",
-        detected,
-      );
-      return;
-    }
-
     // select の移動後の確認待ち
     if (this.pendingSelect) {
       this.#confirmSelect(detected, frameId);
@@ -312,8 +325,22 @@ export class SetupRun extends EventEmitter {
       return;
     }
 
-    // 同じ枠には二度送らない（エコーで枠が描き直されるため）
-    if (this.answeredFrames.has(frameId)) return;
+    // 同じ枠には二度送らない（エコーで枠が描き直されるため）。
+    //
+    // **stuck を見るのはここだけ。** 答えたのに枠が残ったまま出力も止まった、
+    // という場面に限る。まだ答えていない枠は、まず照合してみる（#44）。
+    // 未応答の枠を時間で切ると、答えられるプロンプトまで巻き添えにする。
+    if (this.answeredFrames.has(frameId)) {
+      if (this.status === "running" && Date.now() - this.progressedAt > this.stuckMs) {
+        this.#haltWith(
+          "stuck",
+          "本家 CLI が反応しなくなりました",
+          "送った入力のあと、画面が動かなくなりました。下の画面を見て、必要であれば自分で入力してください。",
+          detected,
+        );
+      }
+      return;
+    }
 
     const matches = matchPrompt(detected);
 
@@ -546,6 +573,8 @@ export class SetupRun extends EventEmitter {
    */
   answerManually(text) {
     if (this.status !== "halted") throw new Error("止まっているときだけ手入力できます");
+    // 人が答えたのも進捗。ここを忘れると、復帰した直後に同じ判定へ落ちる
+    this.progressedAt = Date.now();
     this.pty?.write(`${text}${KEY_ENTER}`);
     this.halt = null;
     this.status = "running";

package/src/server/runtime.js

@@ -0,0 +1,72 @@
+/**
+ * 動かしている Node が、この機械に合っているか。
+ *
+ * Apple Silicon で **x86_64 の Node** を使うと、本家 CLI が依存として使う
+ * esbuild が x64 版を選び、Rosetta 上で落ちる。実測ではこう出た。
+ *
+ * ```
+ * ◇  D1 データベース作成完了
+ * ◇  bootstrap 適用に失敗
+ * ■  wrangler d1 failed:
+ *    Error: The service is no longer running   ← esbuild の子プロセスが死んだ
+ * ```
+ *
+ * **失敗するのは D1 を作ったあと。** R2（#26）や cron（#42）と同じ
+ * 「事前に分かるのに、作るものを作ってから失敗する」型で、やり直しのコストが高い。
+ *
+ * ただしこれは人に確認させる必要すら無い。**プロセスの中で分かる。**
+ * `pty.js` の `childEnv` が「起動に使った Node」を子へ引き継ぐので、
+ * ここで見ているのはそのまま本家 CLI が使う Node でもある。
+ */
+
+import { cpus } from "node:os";
+
+/**
+ * @typedef {object} RuntimeCheck
+ * @property {boolean} ok
+ * @property {string} arch            プロセスの arch
+ * @property {string} cpu             CPU の名前
+ * @property {RuntimeProblem|null} problem
+ *
+ * @typedef {object} RuntimeProblem
+ * @property {string} id
+ * @property {string} title
+ * @property {string} body
+ * @property {string[]} fix   直し方。**既存の mise / nvm を壊さない手順**にする
+ */
+
+/**
+ * @param {{ arch?: string, cpu?: string }} [override] テスト用
+ * @returns {RuntimeCheck}
+ */
+export function checkNodeRuntime(override = {}) {
+  const arch = override.arch ?? process.arch;
+  const cpu = override.cpu ?? cpus()[0]?.model ?? "";
+
+  // Apple 製 CPU なのに x64 で動いている = Rosetta 経由。
+  // arm64 で動いていれば何も言わない（Intel Mac の x64 も正常）
+  if (!(arch === "x64" && /\bApple\b/.test(cpu))) {
+    return { ok: true, arch, cpu, problem: null };
+  }
+
+  return {
+    ok: false,
+    arch,
+    cpu,
+    problem: {
+      id: "x64-on-apple-silicon",
+      title: "この Node ではセットアップできません",
+      body:
+        `この Mac は ${cpu}（Apple Silicon）ですが、いま動いている Node は x86_64 版です。` +
+        "このまま進めると、途中まで作られたあとで必ず失敗します" +
+        "（本家が使う esbuild が x86_64 版を選び、Rosetta 上で落ちるため）。",
+      fix: [
+        "nodejs.org から macOS の ARM64 版（LTS）を入れてください。",
+        "いま使っている mise や nvm の設定は変えなくて構いません。" +
+          "別の場所に置いて、そこから起動すれば足ります。",
+        "例: ~/.local/node-arm64 に展開したなら、" +
+          "~/.local/node-arm64/bin/npx walover-line-harness-gui で起動する",
+      ],
+    },
+  };
+}

package/src/web/index.html

@@ -285,8 +285,17 @@
     throw new Error("no server");
   }
 
+  /**
+   * 始めても必ず失敗する条件。
+   *
+   * 見つけたら**開始させない**。途中まで作られてから失敗すると、
+   * Cloudflare 上に中途半端なものが残り、やり直しのコストが高い。
+   */
+  const blockers = [];
+
   if (health.pty === false) {
     // 擬似端末が無いと本家 CLI は起動できない。値を入れてもらう前に伝える
+    blockers.push("擬似端末を用意できていません");
     banner(
       "セットアップを開始できません",
       "擬似端末を用意できませんでした（python3 が見つかりません）。" +
@@ -295,6 +304,20 @@
     );
   }
 
+  // Apple Silicon で x86_64 の Node を使っている場合。
+  // 進めると D1 を作ったあとで必ず失敗する（実測）
+  if (health.node && health.node.ok === false) {
+    const { title, body, fix } = health.node.problem;
+    blockers.push(title);
+    const node = el("div", { className: "banner bad" });
+    node.append(el("strong", { textContent: title }));
+    node.append(document.createTextNode(body));
+    const list = el("ul");
+    for (const line of fix) list.append(el("li", { textContent: line }));
+    node.append(list);
+    $("banners").append(node);
+  }
+
   // 本家 CLI の版のズレ。
   //
   // 固定版で動かすので、新しい版が出ているだけなら**参加者はこのまま進めてよい**。
@@ -367,8 +390,8 @@
   }
   $("preflight").hidden = gates.length === 0;
 
-  /** 前提がすべて確認済みか */
-  const gateReady = () => gates.every((g) => g.checked);
+  /** 始められるか。前提の確認と、始めても無駄な条件の両方を見る */
+  const gateReady = () => blockers.length === 0 && gates.every((g) => g.checked);
 
   for (const group of schema.groups) {
     const fields = schema.fields.filter((f) => f.group === group.id);
@@ -560,6 +583,8 @@
   const screen = $("run-screen");
   let startButton = null;
   let gateNote = null;
+  /** 直近の実行状態。やり直すとき、本家がまだ動いているかの判断に使う */
+  let lastStatus = "idle";
   /** 開始を投げている最中。この間にチェックを外されても、押し直せるようにはしない */
   let starting = false;
 
@@ -578,7 +603,10 @@
     const ready = gateReady();
     startButton.disabled = !ready;
     gateNote.replaceChildren();
-    if (!ready) {
+    if (blockers.length > 0) {
+      // 参加者の操作では解決しない。上の赤い枠の指示に従ってもらうしかない
+      gateNote.textContent = `このままでは開始できません: ${blockers.join(" / ")}`;
+    } else if (!ready) {
       gateNote.append(document.createTextNode("開始するには、"));
       gateNote.append(el("a", { href: "#preflight", textContent: "ページ上部の前提条件" }));
       gateNote.append(document.createTextNode("を確認してください。"));
@@ -605,19 +633,71 @@
       syncGate();
       return;
     }
-    // 入力はサーバーに渡した。ここから先は実行の画面
-    for (const input of inputs.values()) input.disabled = true;
-    for (const gate of gates) gate.disabled = true;
-    submit.disabled = true;
+    // 入力はサーバーに渡した。ここから先は実行の画面。
+    // **値は消さない。** やり直すときに入れ直させないため（#45）
+    setFormEnabled(false);
     runBox.hidden = false;
     runBox.scrollIntoView({ behavior: "smooth", block: "start" });
     listen();
   }
 
+  /** 実行中は触らせない。終わったら戻す（値はそのまま） */
+  function setFormEnabled(on) {
+    for (const input of inputs.values()) input.disabled = !on;
+    for (const gate of gates) gate.disabled = !on;
+    submit.disabled = !on;
+    if (startButton) startButton.disabled = !on;
+    if (on) syncGate();
+  }
+
+  /**
+   * もう一度実行する。
+   *
+   * **ツールを落とさせない。** 入力はメモリ上にしか無いので、
+   * ターミナルを終了すると消える。落とさずにやり直せれば入れ直しが要らない（#45）。
+   */
+  async function restartRun() {
+    // 止まっている最中は本家がまだ動いている。先に終わらせる
+    if (!/finished/.test(lastStatus)) {
+      await fetch("/api/run/stop", { method: "POST" });
+      await new Promise((r) => setTimeout(r, 300));
+    }
+    askBox.replaceChildren();
+    screen.textContent = "";
+    document.getElementById("leftover")?.remove();
+
+    starting = true;
+    const res = await fetch("/api/run/start", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: "{}",
+    });
+    if (!res.ok) {
+      starting = false;
+      setFormEnabled(true);
+      result.textContent = (await res.json()).error ?? "開始できませんでした。";
+      result.className = "result bad";
+      return;
+    }
+    setFormEnabled(false);
+    listen();
+  }
+
+  /** もう一度実行するためのボタン。止まったときと、失敗して終わったときに出す */
+  function rerunButton(label) {
+    const button = el("button", { className: "go", type: "button", textContent: label });
+    button.addEventListener("click", () => {
+      button.disabled = true;
+      restartRun();
+    });
+    return button;
+  }
+
   function listen() {
     const source = new EventSource("/api/run/stream");
     source.addEventListener("update", (event) => {
       const { lines, state } = JSON.parse(event.data);
+      lastStatus = state.status;
       // 端末の再描画はサーバー側で解決済み。ここは行を並べるだけ
       const atBottom = screen.scrollTop + screen.clientHeight >= screen.scrollHeight - 24;
       screen.textContent = lines.join("\n");
@@ -625,6 +705,9 @@
       renderAsk(state);
       if (state.status === "finished") {
         source.close();
+        starting = false;
+        // もう一度やり直せるように戻す。**値は消さない**（#45）
+        setFormEnabled(true);
         // 失敗・中断だとシークレットを含むファイルが残る。終わった直後に必ず見る
         showLeftover();
       }
@@ -636,23 +719,35 @@
     askBox.replaceChildren();
 
     if (state.status === "finished") {
-      const code = state.exit?.code;
-      if (code === 0 && state.hasCompletion) {
+      // **シグナルで落とされた場合も code は 0 になる**（実測: code 0 / signal 15）。
+      // code だけ見ると、中断を「成功」として見せてしまう
+      const ok = state.exit?.code === 0 && !state.exit?.signal;
+
+      if (ok && state.hasCompletion) {
         // 仕上げの手作業に使う値を、貼り付けやすい形で出す。
         // 端末表示は畳む（もう読む必要がない）
         showCompletion();
         return;
       }
-      const box = el("div", { className: code === 0 ? "ask done" : "ask stopped" });
-      box.append(el("h3", { textContent: code === 0 ? "終了しました" : "途中で終わりました" }));
+
+      // ここに来たのは、完了の案内を出せなかったということ。
+      // どの場合でも**やり直せる道を必ず添える**（#45）
+      const box = el("div", { className: "ask stopped" });
+      box.append(el("h3", { textContent: ok ? "終わりましたが、完了の案内が読み取れませんでした" : "途中で終わりました" }));
+      box.append(
+        el("p", {
+          textContent: "画面の最後に出ているメッセージを確認してください。原因を直したら、下のボタンでやり直せます。",
+        }),
+      );
+      // **ターミナルを終了させない。** 落とすと入力が消える（#45）
       box.append(
         el("p", {
           textContent:
-            code === 0
-              ? "画面の最後に出ている案内にしたがって、残りの手作業を進めてください。"
-              : "画面の最後に出ているメッセージを確認してください。同じ手順でやり直すと、続きから再開できます。",
+            "入力した値はこの画面に残っています。ターミナルは終了しないでください。" +
+            "上の入力欄を直してから、やり直すこともできます。",
         }),
       );
+      box.append(el("div", { className: "choices" }, [rerunButton("もう一度実行する")]));
       askBox.append(box);
       return;
     }
@@ -671,7 +766,8 @@
         answer({ manual: true, text: input.value }).then(() => (input.value = "")),
       );
       box.append(el("div", { className: "row" }, [el("div", { className: "row" }, [input])]));
-      box.append(el("div", { className: "choices" }, [go]));
+      // 打つ内容が分からないこともある。そのときのために、やり直す道も並べる
+      box.append(el("div", { className: "choices" }, [go, rerunButton("中止して最初からやり直す")]));
       askBox.append(box);
       return;
     }