walover-line-harness-gui 0.4.0 → 0.6.0

package/package.json

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

package/src/server/index.js

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

@@ -21,6 +21,20 @@
 
 import { cpus } from "node:os";
 
+/**
+ * 参加者に渡す「助けを求める文章」。
+ *
+ * **読者は非開発者。** 何が悪いかを説明しても、直し方が分からなければ先に進めない。
+ * 実機で「Silicon のエラー文は非エンジニアにはハードルが高い」という指摘を受けた。
+ *
+ * そこで、**そのまま Claude Code などに貼れる文章**を用意する。
+ * 症状・機械の情報・やってほしいこと・壊してはいけないものを、こちらで書いておく。
+ * 参加者がやるのは「コピーして貼る」だけにする。
+ *
+ * @param {string[]} lines
+ */
+const prompt = (lines) => lines.join("\n");
+
 /**
  * @typedef {object} RuntimeCheck
  * @property {boolean} ok
@@ -33,6 +47,7 @@ import { cpus } from "node:os";
  * @property {string} title
  * @property {string} body
  * @property {string[]} fix   直し方。**既存の mise / nvm を壊さない手順**にする
+ * @property {string} prompt   そのまま貼れる、助けを求める文章
  */
 
 /**
@@ -55,18 +70,85 @@ export function checkNodeRuntime(override = {}) {
     cpu,
     problem: {
       id: "x64-on-apple-silicon",
-      title: "この Node ではセットアップできません",
+      title: "このパソコンでは、このままでは始められません",
       body:
-        `この Mac は ${cpu}（Apple Silicon）ですが、いま動いている Node は x86_64 版です。` +
-        "このまま進めると、途中まで作られたあとで必ず失敗します" +
-        "（本家が使う esbuild が x86_64 版を選び、Rosetta 上で落ちるため）。",
+        `お使いの Mac は ${cpu} ですが、いま動いている Node.js が、この Mac の種類に合っていません。` +
+        "このまま進めると、途中まで作られたあとで必ず失敗します。" +
+        "先に Node.js を入れ替える必要があります。",
       fix: [
-        "nodejs.org から macOS の ARM64 版（LTS）を入れてください。",
-        "いま使っている mise や nvm の設定は変えなくて構いません。" +
-          "別の場所に置いて、そこから起動すれば足ります。",
-        "例: ~/.local/node-arm64 に展開したなら、" +
-          "~/.local/node-arm64/bin/npx walover-line-harness-gui で起動する",
+        "下の文章をコピーして、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; }
@@ -290,32 +302,32 @@
    *
    * 見つけたら**開始させない**。途中まで作られてから失敗すると、
    * Cloudflare 上に中途半端なものが残り、やり直しのコストが高い。
+   *
+   * **読者は非開発者。** 原因を説明しても直し方が分からなければ先に進めないので、
+   * **そのまま貼れる文章**をコピーできる形で添える（実機での指摘）。
    */
-  const blockers = [];
-
-  if (health.pty === false) {
-    // 擬似端末が無いと本家 CLI は起動できない。値を入れてもらう前に伝える
-    blockers.push("擬似端末を用意できていません");
-    banner(
-      "セットアップを開始できません",
-      "擬似端末を用意できませんでした（python3 が見つかりません）。" +
-        "macOS では、ターミナルで xcode-select --install を実行すると入ります。",
-      true,
-    );
-  }
+  const blockers = (health.blockers ?? []).map((b) => b.title);
+  for (const problem of health.blockers ?? []) $("banners").append(renderBlocker(problem));
 
-  // 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);
+  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 の版のズレ。
@@ -870,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 が使える
@@ -886,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;
   }
 
   /**