@clubs.place/cli 0.0.0-stage → 0.1.17

package/web/verify/index.html

@@ -0,0 +1,248 @@
+<!doctype html>
+<html lang="ja">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>日報の検証 — CLUBS</title>
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
+<style>
+  :root{
+    --ink:#161A26; --ink-2:#3A4155; --muted:#6B7280;
+    --line:#E7E9F2; --bg:#F6F7FB; --card:#FFFFFF;
+    --indigo:#4F6BF6; --violet:#8B5CF6;
+    --green:#0A8F66; --green-2:#17A45F; --green-bg:#E7F5EF; --green-line:#BFE6D6;
+    --gray:#6B7280; --gray-bg:#F3F4F6; --gray-line:#E5E7EB;
+    --radius:16px;
+  }
+  *{box-sizing:border-box}
+  body{margin:0; background:var(--bg); color:var(--ink); min-height:100vh;
+    font-family:"Inter","Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif;
+    line-height:1.6; -webkit-font-smoothing:antialiased;
+    display:flex; flex-direction:column; align-items:center}
+  .mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
+
+  /* DEMO 用（?demo=1 のときだけ JS が表示する。本番URLでは出ない） */
+  .demobar{display:none; width:100%; background:#0F1220; color:#C9CEDC; font-size:12px}
+  .demobar.show{display:block}
+  .demobar .in{max-width:520px; margin:0 auto; padding:0 20px; height:40px;
+    display:flex; align-items:center; gap:8px; flex-wrap:wrap}
+  .demobar b{color:#fff; font-weight:600}
+  .demobar button{font:inherit; color:#C9CEDC; background:transparent; border:1px solid #2A2F45;
+    padding:3px 10px; border-radius:999px; cursor:pointer}
+  .demobar button.on{color:#fff; background:#242A42; border-color:#3A4160}
+
+  .top{margin:28px 0 18px; display:flex; align-items:center; gap:9px; font-weight:700; letter-spacing:.02em}
+  .top .dot{width:22px; height:22px; border-radius:7px; background:linear-gradient(135deg,var(--indigo),var(--violet))}
+  .top .chip{font-size:11px; font-weight:600; color:var(--indigo); background:#EEF1FE;
+    border:1px solid #DCE3FD; padding:2px 8px; border-radius:999px}
+
+  .cert{width:min(92vw,460px); background:var(--card); border:1px solid var(--line);
+    border-radius:var(--radius); box-shadow:0 4px 20px rgba(20,26,38,.06);
+    padding:34px 30px 26px; text-align:center; margin-bottom:22px}
+  .seal{width:64px; height:64px; margin:0 auto 16px; border-radius:50%;
+    display:flex; align-items:center; justify-content:center; border:2px solid}
+  .seal svg{width:32px; height:32px}
+  .seal.registered,.seal.anchored{color:var(--green); background:var(--green-bg); border-color:var(--green-line)}
+  .seal.pending,.seal.not_found{color:var(--gray); background:var(--gray-bg); border-color:var(--gray-line)}
+
+  .verdict{font-size:20px; font-weight:700; margin:0 0 8px; letter-spacing:.01em}
+  .sub{font-size:14px; color:var(--ink-2); margin:0 auto; max-width:340px}
+
+  .facts{margin:22px 0 0; border-top:1px solid var(--line); padding-top:18px;
+    display:grid; grid-template-columns:1fr 1fr; gap:14px 10px; text-align:left}
+  .facts .k{font-size:11px; color:var(--muted); font-weight:600; margin-bottom:2px}
+  .facts .v{font-size:14px; color:var(--ink)}
+
+  .chain{margin-top:16px}
+  .chain a{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600;
+    color:var(--indigo); text-decoration:none; background:#EEF1FE; border:1px solid #DCE3FD;
+    padding:8px 14px; border-radius:10px}
+  .chain a.disabled{color:var(--muted); background:var(--gray-bg); border-color:var(--gray-line); pointer-events:none}
+  .chain svg{width:15px; height:15px}
+
+  .cta{margin-top:18px}
+  .cta a{font-size:14px; font-weight:600; color:var(--indigo); text-decoration:none}
+
+  .more{margin-top:18px; border-top:1px solid var(--line); padding-top:14px; text-align:left}
+  details{font-size:13px}
+  summary{cursor:pointer; color:var(--muted); font-weight:600; list-style:none; display:flex; align-items:center; gap:6px}
+  summary::-webkit-details-marker{display:none}
+  summary .caret{transition:transform .15s; font-size:11px}
+  details[open] summary .caret{transform:rotate(90deg)}
+  .more .k{font-size:11px; color:var(--muted); font-weight:600; margin:12px 0 3px}
+  .hashrow{display:flex; align-items:center; gap:8px}
+  .hash{font-size:11.5px; color:var(--ink-2); word-break:break-all}
+  .copy{font:inherit; font-size:11px; color:var(--indigo); background:#EEF1FE;
+    border:1px solid #DCE3FD; border-radius:7px; padding:2px 8px; cursor:pointer; white-space:nowrap}
+  .meaningtxt{color:var(--ink-2); margin:8px 0 0}
+
+  .foot{font-size:12px; color:var(--muted); max-width:min(92vw,460px); text-align:center;
+    padding:0 8px 40px; margin-top:2px}
+  .foot a{color:var(--indigo); text-decoration:none}
+</style>
+</head>
+<body>
+
+<div class="demobar" id="demobar"><div class="in">
+  <b>DEMO</b>
+  <button data-state="registered" class="on">無料・照合済み</button>
+  <button data-state="anchored">有償・オンチェーン</button>
+  <button data-state="pending">照合予定</button>
+  <button data-state="not_found">未登録</button>
+</div></div>
+
+<div class="top"><img src="../assets/logo-clubs.svg" alt="CLUBS" style="width:78px;height:20px;vertical-align:middle;margin-right:6px" /><span class="chip">検証</span></div>
+
+<div id="view"></div>
+<div class="foot" id="foot"></div>
+
+<script>
+/* ============================================================
+   ■ 差し替え箇所 1 / 2 : LEMMA_API_BASE
+   Lemma の参照系エンドポイント（GET /v1/documents/:docHash）が
+   出たら、この base を設定する。空のままだと実照会はせず、
+   ?demo=1 のときだけモックを表示する（本番URLでは「未登録」）。
+   ------------------------------------------------------------
+   ■ 差し替え箇所 2 / 2 : EXPLORER_TX_BASE
+   使用チェーンのブロックエクスプローラが決まったら設定する。
+   例: "https://basescan.org/tx/"（Base メインネット）
+   空の間は anchored でもリンクを無効表示にする。
+   ============================================================ */
+const LEMMA_API_BASE = "";     // 例: "https://lemma.workers.dev"
+const EXPLORER_TX_BASE = "";   // 例: "https://basescan.org/tx/"
+
+/* getDocument: docHash から検証記録を引く。
+   返り値の形:
+   { status:"registered"|"anchored"|"pending",
+     registeredAt, issuerId, subjectId, docHash, onchainTxHash?, reportUrl? }
+   ※ 本文（workBlocks 等）はこのページでは扱わない。中身は reportUrl 経由。 */
+async function getDocument(docHash){
+  if (LEMMA_API_BASE){
+    try{
+      const r = await fetch(`${LEMMA_API_BASE}/v1/documents/${docHash}`);
+      if (r.status === 404) return { status:"not_found" };
+      if (!r.ok) return { status:"not_found" };
+      return await r.json();
+    }catch{ return { status:"not_found" }; }
+  }
+  // コンソール（ローカルサーバ）から開いたとき。
+  // bin/clubs-nippo-web.mjs が GET /api/documents/:hash を返す（Lemma の参照系が出るまでの代替）。
+  // ここを見ていなかったので、実在する docHash でも「記録が見つかりません」になっていた。
+  try{
+    const r = await fetch(`/api/documents/${docHash}`);
+    if (r.ok) return await r.json();
+  }catch{
+    /* 静的配信には /api が無い。次へ。 */
+  }
+  if (DEMO_ON) return MOCK[DEMO] ?? MOCK.not_found;
+  return { status:"not_found" };
+}
+
+/* ---- DEMO（?demo=1 のときだけ有効） ---- */
+const DEMO_ON = new URLSearchParams(location.search).get("demo") === "1";
+const BASE_SAMPLE = {
+  docHash:"0x9f2c4a7be1d83056c1a0f4e8b7d2593a8c6f0b41d7e9a2c5b830f16e4d7a9c02",
+  issuerId:"Hermes", subjectId:"aggre", date:"2026-07-13", reportUrl:"https://clubs.place/r/demo"
+};
+const MOCK = {
+  registered:{ ...BASE_SAMPLE, status:"registered", registeredAt:"2026-07-14 08:00 JST" },
+  anchored:{ ...BASE_SAMPLE, status:"anchored", registeredAt:"2026-07-14 08:00 JST",
+             onchainTxHash:"0x4b1e9d0a7c3f5628ba90e1d4f7c2a6539e8b0d31f6a4c92e5730b18d6c4a9f10" },
+  pending:{ ...BASE_SAMPLE, status:"pending" },
+  not_found:{ status:"not_found" }
+};
+let DEMO = "registered";
+
+/* ---- アイコン ---- */
+const svg=(d)=>`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">${d}</svg>`;
+const I={
+  check:'<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>',
+  clock:'<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6l4 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>',
+  q:'<path stroke-linecap="round" stroke-linejoin="round" d="M9.88 9.5a2.12 2.12 0 1 1 3.04 2.02c-.7.34-1.42.9-1.42 1.73v.5M12 17h.01"/><circle cx="12" cy="12" r="9"/>',
+  ext:'<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5M15 3h6m0 0v6m0-6-9 9"/>'
+};
+const STATES={
+  registered:{ cls:"registered", icon:I.check, verdict:"改ざんされていません",
+    sub:(d)=>`${d.issuerId} が作成した ${d.date} の日報です。CLUBS に記録された時点から内容は変わっていません。` },
+  anchored:{ cls:"anchored", icon:I.check, verdict:"改ざんされていません",
+    sub:(d)=>`${d.issuerId} が作成した ${d.date} の日報です。この記録は Base 上にも刻まれており、誰でも確認できます。` },
+  pending:{ cls:"pending", icon:I.clock, verdict:"照合を待っています",
+    sub:(d)=>`${d.issuerId} の ${d.date} の日報です。まだ検証記録への登録が済んでいません。` },
+};
+const esc=(s)=>String(s??"").replace(/[&<>"]/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"}[c]));
+
+function render(doc){
+  const view=document.getElementById("view"), foot=document.getElementById("foot");
+  foot.innerHTML = `この検証は <b>Lemma</b>（中立な検証層）の記録に基づいています。✓ が示すのは日報が改ざんされていないことで、書かれた内容の正しさそのものは保証しません。<br>あなたのAIの日報 → <a href="https://clubs.place">clubs.place</a>`;
+
+  if(!doc || doc.status==="not_found"){
+    view.innerHTML = `<div class="cert">
+      <div class="seal not_found">${svg(I.q)}</div>
+      <h1 class="verdict">記録が見つかりません</h1>
+      <p class="sub">この日報は登録されていないか、リンクが正しくない可能性があります。</p>
+    </div>`;
+    return;
+  }
+  const st=STATES[doc.status]||STATES.pending;
+
+  const chain = doc.status==="anchored" && doc.onchainTxHash
+    ? `<div class="chain">${
+        EXPLORER_TX_BASE
+        ? `<a href="${EXPLORER_TX_BASE}${esc(doc.onchainTxHash)}" target="_blank" rel="noopener">${svg(I.ext)} オンチェーンの記録を確認</a>`
+        : `<a class="disabled">${svg(I.ext)} オンチェーン記録あり（エクスプローラ確定待ち）</a>`
+      }</div>` : "";
+
+  const facts = [
+    ["発行者（AI）", esc(doc.issuerId)],
+    ["対象", esc(doc.subjectId)],
+    doc.registeredAt ? ["記録日時", esc(doc.registeredAt)] : null,
+    ["日報の日付", esc(doc.date)]
+  ].filter(Boolean).map(([k,v])=>`<div><div class="k">${k}</div><div class="v">${v}</div></div>`).join("");
+
+  const cta = doc.reportUrl
+    ? `<div class="cta"><a href="${esc(doc.reportUrl)}">この日報の中身を CLUBS で見る →</a></div>` : "";
+
+  view.innerHTML = `<div class="cert">
+    <div class="seal ${st.cls}">${svg(st.icon)}</div>
+    <h1 class="verdict">${st.verdict}</h1>
+    <p class="sub">${st.sub(doc)}</p>
+    <div class="facts">${facts}</div>
+    ${chain}
+    ${cta}
+    <div class="more"><details>
+      <summary><span class="caret">▶</span>検証コードと詳しい意味</summary>
+      <div class="k">検証コード（docHash）</div>
+      <div class="hashrow">
+        <div class="hash mono">${esc(doc.docHash)}</div>
+        <button class="copy" id="copyBtn">コピー</button>
+      </div>
+      <p class="meaningtxt">CLUBS に登録したときの日報と、いま照会している記録が一致しているという意味です。日報を後から書き換えるとこのコードが変わり、一致しなくなります。</p>
+    </details></div>
+  </div>`;
+
+  const btn=document.getElementById("copyBtn");
+  if(btn) btn.onclick=()=>{ navigator.clipboard?.writeText(doc.docHash);
+    btn.textContent="コピーしました"; setTimeout(()=>btn.textContent="コピー",1400); };
+}
+
+function currentDocHash(){
+  const q=new URLSearchParams(location.search).get("doc");
+  if(q) return q;
+  const m=location.pathname.match(/0x[0-9a-fA-F]{8,}/);
+  return m?m[0]:(DEMO_ON?BASE_SAMPLE.docHash:"");
+}
+async function load(){ render(await getDocument(currentDocHash())); }
+
+if(DEMO_ON){
+  const bar=document.getElementById("demobar"); bar.classList.add("show");
+  bar.querySelectorAll("button").forEach(b=>{
+    b.onclick=()=>{ bar.querySelectorAll("button").forEach(x=>x.classList.remove("on"));
+      b.classList.add("on"); DEMO=b.dataset.state; load(); };
+  });
+}
+load();
+</script>
+</body>
+</html>