使い方マニュアル

Pega Constellation Mock Kit — Pega 25.1 / Cosmos React 8.4.3-2

概要

Pega の Constellation（Cosmos React）で、実際にケースを開いたときの画面をバックエンド無しで再現するモックキットです。ライブラリは Pega が npm 公開しているものを、この環境の Pega 25.1 に対応する版で固定しています。

@pega/cosmos-react-core@8.4.3-2   (dist-tag: pega-25.1.0)
@pega/cosmos-react-work@8.4.3-2   (同上)

type 名は Pega の react-sdk-components の components/template/ に合わせてあります。Pega を知っている人にも AI にもそのまま通じます。

クイックスタート

mock.html をダブルクリックで開きます。サーバー不要でそのまま動きます。
モックを変えたいときは、mock.html の中の次のブロックだけを書き換えます。

<script type="application/json" id="view-config"> ... </script>

1 ファイル完結（約2.3MB）です。JS を別ファイルにすると file:// から開いたときに CORS で弾かれるため、すべて HTML に埋め込んでいます。このファイル 1 枚をコピーすれば、どこでも同じモックが動きます。

view-config の構造

portal（アプリ全体の枠）と view（画面本体）の 2 つに分かれます。

{
  "portal": {
    "appName":    "与信管理",              // アプリバー左の名前
    "portalName": "審査担当者ポータル",
    "operator":   { "name": "髙野 泰河" }, // 右上のアバター
    "nav":        [ { "id":"home", "name":"ダッシュボード", "icon":"home", "active":true } ],
    "caseTypes":  ["与信審査", "限度額変更"]  // 「+ 新規」から出るケースタイプ
  },
  "view": { "type": "CaseView", ... }
}

view が CaseView のときは、caseId / heading / subheading / caseType / stages / currentStage / summary（primary・secondary）/ tabs / tasks / actions / promotedActions を持てます。

ページの type

type	用途	必要なキー
`CaseView`	ケース画面	`caseId` `heading` `stages` `summary` `tabs` `actions`
`OneColumn`	1 カラム	`a`
`TwoColumn`	2 カラム	`a` `b`
`WideNarrow` / `NarrowWide`	幅違いの 2 カラム	`a` `b`
`ListPage`	一覧	`title` `items[]`
`Empty`	空状態	`message`

中身の type（入れ子にできる）

type	出るもの
`Details`	読み取り専用のフィールド一覧（`fields[]`）
`DefaultForm`	入力フォーム（`fields[]`）
`ListPage`	リスト
`TwoColumn` ほか	さらに入れ子

項目の type

Text（既定） / TextArea / Dropdown（options[]） / Checkbox / Switch

アクションとモーダル

actions / promotedActions に content を書くと、クリックでモーダルが開き、その中にフォームが描画されます。promotedActions はメニューの外に出ます（ケースヘッダ上のボタン）。

"actions": [
  { "id": "reject", "text": "差戻し", "submitText": "差し戻す",
    "content": { "type": "DefaultForm", "title": "差戻し理由",
      "fields": [
        { "label": "理由区分", "type": "Dropdown", "options": ["書類不備","その他"] },
        { "label": "詳細", "type": "TextArea" }
      ] } }
]

タブ本文の見た目（自動）

CaseView の各タブ本文は自動で白いカード＋テーマ準拠の余白に収まります（Work area と一律）。ListPage（一覧）も同じ余白で表示されます。JSON 側でカードや余白を足す必要はありません。content に中身の type を書くだけです。

テーマ

デモ画面の右下のドロップダウンでその場で切り替えられます（26種、URL 編集不要）。選ぶと URL の ?theme= も同期するので、その状態をそのまま共有・リロードで再現できます。URL で直接指定してもかまいません。

mock.html?theme=bootes2025Theme

既定は bootes2025Theme（Pega 25.1 OOTB の標準に近い 2025 世代テーマ）。
「2026」という名前のテーマは存在しません。この環境は Pega 25.1 で、最新世代は 2025 系です: bootes2025Theme / andromeda2025Theme / cygnus2025Theme / dorado2025Theme / equuleus2025Theme（bootes は Dark 版あり）。
ほかに旧世代 aries2023Theme や特殊系（vibrant / elegant / concierge / pastel / artistic / wss など、多くに Dark 版）。全一覧は ZIP 内の reference/themes.json。

Claude Code で使う

ZIP を展開したフォルダには CLAUDE.md（作業レシピ）が入っています。Claude Code はこれを最初に読み、mock.html の <script id="view-config"> を編集する流れでモックを生成できます。要点は次のとおりです。

ビルドは不要。中身を変えるだけなら JSON を書き換えて再読込するだけです。assets/ や mock.html の JS 部分は触りません。
カードや余白を JSON で足さない。タブ本文・一覧は自動で白カード＋余白に入ります。
未対応の type を発明しない。上の一覧が全てです。未対応を書くと画面に [未対応の type: xxx] と出ます。
アイコン名は実在するものだけ。nav の icon は budicon 名のみ。他は "streamline:chart-pie" とセットを明示できます。

レンダラ自体（対応する type やレイアウト）を拡張したいときだけ、ZIP 内の build/ で npm install → npx vite build --config vite.config.mock.js を実行します。

同梱物（ZIP の中身）

ファイル	役割
`mock.html`	主役。1 ファイル完結。JSON 差し替えでモックが変わる
`CLAUDE.md`	Claude Code 用の作業レシピ（最初に読まれる慣習ファイル）
`README.md`	語彙・キー一覧・テーマ・制約の詳細
`build/`	レンダラを拡張したいとき用のソース（`npm install`＋vite）
`reference/`	26テーマのトークン・アイコン1,197個の SVG・実コンポーネント CSS
`case.html` / `components-catalog.html`	参考実装とコンポーネント単体カタログ

分かっている制約

フォントは同梱していません。CSS が Open Sans（2025 系テーマは Roboto Flex）を参照するので、オンラインでは Google Fonts を読みます。オフラインだとフォントだけ代替になります。
左ナビがアイコン列なのは Constellation の実挙動です（ホバー／クリックで展開）。
アイコンは 2 セットあります（budicon 既定 / streamline）。存在しない名前を書くと実行時フェッチに落ちて失敗します。名前は reference/constellation-icons.svg の id（cos- を除いた部分）から選びます。
対応している type は本マニュアルの表がすべてです。バックエンドには繋がず、入力は保存されません。

ライセンス

同梱の Cosmos は Cosmos License 1.0（Apache 2.0 ベース＋「Pega 製品と併せて使うこと」）です。Pega アプリのモック作成は用途内です。Pega と無関係な製品の UI には使えません。