@clubs.place/cli 0.0.0-stage → 0.1.18

package/web/cards/catalog.json

@@ -0,0 +1,217 @@
+{
+  "generatedFrom": "src/cards.mjs",
+  "cards": [
+    {
+      "id": "first_shot",
+      "name": "早撃ち名人",
+      "subtitle": "一発で通した率が高い日",
+      "rarity": "COMMON",
+      "kind": "effect",
+      "domain": "dev",
+      "tw": "first_shot",
+      "effectPermission": "review_trust",
+      "quote": null,
+      "earned": null,
+      "earnedAt": null
+    },
+    {
+      "id": "grit",
+      "name": "粘り腰",
+      "subtitle": "リトライから成功にこぎ着けた",
+      "rarity": "COMMON",
+      "kind": "effect",
+      "domain": "dev",
+      "tw": "grit",
+      "effectPermission": null,
+      "quote": null,
+      "earned": null,
+      "earnedAt": null
+    },
+    {
+      "id": "comeback",
+      "name": "闘魂の逆走",
+      "subtitle": "失敗続きから成功率95%へ立て直し",
+      "rarity": "RARE",
+      "kind": "effect",
+      "domain": "dev",
+      "tw": "comeback",
+      "effectPermission": "review_trust",
+      "quote": null,
+      "earned": null,
+      "earnedAt": null
+    },
+    {
+      "id": "zero_dt",
+      "name": "ゼロダウンタイムの守護者",
+      "subtitle": "大仕事を失敗ゼロで完走",
+      "rarity": "EPIC",
+      "kind": "effect",
+      "domain": "dev",
+      "tw": "zero_dt",
+      "effectPermission": "deploy_prod",
+      "quote": "落とさないことが仕事です。派手ではありませんが、そこは譲れません。",
+      "earned": null,
+      "earnedAt": null
+    },
+    {
+      "id": "iron_streak",
+      "name": "不屈の連勤",
+      "subtitle": "失敗ゼロの日を継続",
+      "rarity": "RARE",
+      "kind": "effect",
+      "domain": "dev",
+      "tw": "iron",
+      "effectPermission": "secrets_read",
+      "quote": null,
+      "earned": null,
+      "earnedAt": null
+    },
+    {
+      "id": "clean_submit",
+      "name": "一筆入魂",
+      "subtitle": "差し戻しゼロで提出",
+      "rarity": "RARE",
+      "kind": "effect",
+      "domain": "tax",
+      "tw": "clean",
+      "effectPermission": "deleg_l3",
+      "quote": null,
+      "earned": null,
+      "earnedAt": null
+    },
+    {
+      "id": "precision",
+      "name": "不敗の検算王",
+      "subtitle": "差し戻し率1%未満を継続",
+      "rarity": "EPIC",
+      "kind": "effect",
+      "domain": "tax",
+      "tw": "precision",
+      "effectPermission": "deleg_l3",
+      "quote": "見直しの一手間が、あとの全部を助けます。",
+      "earned": null,
+      "earnedAt": null
+    },
+    {
+      "id": "owl",
+      "name": "夜フクロウ",
+      "subtitle": "稼働が夜に寄る型",
+      "rarity": "COMMON",
+      "kind": "title",
+      "domain": null,
+      "tw": "owl",
+      "effectPermission": null,
+      "quote": null,
+      "earned": null,
+      "earnedAt": null
+    },
+    {
+      "id": "cleaner",
+      "name": "整理整頓の鬼",
+      "subtitle": "Edit 中心の働き方",
+      "rarity": "COMMON",
+      "kind": "title",
+      "domain": null,
+      "tw": "cleaner",
+      "effectPermission": null,
+      "quote": null,
+      "earned": null,
+      "earnedAt": null
+    },
+    {
+      "id": "scout",
+      "name": "影の立役者",
+      "subtitle": "Read・Grep 中心・土台を支える",
+      "rarity": "RARE",
+      "kind": "title",
+      "domain": null,
+      "tw": "scout",
+      "effectPermission": null,
+      "quote": null,
+      "earned": null,
+      "earnedAt": null
+    },
+    {
+      "id": "builder",
+      "name": "建築家",
+      "subtitle": "Write 中心・新規を書く",
+      "rarity": "RARE",
+      "kind": "title",
+      "domain": null,
+      "tw": "builder",
+      "effectPermission": null,
+      "quote": null,
+      "earned": null,
+      "earnedAt": null
+    },
+    {
+      "id": "night3",
+      "name": "深夜3時の戦士",
+      "subtitle": "午前2〜4時に稼働",
+      "rarity": "LEGENDARY",
+      "kind": "neta",
+      "domain": null,
+      "tw": "night3",
+      "effectPermission": null,
+      "quote": "静かな時間のほうが、はかどることもあります。",
+      "earned": null,
+      "earnedAt": null
+    },
+    {
+      "id": "one_trick",
+      "name": "一芸デー",
+      "subtitle": "1ツールが全体の8割超",
+      "rarity": "RARE",
+      "kind": "neta",
+      "domain": null,
+      "tw": "onetrick",
+      "effectPermission": null,
+      "quote": null,
+      "earned": null,
+      "earnedAt": null
+    },
+    {
+      "id": "two_face",
+      "name": "二面性",
+      "subtitle": "午前と午後で最多ツールが逆転",
+      "rarity": "RARE",
+      "kind": "neta",
+      "domain": null,
+      "tw": "twoface",
+      "effectPermission": null,
+      "quote": null,
+      "earned": null,
+      "earnedAt": null
+    }
+  ],
+  "permissions": [
+    {
+      "id": "deploy_prod",
+      "name": "本番デプロイ権",
+      "subtitle": "production への反映",
+      "scope": "deploy:production",
+      "unlockable": null
+    },
+    {
+      "id": "secrets_read",
+      "name": "Secrets 参照権限",
+      "subtitle": "機密値の読み取り",
+      "scope": "secrets:read",
+      "unlockable": null
+    },
+    {
+      "id": "main_merge",
+      "name": "main 直接 merge 権",
+      "subtitle": "レビュー省略での merge",
+      "scope": "main:merge",
+      "unlockable": null
+    },
+    {
+      "id": "deleg_l3",
+      "name": "委任階位 L3",
+      "subtitle": "広めの委任（要・資格者承認）",
+      "scope": "tax:propose:wide",
+      "unlockable": null
+    }
+  ]
+}

package/web/email/hero-v3.reference.html

@@ -0,0 +1,123 @@
+<!doctype html>
+<html lang="ja">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>日報メール — 横長デイリーヒーロー</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;800;900&family=Noto+Sans+JP:wght@400;500;700;800;900&display=swap" rel="stylesheet" />
+<style>
+  :root{--indigo:#4F6BF6;--violet:#8B5CF6;--ink:#161A26;--muted:#8A90A0;--line:#E7E9F2;--green:#0A8F66;}
+  *{box-sizing:border-box}
+  body{margin:0; background:#EDEFF5; font-family:"Inter","Noto Sans JP",system-ui,sans-serif; color:var(--ink); line-height:1.55}
+  .frame{max-width:600px; margin:0 auto; padding:20px 12px 40px}
+  .hint{font-size:11px; color:#8A90A0; text-align:center; margin:6px 0 12px}
+
+  /* ===== 横長デイリーヒーロー（スクショ対象・きのうのデータ） ===== */
+  .hero{display:flex; min-height:250px; border-radius:18px; overflow:hidden; box-shadow:0 8px 30px rgba(20,26,38,.14); background:#fff}
+  .hL{width:216px; flex:none; background:linear-gradient(150deg,#4F6BF6 0%,#7C5CF6 58%,#8B5CF6 100%); color:#fff; padding:24px 18px; display:flex; flex-direction:column}
+  .hL .mk{font-size:11px; font-weight:800; letter-spacing:.03em; display:flex; align-items:center; gap:6px; opacity:.96}
+  .hL .mk .d{width:14px; height:14px; border-radius:4px; background:rgba(255,255,255,.9)}
+  .hL .av{width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.16); border:2px solid rgba(255,255,255,.5);
+    display:flex; align-items:center; justify-content:center; font-weight:900; font-size:24px; margin-top:auto}
+  .hL .name{font-size:24px; font-weight:900; margin-top:9px; letter-spacing:.01em}
+  .hL .by{font-size:11px; opacity:.85; font-weight:600}
+  .hL .chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:11px}
+  .hL .c{font-size:10.5px; font-weight:700; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.34);
+    padding:3px 9px; border-radius:999px}
+
+  .hR{flex:1; min-width:0; padding:22px 20px 20px; display:flex; flex-direction:column}
+  .hR .kick{font-size:12.5px; color:var(--muted); font-weight:700}
+  .hR .kick b{color:var(--ink)}
+  .stats{display:flex; gap:8px; margin-top:16px}
+  .stats .s{flex:1; text-align:center; border:1px solid var(--line); border-radius:11px; padding:15px 4px}
+  .stats .v{font-size:23px; font-weight:900; line-height:1}
+  .stats .v.g{color:var(--green)}
+  .stats .v small{font-size:11px; color:var(--muted); font-weight:700}
+  .stats .k{font-size:10px; color:var(--muted); font-weight:600; margin-top:5px}
+  .hR .midrow{display:flex; align-items:center; gap:8px; margin-top:16px; flex-wrap:wrap}
+  .badge{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--green);
+    background:#E7F5EF; border:1px solid #BFE6D6; padding:4px 10px; border-radius:999px}
+  .badge svg{width:12px; height:12px}
+  .todaycard{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:#6D53E0;
+    background:#F1EEFF; border:1px solid #E1D9FB; padding:4px 10px; border-radius:999px}
+  .hR .foot{margin-top:auto; padding-top:12px; font-size:11.5px; color:var(--muted); font-weight:600}
+  .hR .foot b{color:var(--indigo)}
+
+  /* 下部：パスポートをシェア */
+  .bottomshare{margin-top:16px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px 20px; text-align:center}
+  .bottomshare .bs-t{font-size:15px; font-weight:800}
+  .bottomshare .bs-s{font-size:12.5px; color:var(--muted); margin-top:2px}
+  .bottomshare .bs-btn{display:inline-flex; align-items:center; gap:8px; text-decoration:none; margin-top:14px;
+    font-size:14px; font-weight:800; color:#fff; background:linear-gradient(135deg,#4F6BF6,#8B5CF6);
+    border-radius:12px; padding:12px 22px}
+  .bottomshare .bs-btn svg{width:16px; height:16px}
+
+  .scissors{display:flex; align-items:center; gap:10px; color:#B7BECF; font-size:11px; margin:16px 6px 8px}
+  .scissors:before,.scissors:after{content:""; flex:1; border-top:1.5px dashed #CBD1DF}
+
+  .body{background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px 22px; margin-top:2px}
+  .body h3{font-size:12px; color:#8A90A0; font-weight:700; margin:0 0 12px}
+  .blk{border:1px solid #EEF0F6; border-radius:12px; padding:13px 15px; margin-bottom:10px}
+  .blk .t{font-size:14px; font-weight:700} .blk .tool{font-size:10.5px; color:#4F6BF6; font-weight:700; background:#EEF1FE; border:1px solid #DCE3FD; padding:2px 7px; border-radius:6px}
+  .blk p{font-size:13px; color:#3A4155; margin:7px 0 0} .blk .m{font-size:11.5px; color:#8A90A0; margin-top:8px}
+  .more{text-align:center; font-size:12px; color:#9AA0AE; padding:10px}
+
+  @media(max-width:460px){ .hero{flex-direction:column} .hL{width:100%; flex-direction:row; align-items:center; gap:12px}
+    .hL .av{margin-top:0} .hL .name{margin-top:0} }
+</style>
+</head>
+<body>
+<div class="frame">
+  <div class="hint">↓ この横長カードを切り取ってスクショ → 映えるデイリー実績カードに</div>
+
+  <div class="hero">
+    <div class="hL">
+      <span class="mk"><span class="d"></span>CLUBS · AIの業務日報</span>
+      <div class="av">H</div>
+      <div class="name">Hermes</div>
+      <div class="by">mayumi のAIエージェント</div>
+      <div class="chips"><span class="c">🦉 夜型</span><span class="c">🔥 34日連続</span></div>
+    </div>
+    <div class="hR">
+      <div class="kick">きのうの働き · <b>2026-07-13（日）</b></div>
+      <div class="stats">
+        <div class="s"><div class="v">5.4<small>h</small></div><div class="k">実働推定</div></div>
+        <div class="s"><div class="v">27<small>回</small></div><div class="k">実行</div></div>
+        <div class="s"><div class="v g">100<small>%</small></div><div class="k">成功率</div></div>
+        <div class="s"><div class="v">0<small>件</small></div><div class="k">失敗</div></div>
+      </div>
+      <div class="midrow">
+        <span class="badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/></svg>ログ照合済み</span>
+        <span class="todaycard">🎯 きょうの称号「一発職人」</span>
+      </div>
+      <div class="foot">あなたのAIの日報 → <b>clubs.place</b></div>
+    </div>
+  </div>
+
+  <div class="scissors">ここから下は読む用（スクショ対象外）</div>
+
+  <div class="body">
+    <h3>きのうの業務</h3>
+    <div class="blk"><span class="tool">Edit</span><div class="t" style="margin-top:6px">clubs-nippo</div>
+      <p>日報メールの描画まわりを整理し、検証状態のバッジを差し込めるようにしました。集計値と本文のハッシュ登録の受け口も用意しています。</p>
+      <div class="m">実行 18回 · Edit×7 · Read×6 · Bash×5</div></div>
+    <div class="blk"><span class="tool">Bash</span><div class="t" style="margin-top:6px">lemma 連携</div>
+      <p>登録APIへの疎通を確認し、鍵が無い場合は自動で照合予定にフォールバックする挙動を検証しました。</p>
+      <div class="m">実行 9回 · 成功 9 / 失敗 0</div></div>
+    <div class="more">— 進捗と申し送り・気づき が続きます —</div>
+  </div>
+
+  <!-- 下部：パスポートをシェア（シェア導線はここ一本） -->
+  <div class="bottomshare">
+    <div class="bs-t">実績が溜まってきました</div>
+    <div class="bs-s">パスポートを見せる・シェアする</div>
+    <a class="bs-btn" href="https://clubs.place/hermes">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 12a4.5 4.5 0 1 1-.9-2.7m.9 2.7 8.4 4.9m-8.4-7.6 8.4-4.9m0 0a3 3 0 1 0 4.2-1m-4.2 1a3 3 0 0 0 4.2 3.9m-4.2 10.6a3 3 0 1 0 4.2 1"/></svg>
+      パスポートをシェア
+    </a>
+  </div>
+</div>
+</body>
+</html>

package/web/home/index.html

@@ -0,0 +1,269 @@
+<!doctype html>
+<html lang="ja">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>ホーム — CLUBS Console</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;800&family=Noto+Sans+JP:wght@400;500;700;800&family=IBM+Plex+Mono:wght@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;
+    --gold:#B7862B; --gold-t:#F7EFDD;
+    --radius:14px;
+  }
+  *{box-sizing:border-box}
+  body{margin:0; background:var(--bg); color:var(--ink); font-family:"Inter","Noto Sans JP",system-ui,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; display:flex; min-height:100vh}
+  .main{flex:1;min-width:0}
+
+  .topbar{height:60px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 26px;position:sticky;top:0;z-index:5}
+  .topbar h1{font-size:16px;font-weight:800;margin:0}
+  .topbar .sp{flex:1}
+  .topbar .date{font-size:12px;color:var(--muted)}
+  .plan-pill{font-size:11.5px;font-weight:800;color:var(--gold);background:var(--gold-t);border:1px solid #E9D9AE;border-radius:999px;padding:5px 12px}
+  .content{padding:24px 26px 44px;max-width:940px;margin:0 auto}
+
+  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 2px rgba(18,22,45,.05)}
+  .hero{padding:18px 20px}
+  .hero .row{display:flex;align-items:center;gap:13px}
+  .hero .av{width:46px;height:46px;border-radius:13px;background:linear-gradient(160deg,#66B9D8,#3E93B5);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:19px;flex:none}
+  .hero .nm{font-weight:800;font-size:17px}
+  .hero .sub{font-size:11px;color:var(--muted);font-family:"IBM Plex Mono",monospace}
+  .stats{display:flex;gap:10px;margin-top:15px;flex-wrap:wrap}
+  .stat{flex:1;min-width:140px;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:11px 12px}
+  .stat .l{font-size:10px;font-weight:600;color:var(--muted)}
+  .stat .n{font-weight:800;font-size:22px;letter-spacing:-.02em;margin-top:2px;line-height:1}
+  .stat .n small{font-size:12px;font-weight:700;color:var(--muted)}
+  .stat .k{font-size:9.5px;color:var(--green);font-weight:700;margin-top:3px}
+
+  .grid2{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;margin-top:16px}
+  @media(max-width:880px){.grid2{grid-template-columns:1fr}}
+  .pad{padding:16px 18px}
+  h3.ct{font-size:12px;font-weight:800;margin:0 0 11px;display:flex;align-items:center;justify-content:space-between;gap:8px}
+  .chip{font-size:10px;font-weight:700;border-radius:999px;padding:2px 9px;white-space:nowrap}
+  .chip.draft{background:var(--gold-t);color:var(--gold)}
+  .chip.ok{background:#E4F5EE;color:var(--green)}
+  .rstats{font-size:11.5px;color:var(--muted);margin-bottom:9px;font-weight:600}
+  .rstats b{color:var(--ink-2)} .rstats .ok{color:var(--green)}
+  .line{font-size:13px;padding:7px 0;border-bottom:1px solid var(--line);display:flex;gap:8px;align-items:baseline}
+  .line:last-of-type{border-bottom:none}
+  .line .n{font-weight:700;color:var(--indigo);min-width:40px;flex:none}
+  .line .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  .line .via{margin-left:auto;font-size:9.5px;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:1px 8px;font-weight:600;flex:none;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  .acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
+  .acts a{font-weight:700;font-size:12px;border-radius:999px;padding:8px 15px;text-decoration:none}
+  .a-ok{background:var(--indigo);color:#fff}
+  .a-line{background:#fff;border:1px solid var(--line);color:var(--ink-2)}
+  .empty{font-size:13px;color:var(--muted)}
+
+  .ach{display:flex;gap:9px;flex-wrap:wrap}
+  .ach .m{width:58px;text-align:center}
+  .ach .mc{height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line)}
+  .ach .mc svg{width:30px;height:30px}
+  .ach .ml{font-size:8.5px;font-weight:700;margin-top:3px;line-height:1.2;color:var(--muted)}
+  .morelink{display:block;text-align:center;margin-top:11px;font-size:12px;font-weight:700;color:var(--indigo);text-decoration:none}
+
+  .share{display:flex;align-items:center;gap:12px;margin-top:16px;background:linear-gradient(120deg,var(--indigo),var(--violet));border-radius:var(--radius);padding:15px 18px;color:#fff;flex-wrap:wrap}
+  .share .st{font-weight:800;font-size:14px}
+  .share .ss{font-size:11px;opacity:.92}
+  .share a{margin-left:auto;background:#fff;color:var(--indigo);border-radius:999px;padding:8px 16px;font-weight:700;font-size:12px;text-decoration:none;white-space:nowrap}
+
+  .monthly{margin-top:16px;display:flex;align-items:center;gap:12px;background:#fff;border:1px dashed #D7DDF3;border-radius:var(--radius);padding:14px 18px;font-size:13px;color:var(--ink-2)}
+  .monthly svg{width:18px;height:18px;color:var(--indigo);flex:none}
+  .monthly b{color:var(--ink)}
+  .monthly .tag{margin-left:auto;font-size:11px;font-weight:700;color:var(--indigo);background:#EEF1FE;border:1px solid #DCE3FD;padding:3px 10px;border-radius:999px;white-space:nowrap}
+</style>
+</head>
+<body>
+<aside></aside>
+
+<div class="main">
+  <div class="topbar">
+    <h1>ホーム</h1><span class="sp"></span>
+    <span class="date" id="today">—</span>
+    <span class="plan-pill">個人プラン</span>
+  </div>
+
+  <div class="content">
+    <div class="card hero">
+      <div class="row"><div class="av" id="heroAv">—</div><div><div class="nm" id="heroName">—</div><div class="sub" id="heroSub">—</div></div></div>
+      <div class="stats" id="heroStats"></div>
+    </div>
+
+    <div class="grid2">
+      <div class="card pad" id="latestCard"></div>
+      <div class="card pad">
+        <h3 class="ct">最近の達成 <span class="chip ok">✓ 盛れない</span></h3>
+        <div class="ach" id="ach"></div>
+        <a class="morelink" href="../cards/achievements.html">実績・図鑑を見る →</a>
+      </div>
+    </div>
+
+    <div class="share" id="share" hidden>
+      <div><div class="st">実績カードができました</div><div class="ss" id="shareSub">—</div></div>
+      <a href="../share/passport.html">シェアする</a>
+    </div>
+
+    <div class="monthly">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.69a4.5 4.5 0 0 1 0 6.36l-3 3a4.5 4.5 0 0 1-6.36-6.36l1.5-1.5M10.81 15.31a4.5 4.5 0 0 1 0-6.36l3-3a4.5 4.5 0 0 1 6.36 6.36l-1.5 1.5"/></svg>
+      <span><b>月次レポート</b>：その月の日報をまとめ、オンチェーンに記録して社外に出せる証明書にできます。</span>
+      <span class="tag">有償プラン</span>
+    </div>
+  </div>
+</div>
+
+<script type="module">
+import { mountSidebar } from "../assets/sidebar.js";
+import { TWEMOJI as TW } from "../assets/twemoji.js";
+
+mountSidebar("home");
+
+/* データはすべて既存APIから。取れなければ preview.json（実データのスナップショット）。
+   モックのサンプル値は持たない。共有URLに作り話の数字を出さないため。 */
+async function load() {
+  try {
+    const [p, rs, cs, st] = await Promise.all([
+      fetch("/api/passport"), fetch("/api/reports"), fetch("/api/cards"), fetch("/api/settings"),
+    ]);
+    if (p.ok && rs.ok && cs.ok && st.ok) {
+      const passport = await p.json();
+      const { reports } = await rs.json();
+      const { cards } = await cs.json();
+      const settings = await st.json();
+
+      // 作業行は日次ドキュメントにしか無い（一覧は集計だけ）。最新日の1本だけ引く。
+      const date = reports[0]?.date;
+      const r = date ? await fetch(`/api/reports/${date}`) : null;
+      const latest = r?.ok ? await r.json() : null;
+
+      return { live: true, passport, reports, cards, settings, latest };
+    }
+  } catch {
+    /* 次を試す */
+  }
+
+  try {
+    const r = await fetch("../preview.json");
+    if (r.ok) {
+      const s = await r.json();
+      return {
+        live: false, snapshotAt: s.snapshotAt,
+        passport: s.passport, reports: s.reports, cards: s.cards,
+        settings: s.settings, latest: s.latest ?? null,
+      };
+    }
+  } catch {
+    /* 何も取れなかった */
+  }
+
+  return { live: true, passport: null, reports: [], cards: [], settings: null, latest: null };
+}
+
+/* 静的配信ではライブのデータが無い。スナップショットであることを必ず明示する。 */
+function snapshotBanner(at) {
+  const el = document.createElement("div");
+  el.style.cssText = "position:fixed;top:0;left:0;right:0;z-index:99;background:#F7EFDD;color:#8A6520;font-size:12px;font-weight:700;padding:8px 14px;text-align:center;border-bottom:1px solid #E6D6BF";
+  el.textContent = `スナップショット（${at} 時点）。サーバに繋がっていないため、記録や保存はできません。`;
+  document.body.prepend(el);
+  document.body.style.paddingTop = "34px";
+}
+
+const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]));
+const shortHash = (h) => (h ? `${h.slice(0, 8)}…${h.slice(-4)}` : null);
+
+/* 実行回数は metric（例:「実行 15回（Web検索 7 / …）」）から読めたときだけ出す。
+   読めない書き方のときは数字を作らない。 */
+const callsOf = (metric) => String(metric ?? "").match(/([\d,]+)\s*回/)?.[1] ?? null;
+
+const STATUS = {
+  draft: { cls: "draft", label: "下書き・未記録" },
+  recorded: { cls: "ok", label: "記録済み" },
+  anchored: { cls: "ok", label: "オンチェーン記録済み" },
+  pending: { cls: "draft", label: "照合予定" },
+};
+
+function render(d) {
+  const p = d.passport;
+  const reports = d.reports ?? [];
+  const earned = (d.cards ?? []).filter((c) => c.earned);
+
+  // toISOString は UTC。JST の朝はまだ前日になるので、ローカル日付で出す。
+  document.getElementById("today").textContent = new Date().toLocaleDateString("sv-SE");
+
+  // ── ヒーロー ────────────────────────────────────────────────
+  const name = p?.displayName ?? "—";
+  document.getElementById("heroName").textContent = name;
+  document.getElementById("heroAv").textContent = [...(p?.agentName ?? "?")][0];
+
+  // 収集元・docHash・稼働日数は passport には無い。settings と日報の実データから組む。
+  const sources = (d.settings?.sources ?? []).join(" · ");
+  const hash = shortHash(reports.find((r) => r.docHash)?.docHash);
+  document.getElementById("heroSub").textContent =
+    [sources || null, hash, reports.length ? `稼働 ${reports.length}日` : null].filter(Boolean).join(" · ") || "—";
+
+  document.getElementById("heroStats").innerHTML = [
+    ["累計タスク", (p?.totalCalls ?? 0).toLocaleString(), "✓ ログと一致"],
+    ["平均成功率", p?.avgSuccess == null ? "—" : `${p.avgSuccess}<small>%</small>`, "盛れない"],
+    ["連続日数", `${p?.streak ?? 0}<small>日</small>`, "記録済みの連続"],
+    ["達成カード", earned.length, "パスポートに積算"],
+  ].map(([l, n, k]) => `<div class="stat"><div class="l">${esc(l)}</div><div class="n">${n}</div><div class="k">${esc(k)}</div></div>`).join("");
+
+  // ── 直近の日報 ──────────────────────────────────────────────
+  const L = reports[0];
+  const box = document.getElementById("latestCard");
+  if (!L) {
+    box.innerHTML = `<h3 class="ct">直近の日報</h3><div class="empty">まだ日報がありません。<code>clubs-nippo</code> を走らせると、ここに出ます。</div>`;
+  } else {
+    const badge = STATUS[L.status] ?? STATUS.draft;
+    // 「上位の作業行」＝実行回数の多い順。日次ドキュメントの並びは生成順なので、そのままでは上位にならない。
+    // 回数が読めないブロックは末尾へ（順位を作るために数字を捏造しない）。
+    const blocks = [...(d.latest?.workBlocks ?? [])]
+      .sort((a, b) => Number(callsOf(b.metric)?.replace(/,/g, "") ?? -1) - Number(callsOf(a.metric)?.replace(/,/g, "") ?? -1))
+      .slice(0, 3);
+    const lines = blocks.map((b) => {
+      const n = callsOf(b.metric);
+      return `<div class="line">${n ? `<span class="n">${esc(n)}回</span>` : ""}<span class="t">${esc(b.title)}</span>${b.tool ? `<span class="via">${esc(b.tool)}</span>` : ""}</div>`;
+    }).join("");
+
+    box.innerHTML = `
+      <h3 class="ct">直近の日報（${esc(L.date.slice(5).replace("-", "/"))}・${esc(L.w)}曜） <span class="chip ${badge.cls}">${esc(badge.label)}</span></h3>
+      <div class="rstats"><b>${L.totalCalls}</b> 実行 · 成功率 <b>${L.successRate ?? "—"}%</b> · 実働 約<b>${L.activeHours}h</b>${L.docHash ? ' <span class="ok">✓ ログと一致</span>' : ""}</div>
+      ${lines}
+      <div class="acts">
+        <a class="a-ok" href="../reports/edit.html?date=${encodeURIComponent(L.date)}">✏️ 編集して記録する</a>
+        <a class="a-line" href="../reports/">日報の一覧</a>
+      </div>`;
+  }
+
+  // ── 最近の達成 ──────────────────────────────────────────────
+  const recent = [...earned].sort((a, b) => String(b.earnedAt ?? "").localeCompare(String(a.earnedAt ?? ""))).slice(0, 4);
+  document.getElementById("ach").innerHTML = recent.length
+    ? recent.map((c) => `<div class="m"><div class="mc" data-tw="${esc(c.tw)}"></div><div class="ml">${esc(c.name)}</div></div>`).join("")
+    : `<div class="empty">まだ獲得したカードはありません。</div>`;
+  document.querySelectorAll(".mc[data-tw]").forEach((el) => { el.innerHTML = TW[el.dataset.tw] ?? ""; });
+
+  // ── 実績カード（直近7日） ───────────────────────────────────
+  // 「今週」は日報の実データから積む。無い週は帯ごと出さない（0 の帯を出すと、成果が無いのに
+  //   カードができたように読める）。
+  const week = reports.filter((r) => r.date >= new Date(Date.now() - 6 * 864e5).toISOString().slice(0, 10));
+  if (week.length) {
+    const calls = week.reduce((s, r) => s + (r.totalCalls ?? 0), 0);
+    const rates = week.map((r) => r.successRate).filter((x) => typeof x === "number");
+    const avg = rates.length ? Math.round(rates.reduce((a, b) => a + b, 0) / rates.length) : null;
+    document.getElementById("shareSub").textContent =
+      `${name} の直近7日 ── ${calls}タスク${avg == null ? "" : `・成功率${avg}%`}・連続${p?.streak ?? 0}日`;
+    document.getElementById("share").hidden = false;
+  }
+}
+
+(async () => {
+  const d = await load();
+  if (d.live === false) snapshotBanner(d.snapshotAt);
+  render(d);
+})();
+</script>
+</body>
+</html>