@takagaki/cortex-decisions-viewer 0.12.23 → 0.12.24

package/dist/build.js

@@ -36,7 +36,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.PROJECT_ICON_EXTS = void 0;
 exports.sanitizeBody = sanitizeBody;
+exports.findProjectIcon = findProjectIcon;
 exports.readFleetSources = readFleetSources;
 exports.readHarnessSchedules = readHarnessSchedules;
 exports.readHarnessShelf = readHarnessShelf;
@@ -247,6 +249,48 @@ function resolveKnowledgeRoot(decisionsDirAbs) {
     }
     return null;
 }
+/**
+ * 案件アイコン（#348）で受け付ける拡張子。**探索の順でもある**（2枚あれば先頭を使う）。
+ *
+ * **Lambda 側（infra/lambda/intake/logic.mjs の PROJECT_ICON_EXTS）と同じ並びにすること。**
+ * 片方だけ増やす・並べ替えると、intake が書いた名前を build が拾わない（＝設定したのに
+ * 画面に出ない）か、2枚あるときに intake と build が別の1枚を選ぶ。
+ * 突き合わせは viewer/test/project-icon-parity.test.mjs が機械的に見張る。
+ *
+ * `.jpeg` は入れない——intake は `.jpeg` を `jpg` へ正規化して書くので、
+ * リポジトリにその名前は生まれない（拾うと「どちらが正か」が2つになる）。
+ */
+exports.PROJECT_ICON_EXTS = ["png", "jpg", "webp"];
+/**
+ * `Cortex/icon.<ext>` を探す。無ければ undefined（キーごと出さないため）。
+ *
+ * **2枚以上あっても落とさない。** 人が GitHub 側で直接置くと起こりうる形なので、
+ * 固定順の先頭1枚に倒し、どれを使ったかをビルドログに残す（黙って選ぶと
+ * 「差し替えたのに変わらない」の原因が画面からもログからも分からなくなる）。
+ */
+async function findProjectIcon(knowledgeRoot) {
+    if (!knowledgeRoot)
+        return undefined;
+    const found = [];
+    for (const ext of exports.PROJECT_ICON_EXTS) {
+        const file = `icon.${ext}`;
+        const srcAbs = path.join(knowledgeRoot, file);
+        try {
+            const st = await node_fs_1.promises.stat(srcAbs);
+            if (st.isFile())
+                found.push({ file, repoPath: `${path.basename(knowledgeRoot)}/${file}`, srcAbs });
+        }
+        catch {
+            // 無いだけ（探索なので握りつぶす）
+        }
+    }
+    if (!found.length)
+        return undefined;
+    if (found.length > 1) {
+        console.warn(`案件アイコンが複数あります（${found.map((f) => f.file).join(", ")}）。${found[0].file} だけを使います`);
+    }
+    return found[0];
+}
 /**
  * スペースごとの Backlog キーの登録状況で、画面へ運んでよい値。
  *
@@ -1812,6 +1856,8 @@ async function build(opts) {
     // 走るのは latestGeneratedPaths と同じ **リポジトリルート**（process.cwd()）——
     // Decisions ディレクトリで実行すると pathspec に一致せず常に空になる
     const aiHistory = (0, repo_1.collectAiChangeHistory)(process.cwd());
+    // 案件アイコン（#348）。Cortex構成でなければ undefined（旧レイアウトには置き場が無い）
+    const projectIcon = await findProjectIcon(knowledgeRoot);
     const site = {
         title: opts.title,
         generatedAt: opts.generatedAt,
@@ -1862,6 +1908,9 @@ async function build(opts) {
         // 同上（短縮記法にしない）。**undefined のまま渡すのが仕様**——「棚が無い」と
         // 「棚が空」を画面が言い分けるための材料で、ここで [] へ倒すと区別が消える
         harnessShelf: harnessShelf,
+        // 同上（短縮記法にしない）。**undefined ならキーごと出さない**——画面は
+        // 「アイコンがある／無い」をキーの有無で見る（空の器を通さない）
+        projectIcon: projectIcon ? { file: projectIcon.file, repoPath: projectIcon.repoPath } : undefined,
         // null（無い・壊れ・version違い）は undefined へ落とす——SiteData の
         // 「知らないことはキーが無いことで表す」に合わせる（空の器を通さない）
         // 空の器は通さない（0件なら undefined = キーごと出さない）
@@ -1869,6 +1918,15 @@ async function build(opts) {
     };
     // サムネイル（デザイン画面等）をサイトに同梱し、ノードのパスをサイト内相対に書き換える
     await node_fs_1.promises.mkdir(outAbs, { recursive: true });
+    // 案件アイコン（#348）を site/ 直下へ同梱する。
+    // **先に3候補を消す。** 出力ディレクトリは丸ごと作り直されないので、
+    // 「置いてビルド → 外してビルド」をすると古い画像がファイルとして残り、
+    // site-data には出ていないのに URL 直打ちで前のアイコンが見えてしまう
+    for (const ext of exports.PROJECT_ICON_EXTS) {
+        await node_fs_1.promises.rm(path.join(outAbs, `icon.${ext}`), { force: true });
+    }
+    if (projectIcon)
+        await node_fs_1.promises.copyFile(projectIcon.srcAbs, path.join(outAbs, projectIcon.file));
     let thumbIndex = 0;
     for (const node of graph.nodes) {
         if (!node.thumb)

package/dist/render.js

@@ -2495,6 +2495,30 @@ a:hover { text-decoration: underline; }
   padding-bottom: 6px; border-bottom: 1px solid var(--border);
 }
 .home-grounding > .home-grounding-title:first-child { margin-top: 0; }
+/* ---- 案件アイコン（#348）----
+   Home のタイトルの左に丸い枠を置く。ポータルの一覧カード（ProjectIcon.tsx）と
+   同じ「丸・cover」にする——同じ画像が2つの画面で別の切れ方をすると、
+   「設定したのと違う絵が出ている」と読まれる */
+.home-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
+.home-title-wrap { flex: 1 1 320px; min-width: 0; }
+.project-icon { flex: 0 0 auto; }
+/* 未設定は破線（置き場が空いていることを見せる）・設定済みは実線 */
+.project-icon-frame {
+  width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
+  border: 2px dashed var(--border); background: #f6f7f9;
+  display: flex; align-items: center; justify-content: center;
+  padding: 0; cursor: pointer;
+}
+.project-icon-frame.project-icon-filled { border-style: solid; }
+/* 受け口が無い案件では押せないので、押せる見た目にしない */
+.project-icon-frame:not(button) { cursor: default; }
+.project-icon-img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.project-icon-empty { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.3; }
+.project-icon-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
+/* 結果の行はタイトルの下へ回す（枠の横に入れると72pxの高さに押し込まれる） */
+.project-icon-status { flex-basis: 100%; font-size: 13px; }
+.project-icon-status:empty { display: none; }
+.project-icon-status-error { color: #b91c1c; }
 /* ---- レコード詳細の「AIによる最近の変更」（リポジトリの git 履歴 由来）----
    カードは詳細ページの提案（.proposals）と同系色にする——どちらも
    「AIがやったこと・言っていることを読む」もので種類が同じ。
@@ -4302,6 +4326,215 @@ ${deriveCapTile.toString()}
     app.appendChild(sec);
   }
 
+  // ---------- 案件アイコン（#348） ----------
+  //
+  // ポータルの案件一覧はカードにアイコンを出す。置き場はこの案件のリポジトリの
+  // Cortex/icon.<ext> で、**設定する口はここ（Home）にしかない**——ポータル側に
+  // 置くと「誰の案件か」の判定を先に作らねばならず、案件を知っている人が
+  // その場で直せる形にならない。
+  //
+  // 保存はビルドを待たずに画面へ反映する（mirror）。恒久化は次のビルドで
+  // site-data ごと焼き直されるので、mirror はこのタブが開いているあいだだけ。
+  // 上限はサーバ側（logic.mjs の PROJECT_ICON_MAX_BYTES）と同じ値。画面の門は
+  // 「送る前に断る」ためのもので、正本はサーバ側
+  var PROJECT_ICON_MAX_BYTES = 1024 * 1024;
+  // 保存直後の反映。null＝ビルド時の値（SITE.projectIcon）をそのまま使う。
+  // { file, src } なら設定済み、{ removed: true } なら「今この画面では外れている」
+  var projectIconMirror = null;
+  // いま img に載せている blob:。差し替え・解除のたびに revoke する（掴んだままだと
+  // 選び直すたびにファイルの実体がメモリに積み上がる）
+  var projectIconBlobUrl = null;
+
+  /** いま画面に出すべきアイコン（無ければ null） */
+  function projectIconCurrent() {
+    if (projectIconMirror) {
+      return projectIconMirror.removed ? null : { file: projectIconMirror.file, src: projectIconMirror.src };
+    }
+    var p = SITE.projectIcon;
+    // ビルドが同梱した画像はサイト内の相対パス。**外部URLは載せない**
+    return p ? { file: p.file, src: p.file } : null;
+  }
+
+  /**
+   * 名前から拡張子を引く（jpeg は jpg へ寄せる）。許可外・拡張子なしは null。
+   * **サーバ側（logic.mjs の projectIconExtOf）と同じ判断**を画面でも先にやるのは、
+   * 通らないと分かっているファイルを1MB 送ってから断らないため
+   */
+  function projectIconExtOfName(name) {
+    var m = /\\.([A-Za-z0-9]+)$/.exec(String(name || ""));
+    if (!m) return null;
+    var e = m[1].toLowerCase();
+    if (e === "jpeg") e = "jpg";
+    return e === "png" || e === "jpg" || e === "webp" ? e : null;
+  }
+
+  /** callIntake の戻り（fetch の Promise）を { ok, j } に畳む（submitIntake と同じ形） */
+  function intakeJson(req) {
+    return req.then(function (r) { return r.json().then(function (j) { return { ok: r.ok, j: j }; }); });
+  }
+
+  /**
+   * アイコンの枠（出さないときは null）。
+   *
+   * **押せない枠は出さない。** 受け口（intake）が無く画像も無い案件では、枠ごと出さない
+   *（「＋ 画像を選ぶ」を出して押せないのが一番悪い）。画像だけある案件では画像を出し、
+   * 押せる導線は付けない。
+   *
+   * @param status 結果を書く行（枠を描き直しても残る・呼び出し側が持つ）
+   */
+  function renderProjectIcon(status) {
+    var intake = SITE.intake;
+    var cur = projectIconCurrent();
+    if (!intake && !cur) return null;
+
+    var box = el("div", { class: "project-icon", id: "project-icon" });
+    function setStatus(msg, isError) {
+      status.className = "project-icon-status" + (isError ? " project-icon-status-error" : "");
+      status.textContent = msg || "";
+    }
+    // 枠だけを差し替える。status は外にあるので、書いた結果は描き直しでも消えない
+    function redraw() {
+      var next = renderProjectIcon(status);
+      if (next && box.parentNode) box.parentNode.replaceChild(next, box);
+      return next;
+    }
+    var ui = { status: status, setStatus: setStatus, redraw: redraw, input: null, buttons: [] };
+    ui.disable = function (flag) {
+      ui.buttons.forEach(function (b) { b.disabled = !!flag; });
+    };
+
+    // **受け口が無ければ button にしない。** 押せる形（フォーカスが当たる・指差しの
+    // カーソルが出る）で何も起きないのが、画面の嘘のうちで一番たちが悪い
+    var frame = el(intake ? "button" : "div", {
+      class: "project-icon-frame" + (cur ? " project-icon-filled" : ""),
+      "aria-label": "案件アイコン",
+    });
+    if (intake) frame.setAttribute("type", "button");
+    if (cur) {
+      var img = el("img", { class: "project-icon-img", src: cur.src, alt: "案件アイコン" });
+      // **onerror 属性で書かない（CSP でインラインハンドラは動かない）。**
+      // blob: が配信先の img-src で拒まれることがあるので、そのときは文字に倒す
+      img.addEventListener("error", function () {
+        if (!img.parentNode) return;
+        img.parentNode.replaceChild(el("span", { class: "project-icon-empty", text: "保存済み" }), img);
+      });
+      frame.appendChild(img);
+    } else {
+      frame.appendChild(el("span", { class: "project-icon-empty", text: intake ? "＋ 画像を選ぶ" : "未設定" }));
+    }
+    box.appendChild(frame);
+
+    if (intake) {
+      var input = el("input", { type: "file", accept: "image/png,image/jpeg,image/webp", hidden: "" });
+      ui.input = input;
+      input.addEventListener("change", function () {
+        var f = input.files && input.files[0];
+        // **読んだらすぐ value を戻す**（成功時だけ戻す形だと、形式で断られた直後に
+        // 同じファイルを選び直しても change が飛ばず、直す経路がここで死ぬ）
+        try { input.value = ""; } catch (e) {}
+        if (f) setProjectIcon(f, ui);
+      });
+      var choose = el("button", { class: "project-icon-choose", type: "button", text: cur ? "画像を変える" : "画像を選ぶ" });
+      choose.addEventListener("click", function () { input.click(); });
+      // 枠を押すのも「選ぶ」と同じ（丸を押したくなるので、押せる場所を分けない）
+      frame.addEventListener("click", function () { input.click(); });
+      ui.buttons.push(choose, frame);
+      var actions = el("div", { class: "project-icon-actions" }, [choose]);
+      if (cur) {
+        var remove = el("button", { class: "project-icon-remove", type: "button", text: "画像を外す" });
+        remove.addEventListener("click", function () { removeProjectIcon(ui); });
+        ui.buttons.push(remove);
+        actions.appendChild(remove);
+      }
+      actions.appendChild(input);
+      box.appendChild(actions);
+    }
+    return box;
+  }
+
+  /** 保存先（GitHub）の1行。submitIntake の modal-paths と同じ組み立て */
+  function projectIconPathBox(repo, p) {
+    var br = SITE.branch || "main";
+    var href = "https://github.com/" + repo + "/blob/" + encodeURIComponent(br) + "/" + p.split("/").map(encodeURIComponent).join("/");
+    return el("div", { class: "modal-paths" }, [
+      el("div", { class: "modal-paths-label", text: "保存先（GitHub）:" }),
+      el("a", { class: "modal-path", href: href, target: "_blank", rel: "noopener", text: p }),
+    ]);
+  }
+
+  /**
+   * 画像を1枚選んで保存する。
+   *
+   * **画面側でも門を張る。** サーバ側（planProjectIconSet）が正本だが、ここで断れる
+   * ものを送ると、1MB を上げきってから「大きすぎます」と言うことになる
+   */
+  async function setProjectIcon(file, ui) {
+    function fail(msg) { ui.setStatus("✗ " + msg, true); ui.disable(false); }
+    // 画面側の門。**サーバ側と同じ文言**で、送る前に断る（fail で「✗ 」を揃える）
+    if (!projectIconExtOfName(file.name)) return fail("PNG・JPEG・WebP の画像を選んでください");
+    if (file.size > PROJECT_ICON_MAX_BYTES) return fail("1MB までの画像を選んでください");
+    if (file.size === 0) return fail("画像が空です（0 バイト）。別の画像を選んでください");
+
+    var intake = SITE.intake;
+    var ctype = file.type || "application/octet-stream";
+    ui.disable(true);
+    ui.setStatus("アップロード中…", false);
+
+    var pres;
+    try {
+      pres = await intakeJson(callIntake("presign", {
+        projectKey: intake.projectKey, filename: file.name, contentType: ctype, purpose: "project-icon",
+      }));
+    } catch (net) { return fail("サーバーに接続できませんでした。通信環境を確認して、もう一度お試しください。"); }
+    if (!pres.ok || !pres.j.url) return fail((pres.j && pres.j.message) || "アップロードURLの取得に失敗しました");
+
+    // 署名付きURLへの PUT だけは intake ではないので素の fetch（submitIntake と同じ）
+    var put;
+    try {
+      put = await fetch(pres.j.url, { method: "PUT", headers: { "content-type": ctype }, body: file });
+    } catch (net2) { return fail("アップロードに失敗しました（もう一度お試しください）"); }
+    if (!put.ok) return fail("アップロードに失敗しました（" + put.status + "）");
+
+    var saved;
+    try {
+      saved = await intakeJson(callIntake("project-icon-set", {
+        projectKey: intake.projectKey, key: pres.j.key, filename: file.name,
+      }));
+    } catch (net3) { return fail("サーバーに接続できませんでした。通信環境を確認して、もう一度お試しください。"); }
+    if (!saved.ok) return fail((saved.j && saved.j.message) || "保存できませんでした");
+
+    var repoPath = (saved.j && saved.j.path) || "";
+    if (projectIconBlobUrl) { try { URL.revokeObjectURL(projectIconBlobUrl); } catch (e) {} }
+    projectIconBlobUrl = URL.createObjectURL(file);
+    projectIconMirror = { file: repoPath.split("/").pop() || "icon", src: projectIconBlobUrl };
+    // **同じファイルをもう一度選べるようにする。** value を戻さないと、選び直しても
+    // change が飛ばない（形式で断られた直後に選び直す経路がここで死ぬ）
+    if (ui.input) ui.input.value = "";
+    ui.redraw();
+    ui.setStatus("", false);
+    ui.status.appendChild(el("div", { text: "✓ 保存しました。数分後にポータルの一覧に反映されます。" }));
+    if (repoPath && saved.j.repo) ui.status.appendChild(projectIconPathBox(saved.j.repo, repoPath));
+  }
+
+  /** 画像を外す。**確認は出さない**——押し間違えても、もう一度選び直せば戻る操作 */
+  async function removeProjectIcon(ui) {
+    function fail(msg) { ui.setStatus("✗ " + msg, true); ui.disable(false); }
+    ui.disable(true);
+    ui.setStatus("外しています…", false);
+    var res;
+    try {
+      res = await intakeJson(callIntake("project-icon-remove", { projectKey: SITE.intake.projectKey }));
+    } catch (net) { return fail("サーバーに接続できませんでした。通信環境を確認して、もう一度お試しください。"); }
+    if (!res.ok) return fail((res.j && res.j.message) || "外せませんでした");
+    if (projectIconBlobUrl) {
+      try { URL.revokeObjectURL(projectIconBlobUrl); } catch (e) {}
+      projectIconBlobUrl = null;
+    }
+    projectIconMirror = { removed: true };
+    ui.redraw();
+    ui.setStatus("✓ 外しました。数分後にポータルの一覧に反映されます（案件名の頭文字に戻ります）。", false);
+  }
+
   // ---------- ホーム（着地画面: Markdownをそのまま表示） ----------
   function renderHome() {
     var h = SITE.home;
@@ -4319,10 +4552,18 @@ ${deriveCapTile.toString()}
         text: "最終更新: " + SITE.homeUpdatedAt,
       }));
     }
-    var titleWrap = el("div", {}, [ titleEl ]);
+    var titleWrap = el("div", { class: "home-title-wrap" }, [ titleEl ]);
     var ai = h.fm ? adoptionInfo(h.fm.adoption) : null;
     if (ai) titleWrap.appendChild(el("span", { class: "chip adoption-" + String(h.fm.adoption), text: ai.label }));
-    head.appendChild(titleWrap);
+    // 案件アイコン（#348）はタイトルの左。**枠と結果の行は同じ flex 行に置く**
+    // ——結果を枠の横に入れると 72px の高さに押し込まれて読めない
+    var homeHead = el("div", { class: "home-head" });
+    var iconStatus = el("div", { class: "project-icon-status", "aria-live": "polite" });
+    var iconBox = renderProjectIcon(iconStatus);
+    if (iconBox) homeHead.appendChild(iconBox);
+    homeHead.appendChild(titleWrap);
+    if (iconBox) homeHead.appendChild(iconStatus);
+    head.appendChild(homeHead);
     var homeEditRow = el("div", { class: "detail-actions-row" }, [
       el("a", { class: "ai-edit-btn", href: codeUrl(HOME_EDIT_PROMPT), target: "_blank", rel: "noopener", text: "AIで編集" }),
     ]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takagaki/cortex-decisions-viewer",
-  "version": "0.12.23",
+  "version": "0.12.24",
   "description": "Cortexの意思決定記録（Decisions/*.md）を静的サイトにビルドして閲覧する。各レコードに「Edit on GitHub」リンクを付与する。",
   "license": "UNLICENSED",
   "private": false,