@ripla/godd-mcp 1.0.7-canary.8 → 1.0.7

package/templates/feedback/frontend/FeedbackWidget.tsx

@@ -0,0 +1,574 @@
+import { type MouseEvent, useCallback, useEffect, useState } from "react";
+import type { FeedbackResult } from "./api";
+import { submitFeedback } from "./api";
+import { composePinImage } from "./composePinImage";
+import type { FeedbackPin } from "./types";
+
+// 既存 UI に合わせた配色
+const INK = "#36322b";
+const SUB = "#6b6457";
+const ACCENT = "#3f7a3f";
+const ACCENT_INK = "#2e5c2f";
+const BORDER = "#e3dccc";
+const PANEL = "#fff";
+const PIN_RED = "#b23b2e";
+// ウィジェットは常に最前面
+const Z = 2147483000;
+// 起票者名の保存キー（次回以降デフォルト入力するため）
+const REPORTER_STORAGE_KEY = "feedback.reporter";
+
+function loadSavedReporter(): string {
+  try {
+    return localStorage.getItem(REPORTER_STORAGE_KEY) ?? "";
+  } catch {
+    return "";
+  }
+}
+
+function saveReporter(name: string) {
+  try {
+    if (name) {
+      localStorage.setItem(REPORTER_STORAGE_KEY, name);
+    } else {
+      localStorage.removeItem(REPORTER_STORAGE_KEY);
+    }
+  } catch {
+    // プライベートモード等で保存できなくても送信自体は成功させる
+  }
+}
+
+type Phase =
+  | "idle" // FAB のみ
+  | "capturing" // スクショ撮影中
+  | "placing" // ピンを置く前
+  | "composing" // ピン設置済み・コメント入力
+  | "submitting" // 送信中
+  | "done" // 完了
+  | "error"; // 失敗
+
+export function FeedbackWidget() {
+  const [phase, setPhase] = useState<Phase>("idle");
+  const [shot, setShot] = useState<string | null>(null);
+  const [pin, setPin] = useState<FeedbackPin | null>(null);
+  const [comment, setComment] = useState("");
+  const [reporter, setReporter] = useState(loadSavedReporter);
+  const [screenName, setScreenName] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<FeedbackResult | null>(null);
+
+  const reset = useCallback(() => {
+    setPhase("idle");
+    setShot(null);
+    setPin(null);
+    setComment("");
+    setScreenName("");
+    setError(null);
+    setResult(null);
+  }, []);
+
+  // Esc で中断（入力中の composing は誤操作防止のため対象外）
+  useEffect(() => {
+    if (phase === "idle" || phase === "composing" || phase === "submitting") {
+      return;
+    }
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") reset();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [phase, reset]);
+
+  const startCapture = useCallback(async () => {
+    setError(null);
+
+    if (!navigator.mediaDevices?.getDisplayMedia) {
+      setError("このブラウザは画面キャプチャ（getDisplayMedia）に未対応です");
+      setPhase("error");
+      return;
+    }
+
+    // 現在のタブのみを共有候補にする（Chrome 系のみ有効なオプション）
+    const displayOptions: DisplayMediaStreamOptions = {
+      video: { displaySurface: "browser" } as MediaTrackConstraints,
+      audio: false,
+    };
+    (displayOptions as { preferCurrentTab?: boolean }).preferCurrentTab = true;
+
+    let stream: MediaStream;
+    try {
+      stream = await navigator.mediaDevices.getDisplayMedia(displayOptions);
+    } catch (e) {
+      // ユーザーが共有をキャンセルした場合は失敗扱いにせず idle に戻す
+      if (e instanceof DOMException && e.name === "NotAllowedError") return;
+      setError(e instanceof Error ? e.message : "画面キャプチャに失敗しました");
+      setPhase("error");
+      return;
+    }
+
+    // 実ピクセルをそのまま撮るため、自分の UI（FAB 等）を画面から消してから撮る
+    setPhase("capturing");
+    try {
+      // FAB が消えた描画が画面に反映されるまで少し待つ
+      await new Promise((r) => setTimeout(r, 250));
+
+      const video = document.createElement("video");
+      video.srcObject = stream;
+      video.muted = true;
+      // 解像度（videoWidth/Height）が確定するまで待つ。待たずに読むと 0 になりうる
+      await new Promise<void>((resolve, reject) => {
+        video.onloadedmetadata = () => resolve();
+        video.onerror = () =>
+          reject(new Error("キャプチャ映像の読み込みに失敗しました"));
+      });
+      await video.play();
+      // 最初のフレームが描画されるのを待つ
+      await new Promise((r) => requestAnimationFrame(() => r(null)));
+
+      const w = video.videoWidth;
+      const h = video.videoHeight;
+      const canvas = document.createElement("canvas");
+      canvas.width = w;
+      canvas.height = h;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) throw new Error("Canvas コンテキストを取得できませんでした");
+      ctx.drawImage(video, 0, 0, w, h);
+      const png = canvas.toDataURL("image/png");
+
+      video.pause();
+      video.srcObject = null;
+
+      setShot(png);
+      setPhase("placing");
+    } catch (e) {
+      setError(
+        e instanceof Error
+          ? e.message
+          : "スクリーンショットの取得に失敗しました",
+      );
+      setPhase("error");
+    } finally {
+      for (const track of stream.getTracks()) track.stop();
+    }
+  }, []);
+
+  const onPlacePin = (e: MouseEvent<HTMLButtonElement>) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = ((e.clientX - rect.left) / rect.width) * 100;
+    const y = ((e.clientY - rect.top) / rect.height) * 100;
+    setPin({ x, y });
+    if (phase === "placing") setPhase("composing");
+  };
+
+  const onSubmit = async () => {
+    if (!shot || !pin || !comment.trim()) return;
+    setPhase("submitting");
+    setError(null);
+    try {
+      const annotated = await composePinImage(shot, pin);
+      const res = await submitFeedback({
+        comment: comment.trim(),
+        reporter: reporter.trim() || undefined,
+        screenName: screenName.trim() || undefined,
+        annotatedScreenshot: annotated,
+        pin,
+        page: {
+          url: window.location.href,
+          path: window.location.pathname + window.location.hash,
+          title: document.title,
+        },
+        meta: {
+          viewport: {
+            width: window.innerWidth,
+            height: window.innerHeight,
+          },
+          userAgent: navigator.userAgent,
+          capturedAt: new Date().toISOString(),
+        },
+      });
+      saveReporter(reporter.trim());
+      setResult(res);
+      setPhase("done");
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "送信に失敗しました");
+      setPhase("error");
+    }
+  };
+
+  const overlayActive =
+    phase === "placing" ||
+    phase === "composing" ||
+    phase === "submitting" ||
+    phase === "done" ||
+    phase === "error";
+
+  return (
+    <div data-feedback-root="true">
+      {/* 右下の常駐 FAB */}
+      {phase === "idle" && (
+        <button
+          type="button"
+          onClick={startCapture}
+          aria-label="コメントを追加"
+          title="コメントを追加"
+          style={{
+            position: "fixed",
+            right: 20,
+            bottom: 20,
+            zIndex: Z,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 56,
+            height: 56,
+            padding: 0,
+            borderRadius: "50%",
+            border: "none",
+            background: ACCENT,
+            color: "#fff",
+            lineHeight: 1,
+            cursor: "pointer",
+            boxShadow: "0 8px 22px rgba(54,50,43,.28)",
+          }}
+        >
+          {/* 絵文字は OS 依存の描画で円形が歪んで見えるため SVG で描く */}
+          <svg width={26} height={26} viewBox="0 0 24 24" aria-hidden="true">
+            <path
+              d="M12 3C6.9 3 3 6.4 3 10.6c0 2.4 1.3 4.5 3.3 5.9-.1 1-.6 2.1-1.5 3.1 1.7-.1 3.2-.7 4.3-1.5.9.2 1.9.4 2.9.4 5.1 0 9-3.4 9-7.9S17.1 3 12 3Z"
+              fill="#fff"
+            />
+            <circle cx="8.2" cy="10.6" r="1.2" fill={ACCENT} />
+            <circle cx="12" cy="10.6" r="1.2" fill={ACCENT} />
+            <circle cx="15.8" cy="10.6" r="1.2" fill={ACCENT} />
+          </svg>
+        </button>
+      )}
+
+      {/* 撮影中は画面に何も足さない（実ピクセルを撮る方式のため写り込み防止） */}
+
+      {/* 全画面オーバーレイ（キャプチャ前のエラーでも操作パネルは出す。
+          shot を必須にすると getDisplayMedia 失敗時に閉じる手段がなくなる） */}
+      {overlayActive && (
+        <div
+          style={{
+            position: "fixed",
+            inset: 0,
+            zIndex: Z,
+            background: "rgba(30,26,20,.78)",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: 24,
+            gap: 16,
+          }}
+        >
+          {/* スクショ + ピン */}
+          {shot && (
+          <div
+            style={{
+              position: "relative",
+              maxWidth: "90vw",
+              maxHeight: "72vh",
+              lineHeight: 0,
+              boxShadow: "0 10px 40px rgba(0,0,0,.4)",
+              borderRadius: 8,
+              overflow: "hidden",
+            }}
+          >
+            <button
+              type="button"
+              onClick={onPlacePin}
+              disabled={phase === "submitting"}
+              title="クリックして指摘位置にピンを置く"
+              style={{
+                display: "block",
+                padding: 0,
+                border: "none",
+                background: "none",
+                cursor: phase === "submitting" ? "default" : "crosshair",
+              }}
+            >
+              <img
+                src={shot}
+                alt="現在の画面"
+                style={{
+                  display: "block",
+                  maxWidth: "90vw",
+                  maxHeight: "72vh",
+                  objectFit: "contain",
+                }}
+              />
+            </button>
+            {pin && (
+              // 先端（下端中央）がクリック位置に一致するよう translate(-50%,-100%)
+              <svg
+                width={28}
+                height={37}
+                viewBox="0 0 24 32"
+                aria-hidden="true"
+                style={{
+                  position: "absolute",
+                  left: `${pin.x}%`,
+                  top: `${pin.y}%`,
+                  transform: "translate(-50%,-100%)",
+                  pointerEvents: "none",
+                  filter: "drop-shadow(0 2px 3px rgba(0,0,0,.35))",
+                }}
+              >
+                <title>指摘ピン</title>
+                <path
+                  d="M12 1C6.201 1 1.5 5.701 1.5 11.5C1.5 19.5 12 31 12 31C12 31 22.5 19.5 22.5 11.5C22.5 5.701 17.799 1 12 1Z"
+                  fill={PIN_RED}
+                  stroke="#fff"
+                  strokeWidth={2}
+                />
+                <circle cx="12" cy="11.5" r="4" fill="#fff" />
+              </svg>
+            )}
+          </div>
+          )}
+
+          {/* 操作パネル */}
+          <div
+            style={{
+              width: "min(560px, 90vw)",
+              background: PANEL,
+              borderRadius: 14,
+              border: `1px solid ${BORDER}`,
+              padding: 18,
+              boxShadow: "0 8px 30px rgba(0,0,0,.25)",
+            }}
+          >
+            {phase === "placing" && (
+              <div style={{ color: SUB, fontSize: 14, textAlign: "center" }}>
+                画面の
+                <strong style={{ color: INK }}>気になる箇所をクリック</strong>
+                してピンを置いてください（Esc で取消）
+              </div>
+            )}
+
+            {(phase === "composing" || phase === "submitting") && (
+              <>
+                <div
+                  style={{
+                    display: "flex",
+                    gap: 10,
+                    marginBottom: 12,
+                  }}
+                >
+                  <div style={{ flex: 1 }}>
+                    <label htmlFor="feedback-reporter" style={fieldLabel}>
+                      起票者（任意）
+                    </label>
+                    <input
+                      id="feedback-reporter"
+                      type="text"
+                      value={reporter}
+                      onChange={(e) => setReporter(e.target.value)}
+                      disabled={phase === "submitting"}
+                      placeholder="例）山田"
+                      style={textInput}
+                    />
+                  </div>
+                  <div style={{ flex: 1 }}>
+                    <label htmlFor="feedback-screen-name" style={fieldLabel}>
+                      画面名（任意）
+                    </label>
+                    <input
+                      id="feedback-screen-name"
+                      type="text"
+                      value={screenName}
+                      onChange={(e) => setScreenName(e.target.value)}
+                      disabled={phase === "submitting"}
+                      placeholder="例）一覧画面"
+                      style={textInput}
+                    />
+                  </div>
+                </div>
+                <label
+                  htmlFor="feedback-comment"
+                  style={{
+                    display: "block",
+                    fontSize: 13,
+                    fontWeight: 700,
+                    color: INK,
+                    marginBottom: 8,
+                  }}
+                >
+                  指摘・要望コメント
+                </label>
+                <textarea
+                  id="feedback-comment"
+                  value={comment}
+                  onChange={(e) => setComment(e.target.value)}
+                  disabled={phase === "submitting"}
+                  placeholder="例）このボタンの色をもっと目立たせたい / 文字を大きく など"
+                  rows={3}
+                  style={{
+                    width: "100%",
+                    resize: "vertical",
+                    padding: "10px 12px",
+                    borderRadius: 10,
+                    border: `1.5px solid ${BORDER}`,
+                    fontSize: 14,
+                    color: INK,
+                    outline: "none",
+                    background: "#fbf9f4",
+                  }}
+                />
+                <div
+                  style={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    marginTop: 12,
+                    gap: 10,
+                  }}
+                >
+                  <span style={{ fontSize: 12, color: SUB }}>
+                    ピンの位置は画像をクリックし直すと変更できます
+                  </span>
+                  <div style={{ display: "flex", gap: 8 }}>
+                    <button
+                      type="button"
+                      onClick={reset}
+                      disabled={phase === "submitting"}
+                      style={ghostBtn}
+                    >
+                      キャンセル
+                    </button>
+                    <button
+                      type="button"
+                      onClick={onSubmit}
+                      disabled={phase === "submitting" || !comment.trim()}
+                      style={{
+                        ...primaryBtn,
+                        opacity:
+                          phase === "submitting" || !comment.trim() ? 0.55 : 1,
+                        cursor:
+                          phase === "submitting" || !comment.trim()
+                            ? "default"
+                            : "pointer",
+                      }}
+                    >
+                      {phase === "submitting" ? "送信中…" : "送信して起票"}
+                    </button>
+                  </div>
+                </div>
+              </>
+            )}
+
+            {phase === "done" && (
+              <div style={{ textAlign: "center" }}>
+                <div
+                  style={{ fontSize: 15, fontWeight: 700, color: ACCENT_INK }}
+                >
+                  ✓ 送信しました。Issue を作成しました。
+                </div>
+                {result?.issueUrl && (
+                  <a
+                    href={result.issueUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                    style={{
+                      fontSize: 13,
+                      color: ACCENT,
+                      wordBreak: "break-all",
+                    }}
+                  >
+                    {result.issueNumber
+                      ? `Issue #${result.issueNumber} を開く`
+                      : result.issueUrl}
+                  </a>
+                )}
+                <div style={{ marginTop: 14 }}>
+                  <button type="button" onClick={reset} style={primaryBtn}>
+                    閉じる
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {phase === "error" && (
+              <div style={{ textAlign: "center" }}>
+                <div
+                  style={{
+                    fontSize: 14,
+                    fontWeight: 700,
+                    color: PIN_RED,
+                    marginBottom: 6,
+                  }}
+                >
+                  エラーが発生しました
+                </div>
+                <div style={{ fontSize: 12.5, color: SUB, marginBottom: 14 }}>
+                  {error}
+                </div>
+                <div
+                  style={{ display: "flex", gap: 8, justifyContent: "center" }}
+                >
+                  <button type="button" onClick={reset} style={ghostBtn}>
+                    閉じる
+                  </button>
+                  {shot && (
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setError(null);
+                        setPhase(pin ? "composing" : "placing");
+                      }}
+                      style={primaryBtn}
+                    >
+                      戻る
+                    </button>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+const primaryBtn = {
+  padding: "9px 16px",
+  borderRadius: 10,
+  border: `1.5px solid ${ACCENT}`,
+  background: ACCENT,
+  color: "#fff",
+  fontSize: 13.5,
+  fontWeight: 700,
+  cursor: "pointer",
+} as const;
+
+const fieldLabel = {
+  display: "block",
+  fontSize: 13,
+  fontWeight: 700,
+  color: INK,
+  marginBottom: 8,
+} as const;
+
+const textInput = {
+  width: "100%",
+  padding: "8px 12px",
+  borderRadius: 10,
+  border: `1.5px solid ${BORDER}`,
+  fontSize: 14,
+  color: INK,
+  outline: "none",
+  background: "#fbf9f4",
+} as const;
+
+const ghostBtn = {
+  padding: "9px 16px",
+  borderRadius: 10,
+  border: `1.5px solid ${BORDER}`,
+  background: "#fff",
+  color: INK,
+  fontSize: 13.5,
+  fontWeight: 700,
+  cursor: "pointer",
+} as const;

package/templates/feedback/frontend/api.ts

@@ -0,0 +1,38 @@
+import { FEEDBACK_API_URL, FEEDBACK_TOKEN } from "./config";
+import type { FeedbackPayload } from "./types";
+
+/** バックエンドが返す起票結果 */
+export interface FeedbackResult {
+  /** 作成された GitHub Issue の URL */
+  issueUrl?: string;
+  /** Issue 番号 */
+  issueNumber?: number;
+}
+
+/**
+ * フィードバックをバックエンドへ送信する。
+ * バックエンド側でスクショの S3 保存・GitHub Issue 作成・Slack 通知を行う想定。
+ */
+export async function submitFeedback(
+  payload: FeedbackPayload,
+): Promise<FeedbackResult> {
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+  };
+  if (FEEDBACK_TOKEN) headers["X-Feedback-Token"] = FEEDBACK_TOKEN;
+
+  const res = await fetch(FEEDBACK_API_URL, {
+    method: "POST",
+    headers,
+    body: JSON.stringify(payload),
+  });
+
+  if (!res.ok) {
+    const detail = await res.text().catch(() => "");
+    throw new Error(
+      `送信に失敗しました (HTTP ${res.status})${detail ? `: ${detail}` : ""}`,
+    );
+  }
+
+  return (await res.json().catch(() => ({}))) as FeedbackResult;
+}

package/templates/feedback/frontend/composePinImage.ts

@@ -0,0 +1,80 @@
+import type { FeedbackPin } from "./types";
+
+const PIN_RED = "#b23b2e";
+
+/**
+ * スクリーンショット画像にピンを合成した PNG data URL を返す。
+ * ピン座標は画像に対する相対 %（0〜100）。
+ */
+export async function composePinImage(
+  screenshotDataUrl: string,
+  pin: FeedbackPin,
+): Promise<string> {
+  const img = await loadImage(screenshotDataUrl);
+  const canvas = document.createElement("canvas");
+  canvas.width = img.width;
+  canvas.height = img.height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Canvas コンテキストを取得できませんでした");
+
+  ctx.drawImage(img, 0, 0);
+
+  const px = (pin.x / 100) * img.width;
+  const py = (pin.y / 100) * img.height;
+  drawPin(ctx, px, py, Math.max(28, img.width * 0.025));
+
+  return canvas.toDataURL("image/png");
+}
+
+function loadImage(src: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error("画像の読み込みに失敗しました"));
+    img.src = src;
+  });
+}
+
+/**
+ * ピン先端（下端中央）が (cx, cy) に来るドロップピンを描画する。
+ * size はピンの横幅（px）。
+ */
+function drawPin(
+  ctx: CanvasRenderingContext2D,
+  cx: number,
+  cy: number,
+  size: number,
+) {
+  const s = size / 24;
+  ctx.save();
+  ctx.translate(cx - 12 * s, cy - 32 * s);
+  ctx.scale(s, s);
+
+  // ドロップ形状
+  ctx.beginPath();
+  ctx.moveTo(12, 31);
+  ctx.bezierCurveTo(12, 31, 1.5, 19.5, 1.5, 11.5);
+  ctx.bezierCurveTo(1.5, 5.701, 6.201, 1, 12, 1);
+  ctx.bezierCurveTo(17.799, 1, 22.5, 5.701, 22.5, 11.5);
+  ctx.bezierCurveTo(22.5, 19.5, 12, 31, 12, 31);
+  ctx.closePath();
+
+  ctx.shadowColor = "rgba(0,0,0,0.35)";
+  ctx.shadowBlur = 4 * s;
+  ctx.shadowOffsetY = 2 * s;
+  ctx.fillStyle = PIN_RED;
+  ctx.fill();
+  ctx.shadowColor = "transparent";
+
+  ctx.strokeStyle = "#fff";
+  ctx.lineWidth = 2;
+  ctx.stroke();
+
+  // 中央の白丸
+  ctx.beginPath();
+  ctx.arc(12, 11.5, 4, 0, Math.PI * 2);
+  ctx.fillStyle = "#fff";
+  ctx.fill();
+
+  ctx.restore();
+}