walover-line-harness-gui 0.3.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "walover-line-harness-gui",
-  "version": "0.3.0",
+  "version": "0.5.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, ptyProblem } from "./runtime.js";
 import { checkLeftoverState, leftoverWarning } from "./leftover.js";
 
 const HERE = dirname(fileURLToPath(import.meta.url));
@@ -114,7 +115,18 @@ 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 });
+    const node = checkNodeRuntime();
+
+    // **始めても無駄な条件は、始める前に返す。**
+    // 擬似端末が無い / Node が機械に合っていない、はどちらも必ず失敗する。
+    //
+    // 形を揃えて返すのは、画面が同じ出し方をできるようにするため。
+    // どれも「そのまま貼れる文章」を持っていて、参加者はコピーするだけでよい
+    const blockers = [];
+    if (backend === null) blockers.push(ptyProblem());
+    if (node.problem) blockers.push(node.problem);
+
+    json(res, 200, { ok: true, pty: backend !== null, ptyBackend: backend, node, blockers });
     return true;
   }
 

package/src/server/leftover.js

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

package/src/server/prompt-contract.js

@@ -23,7 +23,7 @@
  */
 
 /** 契約が対象とする本家 CLI のバージョン。ズレの検知は #5 で行う */
-export const CONTRACT_CLI_VERSION = "0.2.12";
+export const CONTRACT_CLI_VERSION = "0.2.11";
 
 /**
  * @typedef {object} PromptSpec
@@ -133,9 +133,7 @@ export const PROMPTS = [
     id: "lineChannelSecret",
     message: "チャネルシークレット（英数字）",
     kind: "text",
-    // 0.2.12 で本家が p.text → p.password にした。値行は伏字（▪）になり、
-    // placeholder は無くなった。宣言したままだと第二の照合が外れて止まる。
-    // message が一意なので、外しても取り違えは起きない
+    placeholder: "同じページに表示されている Channel Secret",
     secret: true,
     answer: "form",
     field: "lineChannelSecret",
@@ -150,7 +148,7 @@ export const PROMPTS = [
     id: "lineChannelAccessToken",
     message: "チャネルアクセストークン（長期）",
     kind: "text",
-    // 同上。0.2.12 で p.password になった
+    placeholder: "上の手順で発行したトークン",
     secret: true,
     answer: "form",
     field: "lineChannelAccessToken",

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,154 @@
+/**
+ * 動かしている 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";
+
+/**
+ * 参加者に渡す「助けを求める文章」。
+ *
+ * **読者は非開発者。** 何が悪いかを説明しても、直し方が分からなければ先に進めない。
+ * 実機で「Silicon のエラー文は非エンジニアにはハードルが高い」という指摘を受けた。
+ *
+ * そこで、**そのまま Claude Code などに貼れる文章**を用意する。
+ * 症状・機械の情報・やってほしいこと・壊してはいけないものを、こちらで書いておく。
+ * 参加者がやるのは「コピーして貼る」だけにする。
+ *
+ * @param {string[]} lines
+ */
+const prompt = (lines) => lines.join("\n");
+
+/**
+ * @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 を壊さない手順**にする
+ * @property {string} prompt   そのまま貼れる、助けを求める文章
+ */
+
+/**
+ * @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: "このパソコンでは、このままでは始められません",
+      body:
+        `お使いの Mac は ${cpu} ですが、いま動いている Node.js が、この Mac の種類に合っていません。` +
+        "このまま進めると、途中まで作られたあとで必ず失敗します。" +
+        "先に Node.js を入れ替える必要があります。",
+      fix: [
+        "下の文章をコピーして、Claude Code（または詳しい方）に渡してください。",
+        "自分で直す場合は、nodejs.org の macOS「ARM64」版（LTS）を入れてください。",
+      ],
+      prompt: prompt([
+        "Mac で LINE Harness のセットアップ画面を開いたら、",
+        "「このパソコンでは、このままでは始められません」と出て先に進めません。",
+        "",
+        "画面にはこう書かれています:",
+        `  お使いの Mac は ${cpu} ですが、いま動いている Node.js が、この Mac の種類に合っていません。`,
+        "",
+        "調べたところ、こうなっているようです:",
+        `  ・Node.js のバージョン: ${process.version}`,
+        `  ・Node.js の種類: ${arch}（この Mac に合っているのは arm64）`,
+        "",
+        "この Mac に合った Node.js（arm64 版）を用意して、",
+        "セットアップ画面を起動し直せるようにしてください。",
+        "",
+        "お願いしたい条件:",
+        "・いま入っている mise / nvm / Homebrew の設定は壊さないでください",
+        "・新しい Node.js は別の場所に入れて、そこから起動する形にしてください",
+        "・終わったら、起動するためのコマンドを1行で教えてください",
+        "  （いまは npx walover-line-harness-gui で起動しています）",
+      ]),
+    },
+  };
+}
+
+/**
+ * 擬似端末を用意できない場合。
+ *
+ * 本家 CLI は実際の端末を要求するので、これが無いと起動すらできない。
+ * **参加者から見れば「始められない」だけ**なので、言い方も直し方もそれに合わせる。
+ *
+ * @param {{ platform?: string }} [override] テスト用
+ * @returns {RuntimeProblem}
+ */
+export function ptyProblem(override = {}) {
+  const platform = override.platform ?? process.platform;
+
+  // 直し方は OS で違う。macOS 以外に xcode-select を案内しても意味がない
+  const fix =
+    platform === "darwin"
+      ? [
+          "下の文章をコピーして、Claude Code（または詳しい方）に渡してください。",
+          "自分で直す場合は、ターミナルで xcode-select --install を実行してください。",
+        ]
+      : [
+          "下の文章をコピーして、Claude Code（または詳しい方）に渡してください。",
+          "自分で直す場合は、いったんターミナルを終了して、もう一度起動してみてください。",
+        ];
+
+  return {
+    id: "no-pty",
+    title: "このパソコンでは、このままでは始められません",
+    body:
+      "セットアップを進めるのに必要な部品が、このパソコンで用意できませんでした。" +
+      "このままでは、セットアップツールを起動できません。",
+    fix,
+    prompt: prompt([
+      "LINE Harness のセットアップ画面を開いたら、",
+      "「このパソコンでは、このままでは始められません」と出て先に進めません。",
+      "",
+      "画面にはこう書かれています:",
+      "  セットアップを進めるのに必要な部品が、このパソコンで用意できませんでした。",
+      "",
+      "このツールは擬似端末（PTY）を使います。",
+      `私のパソコンは ${platform} です。`,
+      "擬似端末を使えるようにして、セットアップ画面を起動し直せるようにしてください。",
+      "",
+      "お願いしたい条件:",
+      "・いま入っている開発ツールの設定は壊さないでください",
+      "・終わったら、起動するためのコマンドを1行で教えてください",
+      "  （いまは npx walover-line-harness-gui で起動しています）",
+    ]),
+  };
+}

package/src/web/index.html

@@ -73,6 +73,18 @@
   .note .note-detail { margin: .4rem 0 0 1.1rem; padding-left: .7rem;
                        border-left: 2px solid var(--line); white-space: pre-line; }
 
+  /* 「そのまま貼れる文章」。読ませるより、コピーさせることが目的 */
+  .helpme { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--err-line); }
+  .helpme-lead { margin: 0 0 .4rem; font-weight: 600; font-size: .88rem; }
+  .helpme-text { margin: 0 0 .5rem; padding: .7rem .8rem; max-height: 11rem; overflow-y: auto;
+                 background: var(--bg); border: 1px solid var(--line); border-radius: .4rem;
+                 color: var(--fg); font-size: .8rem; line-height: 1.6;
+                 font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+                 white-space: pre-wrap; word-break: break-word; }
+  .helpme button { font: inherit; font-size: .85rem; font-weight: 600; padding: .45rem 1.1rem;
+                   border: 0; border-radius: 999px; cursor: pointer;
+                   background: var(--brand-fill); color: var(--brand-fill-fg); }
+
   .status { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--muted);
             margin-bottom: 1.5rem; }
   .dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--muted); flex: none; }
@@ -285,14 +297,37 @@
     throw new Error("no server");
   }
 
-  if (health.pty === false) {
-    // 擬似端末が無いと本家 CLI は起動できない。値を入れてもらう前に伝える
-    banner(
-      "セットアップを開始できません",
-      "擬似端末を用意できませんでした（python3 が見つかりません）。" +
-        "macOS では、ターミナルで xcode-select --install を実行すると入ります。",
-      true,
-    );
+  /**
+   * 始めても必ず失敗する条件。
+   *
+   * 見つけたら**開始させない**。途中まで作られてから失敗すると、
+   * Cloudflare 上に中途半端なものが残り、やり直しのコストが高い。
+   *
+   * **読者は非開発者。** 原因を説明しても直し方が分からなければ先に進めないので、
+   * **そのまま貼れる文章**をコピーできる形で添える（実機での指摘）。
+   */
+  const blockers = (health.blockers ?? []).map((b) => b.title);
+  for (const problem of health.blockers ?? []) $("banners").append(renderBlocker(problem));
+
+  function renderBlocker({ title, body, fix, prompt }) {
+    const box = el("div", { className: "banner bad" });
+    box.append(el("strong", { textContent: title }));
+    box.append(document.createTextNode(body));
+
+    if (fix?.length) {
+      const list = el("ul");
+      for (const line of fix) list.append(el("li", { textContent: line }));
+      box.append(list);
+    }
+
+    if (prompt) {
+      const help = el("div", { className: "helpme" });
+      help.append(el("p", { className: "helpme-lead", textContent: "そのままコピーして貼ってください:" }));
+      help.append(el("pre", { className: "helpme-text", textContent: prompt }));
+      help.append(copyButton(prompt, "この文章をコピー"));
+      box.append(help);
+    }
+    return box;
   }
 
   // 本家 CLI の版のズレ。
@@ -367,8 +402,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 +595,8 @@
   const screen = $("run-screen");
   let startButton = null;
   let gateNote = null;
+  /** 直近の実行状態。やり直すとき、本家がまだ動いているかの判断に使う */
+  let lastStatus = "idle";
   /** 開始を投げている最中。この間にチェックを外されても、押し直せるようにはしない */
   let starting = false;
 
@@ -578,7 +615,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 +645,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 +717,9 @@
       renderAsk(state);
       if (state.status === "finished") {
         source.close();
+        starting = false;
+        // もう一度やり直せるように戻す。**値は消さない**（#45）
+        setFormEnabled(true);
         // 失敗・中断だとシークレットを含むファイルが残る。終わった直後に必ず見る
         showLeftover();
       }
@@ -636,23 +731,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 +778,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;
     }
@@ -774,7 +882,13 @@
       row.append(reveal);
     }
 
-    const copy = el("button", { type: "button", textContent: "コピー" });
+    row.append(copyButton(value, "コピー"));
+    return row;
+  }
+
+  /** 押すと中身を写すボタン。押したことが分かるように文字を変える */
+  function copyButton(value, label) {
+    const copy = el("button", { type: "button", textContent: label });
     copy.addEventListener("click", async () => {
       try {
         // http://127.0.0.1 は secure context なので clipboard が使える
@@ -790,12 +904,11 @@
       copy.textContent = "コピーしました";
       copy.classList.add("done");
       setTimeout(() => {
-        copy.textContent = "コピー";
+        copy.textContent = label;
         copy.classList.remove("done");
       }, 1600);
     });
-    row.append(copy);
-    return row;
+    return copy;
   }
 
   /**