feat(simulator): オートマトン整合の観測 UI へ全面改修 — 統合ログ・部品操作・遷移マップ刷新（実機評価 3 巡）#5
Open
takasek wants to merge 77 commits into
Open
feat(simulator): オートマトン整合の観測 UI へ全面改修 — 統合ログ・部品操作・遷移マップ刷新（実機評価 3 巡）#5takasek wants to merge 77 commits into
takasek wants to merge 77 commits into
Conversation
SimInteraction.scope（document/component/variant）と SimulatorData.graph （nodes・edges）はまだ実装がなく、13 件が red（TypeError: undefined.scope / undefined.graph）であることを確認済み。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
各 interaction がどの階層（document common / component common / variant固有） 由来かを scope として持たせ、simulator UI の「有効範囲を明示」要求（simulator.shitae ラフスケッチ）に応える。graph は全 module の全 component をノードとし、 push/present/goto/switch かつ target.kind==='full' の静的遷移を (from,to) 重複除去で エッジ化する。documentCommon 由来の遷移は発火元 component が静的に定まらないため エッジ化しない。 pnpm --filter @shitae/simulator test: 73 passed（うち extract.test.ts の新規 13 件は 実装前は TypeError: undefined.scope / undefined.graph で red だったことを確認済み）。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
toast 全廃・snapshot 全状態巻き戻し・back() の trace pop 等 Task 2 仕様の 受け入れ基準 (a)(b)(c) を vm テストとして先に書く（Red）。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
stack-bar breadcrumb をトレースログ（{label, snapshot} の配列、末尾が現在地）
に置き換え、遷移イベントをタップすると stack・sharedVariants・overlays が
その時点へ全状態巻き戻る。effect・set・show/hide・警告は append-only の
イベントログへ振り分け、showToast とその DOM/CSS は撤去した。
back() は成功時にトレースログ末尾を取り除く（新規イベントは積まない）設計
とし、戻れない（stack 長 1 または wall）ときは戻るボタンを DOM から消す。
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Task 3: 有効範囲明示・カテゴリ折り畳み・ラベル横並びへ改修する前段として、 複数ラベル操作の横並びボタン・[TRUE] 単一ボタン・scope 3種の分類・ pendingChoice 系機構の廃止を検証する vm テストを先に赤くする。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
buildHtml の埋め込み JS を、pendingChoice/choice-panel/handleChoice/ handleDocCommon による二段階選択とdocument common専用帯から、単一機構へ 書き換える。 - 操作一覧を currentInteractions()/docCommonInteractions() の scope （'variant'|'component'|'document'）で3分類し、各カテゴリを <details open> の自己完結折り畳みで描画する。空カテゴリは出さない。 - 各行動は選択肢ラベルごとにボタンを横並び提示する。choices が空の 行動は [TRUE] ラベル1つのボタンとして扱う。クリックで prelude を 先に適用してから該当 choice の results を適用する（runChoice）。 - 「どの画面でも」帯（doc-common）を廃止し、document common は操作一覧の document カテゴリへ統合する。gate フィルタ・3階層 shadow の判定経路は 変更しない。 - overlay 側は UI 未変更（Task 4 の領分）。ただし共有していた pendingChoice を撤去したため、overlay の複数選択肢は暫定で先頭の choice を実行する（runChoice(interaction, 0)）。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
renderActionCategory が JSON.stringify(scope) の二重引用符文字列を onclick="..." の属性値へそのまま埋め込んでおり、属性が途中の " で 切れて全 choice-chip の onclick が壊れていた。scope は固定 3 値なので 単一引用符の JS 文字列リテラルへ変更する。併せて、複数ラベル選択 テストが「選んだ choice だけが走ったこと」を traceLog・stack で 縛らず全 choice 実行の regression を見逃す穴を塞ぐ。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
overlay-bar 廃止 → 本体同形カード化、複数ラベル選択の先頭固定解消、 handleOverlayInteraction の quote 衝突バグ根治を検証する vm テストを先に追加する （RED: 6 failed / 88 tests）。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
overlay-bar を廃止し、掲示中の各 component を本体と同じ形（タイトル・variant表示・ elements・scope カテゴリ折り畳み + ラベル横並び操作一覧）のカードとして本体の下に 描画する。renderScreenCard / renderActionCategories / renderElements を新設し 本体・掲示中カードの描画関数を共通化した（コピペ増殖を回避）。 掲示中カードの操作一覧カテゴリは component common / variant固有 の2種のみとし、 document common は出さない（発火判定はアクティブ画面基準のADR-0015であり掲示中 カードの所属ではないため）。ADR-0019（裸 gate は掲示中 component 自身の表示 variant で判定）・遷移の相対解決（アクティブフレーム基準）は無変更。 あわせて2件の既知の負債を解消した: - overlay 側 multi-choice が先頭選択肢固定（runChoice(interaction, 0)）に 縮退していた暫定実装を、本体と同じラベル横並び選択に解消 - handleOverlayInteraction の onclick 生成が JSON.stringify(name) を そのままdouble-quote属性へ埋め込み、name の内容次第で属性が壊れるバグを 根治——component名を直接埋め込まず表示順インデックス（cardIdx）で参照する 設計に変更した Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Task 5 Step 1（遷移マップ）の純関数 layoutGraph をこれから埋め込む前段として、 entry=rank0・エッジ沿いBFS・未到達ノードの隔離rank・rank内barycenter整列を vm テストで先に red にする。getElementById も id ごとにキャッシュするよう runSimulatorScript を拡張し、後続の hover プレビュー DOM 観測に備える。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
DATA.graph を dot 風レイヤードで配置するための rank/order 割当のみを 先に実装する（SVG 描画・クリック・hover は次コミット）。entry component を rank 0 としエッジ沿い BFS、未到達ノードは最終 rank の次へ隔離、rank 内は 前 rank 隣接ノードの barycenter で 1 パス整列する。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Task 5 Step 2〜4: SVG 描画・ノードクリック（goto 相当）・hover プレビュー・ onclick/onmouseenter のインデックス参照（quote 衝突回避）・gate 観測パネル 近接配置を先に red にする。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
DATA.graph を layoutGraph で配置し dot 風レイヤード SVG として gate 観測 パネル近くに <details> 折り畳みで配置する。ノードクリックは applyTransition の goto 分岐を再利用し（trace 追加・variant 解決は既存機構のまま）、hover は render() を経由しない #graph-preview の局所 DOM 更新にしてちらつきを避ける。 onclick/onmouseenter は component 名でなく DATA.graph.nodes の配列 インデックスで参照し quote 衝突を避ける（Task 3/4 の教訓）。 RGR の Red で「onclick="gotoNode(...)"」を静的 HTML 文字列（JS ソース自体）へ 誤って照合していた regex テストを、実際に render() した app.innerHTML への 照合へ修正した（ロジックの変更ではなくテストの誤りの是正）。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
indexOf > -1 の存在チェック2本だけでは gate-panel と graph-panel の 配置順が入れ替わる退行を検出できない。gate-panel が graph-panel より 先に現れる順序を縛るアサートへ置き換える。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
<details class="graph-panel"> が開閉状態を持たず、gotoNode → render() のたびに閉じてしまっていた。ノードクリック探索が遷移マップの主用途 （simulator.shitae のメイン画面常設領域）のため、gate 観測パネルの gatePanelOpen と同じ方式で graphPanelOpen を導入し、render() のたびに open 属性へ反映、ontoggle でネイティブ開閉と同期する。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
設計者フィードバック（2026-07-19）でエリアの意味が伝わらない・遷移マップから ありえないジャンプが起きる指摘を受けた。gotoNode 依存の旧テストを整理し、 gotoNode 不在・現在地ノードのハイライト追随・3ペインDOM構造と見出し・ gateパネル改名を検証する RED state を先に固定する。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
設計者フィードバック（2026-07-19）: エリアが何を示しているか分からず画面の 意味が伝わらない、遷移マップからのありえないジャンプはおかしい、という指摘に 対応する。 - #app の max-width:480px を廃し、左=トレースログ／中央上=現在の画面／ 中央下=遷移マップ／右=イベントログ+gateパネル の全幅3カラムグリッドへ - 各ペインに見出しと役割説明（pane-title/pane-desc）を追加 - 遷移マップの gotoNode・onclick・<details> 折り畳みを廃止して常時表示の 閲覧専用に変更。hover プレビューは維持 - 現在の画面.本体に対応するノードを module・name 一致で判定し graph-node-current クラスで強調表示、遷移のたびに追随させる - gate観測パネルを「画面外 component の姿切替（gate 試験用）」へ改名し 1行の説明文を追加。トグル開閉・variant 切替の機能は現状維持 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
タップ(遷移マップ.ノード)によるノードクリック遷移の行を削除し、遷移マップが 閲覧専用であること・現在の画面.本体に対応するノードのハイライトが遷移に 追随することをコメントへ反映した。3カラムのレイアウト確定（左=トレースログ、 中央上=現在の画面、中央下=遷移マップ、右=イベントログ+gate観測パネル）も 各要素行のコメントとして記録する。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
back の trace-pop 前提テストを新仕様（back も遷移イベントとして追記）へ 書き換え、画面内 back()・back(X) 多段巻き戻しの追記を縛るテストを追加。 オートマトン整合の観点で back を通常の遷移イベントとして扱う設計（Task 7）。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
back()・back(X)（画面内操作・物理戻るボタン共通の applyTransition 経路）が 成功した際の traceLog.pop() を全廃し、他の遷移語（push/present/switch/goto/ exit/dismiss）と同じ「stack が実際に変わったら追記」共通経路へ統合した。 トレースログ=実行された遷移の忠実な列というオートマトン理論の見立てに沿い、 undo はトレースクリックの巻き戻しのみに一本化する。back(X) の多段巻き戻し も stack を1回で切り詰めるため、追記も1件で済み「末尾＝現在地」不変条件が 自然に成立する（旧 M1 の根治）。壁で失敗した場合は従来どおり no-op のまま 警告をイベントログへ流し、trace には追記しない。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
左ペインのトレースログの上に、現在の frame スタックを @session・壁マーカー 付きで描画するスタック表示領域を新設する。push/present 後の描画・back 後に 縮む追随・見出しと役割説明を縛るテストを先に追加する（Task 7 受入基準c）。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
トレースログの上に、現在の frame スタックを上から現在地の順で列挙する スタック表示領域を追加した。各行に displayVariant(frame) で解決した component/姿、named session の @sessionName マーカー、壁 frame の記号 （▌）を添え、見出しと役割説明（プッシュダウン構成としての読み方）を 付けた。render() の呼び出しごとに追随し、トレースログとの兼用は解消した。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
対象セッション不在時の警告に、スタック表示と突き合わせて理解できるよう 現在のセッション一覧（重複除去・積み順）を併記する新形式を先にテスト化する （Task 7 受入基準d）。ゼロ件時の「なし」表示、dismiss での同形式適用も縛る。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Task 7 のランタイム変更（back の trace 追記化・スタック表示新設）に合わせ、 戻るボタン行の効果記述を「トレースログの末尾除去」から「トレースログに 遷移イベント追加」へ改め、main にスタック表示（トレースログの上、 プッシュダウン構成として読む）を追加した。check はエラー・警告ともゼロ。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
設計者ヒアリング 2 回の確定判断（back の trace 追記化・閲覧専用遷移マップ・スタック表示・要素階層と操作紐付け・3 ペイン構成・用語方針）を 1 判断 1 ADR の原則に沿って記録。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
要素の階層表示（Task 8）に備え、要素行を表示名 string から
{ name, ref: { module, name } | null } へ拡張する。ref は project 内で
定義済み component に解決する参照行だけが持つ——collection（{...}）や
未定義参照は ref: null。module はレキシカル解決済みの正準名（ADR-0018）。
判定は全 module 構築後の2パス目（pruneUnresolvedElementRefs）で行う——
convertComponent 単体では他 module が未構築の可能性があるため。
あわせて操作の対象紐付け（Task 8 の次段）に使う targetName を
SimInteraction へ追加した。
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Task 8 の UI 側受入基準: (a) ref 要素の <details open> 入れ子展開 （sharedVariants → initialVariant の姿解決追随込み） (b) 循環参照の 打ち切り表記 (c) 対象一致操作の要素行直下表示と不一致・対象なしの フラットリスト (d) scope バッジ 3 種。あわせて onclick が gate フィルタ済みリスト内インデックスとずれないこと、掲示中カードでも 同じ描画経路が効くことを縛る。旧 scope カテゴリ折り畳みテストは バッジ + 紐付けの新形式へ書き換えた（gate・ラベル横並び・実行機構の テストは不変）。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
画面カード（本体・掲示中共通の renderElementsAndActions）で、ref を持つ 要素を参照先 component の中身ごと <details open> で再帰展開する。展開 variant は sharedVariants → initialVariant のオートマトン整合の解決、 循環は展開経路上の (module,name) 再訪で「（循環）」を出して打ち切る。 targetName がトップレベル要素の表示名に一致した操作はその要素行の直下へ 紐付け、残りはフラットリストへ。scope はカテゴリ <details> を廃して 各操作行のバッジで示す（ADR-0022 5）。onclick は scope 固定キー + フィルタ済みリスト内インデックスのみ埋め込み、gate フィルタ・ラベル 横並びボタン・実行機構（runChoice / handleInteraction 系）は不変。 gate の presence 照合は要素構造化後も表示名（alias 優先）で行う。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Task 8 で scope カテゴリの <details> は廃止済み——「残る details」の説明を 要素階層（element-hierarchy）へ差し替える。アサーションは不変。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
前コミットの 4.4em は line-height 未指定（normal≈1.4）の 4 行 + border-box の上下 padding 12px に足りず、内容表示時に約 25px のシフトが残っていた。line-height 1.4 を 明示して予約量を決定的に導出し（4 行 = 5.6em + padding ≈ 1.1em）、min-height 6.8em で完全にレイアウト不動にする。テストも実寸ベース（≥6.7em + line-height 明示）で縛る。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
タブバー慣用句など部品要素への member 参照（対象.member）で member 情報が 落ちて `行動(対象)` としか表示されず、どの子要素への上書きか読み取れなかった 問題を修正する（UX評価3.4、Task 13 前段）。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
SPEC のタブバー慣用句（switch 群を部品に持たせ各画面は要素として置くだけ）が 実行できず、UX評価 Critical #1（部品の操作が一切表示されない）の原因になって いた。要素階層展開（Task 8）の各ノードで、参照先 component 自身の実効 interactions（表示 variant で mergeInteractions 済み）を部品自身の gate 判定 （hostCtx 方式・ADR-0019 の流用）込みで再帰的に描画・実行可能にする。掲示中 カードも renderElementsAndActions 共通化により同じ機構に自然に乗る。 onclick には部品を辿るための数値インデックス列のみを埋め込み、component 名等の 任意文字列は埋め込まない（quote 衝突を避ける既存方針の踏襲）。描画時 （renderElementNode）とクリック時（resolveNestedItems）は同一の computeOwnComponentContext / mainTopLevelElements・Items / overlayTopLevelElements・Items を辿るため、フィルタ済みリストの インデックスが両者でずれない。 外側上書き（部品要素.member 参照による上書き）は次のコミットで対応する。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
SPEC「部品の内部要素参照・外側上書き」（116-124行）: 親（ホスト画面）が `行動(部品要素.member)` を書いた場合、行動文字列一致かつ member が部品側 interaction の対象と一致するなら部品側を隠し親を勝たせる（行動が違えば両方 残す）。renderElementsAndActions の対象紐付け（既存の computeAttachments 抽出） で得た attached items のうち targetMember 持ちを、部品自身の interaction フィルタ（computeOwnComponentContext）へ渡して判定する。resolveNestedItems も 同じ経路をクリック時に辿り直すため、描画とハンドラで一致する。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ession への誤用を修正 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
UX round2 の設計者フィードバックを反映: 左ペインはスタックとの場所の奪い合いを解消する ためログ専用にし、中央ペインは現在の画面(可変・独立スクロール)の下にスタックと遷移マップを 折畳み可能な <details> として1つの共有スクロール領域で並べる(ミクロ→マクロの見え方)。 折畳み状態は stackPanelOpen/mapPanelOpen(gatePanelOpen と同じ JS グローバル + ontoggle 方式)で遷移後も保持する。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
左ペインがログ専用になったことに伴い、ログは上が最新になるよう描画順のみを逆転する。 timeline 配列自体・cursor・onclick のインデックス意味論は時系列のまま変えないため、 current/ghost 判定やクリックでの巻き戻し・redo は逆順描画でも正しく効く。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
スタックの中央ペイン移動・折畳み可・統合ログの newest-on-top を反映する。 node packages/cli/dist/index.js check で error ゼロ・warning 増なしを確認済み。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
表示要素の行とアクション行が似た見た目で混乱するという設計者指摘（Task 15）に対応する。 action-row に枠・背景を与えボタン風の境界を持たせ、要素行（.element、静的表示）と区別する。 ラベル無し操作（choices 空）は「[TRUE] は押せるボタンなのか内部フラグ表示なのか分からない」 というUX round2指摘の解消のため、チップでなく行全体を押せるボタン（action-row-solo）にする。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
アクション自体がノイズになる局面もあるという設計者注文（Task 15）に対応する。 showActions を showEvents と同じ JS グローバル + render() パターンで導入し、 「現在の画面」ペインのチェックボックスで on/off できるようにする。off では 紐付け・フラット・部品由来の3経路すべてのアクション行（本体・掲示中カード共通）が 消え、要素階層はそのまま残る。on へ戻すとクリックも正しく効く。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
[TRUE] チップ表記は Task 15 で廃止済み。旧語彙のままだったコメントを追随させる。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
runChoice・操作一覧クリックのコメントが Task 15 で廃止済みの [TRUE] 表記を 参照したままだった。行全体ボタンという現行挙動の言い方に揃える。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
BFS 最短路は合流ノードを近道経由の浅い rank に短絡させ、遷移チェーンが縦に 潰れがちだった。entry からの反復 DFS で後退辺（サイクル）を検出・無視して DAG 化し、トポロジカル順に rank[v] = max(前進辺の先行ノードの rank) + 1 を 求める longest-path 方式に置き換える。合流ノードは最長側の rank を得るため 遷移チェーンが横に並ぶことが基本になる（Task 16 受入基準a）。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
fleamarket 18ノードが12px級まで縮小し判読不能と実測された問題（UX round2）に 対応する。集約後ノードを module ごとの水平レーンへ分け、レーンごとに layoutGraph（純関数、レーン内 rank 横並び）を回して縦に積む。単一 module なら レーン見出しは省略する。マップ全体を viewBox で縮小して収める旧方式を廃し、 ノード矩形は固定寸法のままマップ領域内の横縦スクロール（.graph-map-scroll）で はみ出た分を見る構成にする。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
fleamarket 18ノードが判読不能になった問題（UX round2）への対応。既定では現在地から 無向2ホップ以内のノードのみ表示し、「全体を見る」チェックボックスで全ノード表示へ 切替える（状態は JS グローバルで保持）。近傍モードでも粒度分割・現在地ハイライト・ hover は従来どおり機能する。表示外ノードへのエッジは省く方針（境界表現はしない）。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
#graph-preview のペイン上部固定領域（Task 9 の sticky + Task 12 の min-height 予約）を廃し、 ノード近傍への絶対配置 tooltip（.graph-map-scroll 基準）へ置き換えた。ノードクリックで tooltip を pin し、その中に粒度メニュー（variant で分割/統合。旧 openGraphMenu/graphMenu）を 統合する。外クリック（透明バックドロップ）か閉じるボタンで pin を解除する。 - hover tooltip はノード直下（重ならない位置）に固定オフセットで出し、pointer-events: none にすることで、tooltip 自身が別ノードの hover を奪って mouseenter/mouseleave が連鎖する 旧フリッカ（UX評価3.3、Task 12）を構造的に再発させない - pin 対象は生の配列インデックスでなく (module, component, variant) で識別し、render() の たびに graphNodesView 上の現在位置へ解決し直す——近傍表示（Task 16 既存分）や粒度切替で 可視集合が変わってもインデックス崩れで無関係なノードを指さず、可視集合から消えたら 自動的に pin を解除する - 遷移マップの説明文を「遷移関係自体は閲覧専用（クリックしても遷移しない）」と「表示 （ノード情報・分割粒度）はクリックで操作できる」に書き分け、両者が同居して読めた矛盾 （UX round2 指摘）を解消した Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
「effect: 盤面が更新される」のような1行が前後の遷移行を見なくても自己完結して読めるよう、 遷移・イベント両エントリに記録時のアクティブ画面（component/variant）を薄いラベルで添える （UX round2 2-3・Task 18 項目1）。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
document common 由来の操作（プッシュ通知・セッション切れ検知など）は「今できる主操作」と 優先度が異なるが同じ見た目で並んでいた（UX round2 2-3・2-4(a)2）。scope==='document' の 操作を既定閉の「外部イベントを発生させる」<details> へ分離し、主リストからは除外する （実行機構は不変）。あわせて scope バッジ（variant固有/component common/document common）が 初見では見分けにくいという指摘（UX round2 2-1）へ、3種それぞれに一言説明の title 属性を足す。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
gate off で非表示になる操作は行ごと消えて存在に気づけなかった（無効理由が可視化されない）。 member gate 付きアクション行に判定対象の現在 variant を示すバッジ + その場で切り替える select（既存 setInstanceVariant）を添え、off でも行を残し「gate off で無効」表示・ disabled にする（押せない）。host gate（裸参照。対象切替の余地なし）は従来どおり除外を 維持し、フィルタの分岐を filterHostGate に集約して currentInteractions・ docCommonInteractions・overlayInteractions・computeOwnComponentContext の4経路で一貫させる （Task 18 項目4）。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
presence gate 対象を持たない文書では右カラムが常に空白のまま横幅の約20%を占有し続けていた （UX round2 2-4(d)）。gate パネルを常設の第3カラムからトグルボタンで開くオーバーレイ ドロワーへ移し、#app を2カラムへ変える。トグル本体（見出し・説明）は開閉によらず常時表示し、 旧 Task 12 の empty state 継承を保つ。 あわせて、遷移マップの pin tooltip（Task 16）に、そのノードの component が member gate の 参照先（DATA.gateTargets）のとき variant 切替 select を内蔵する（Task 18 項目6）。gate 状態は 「画面外 component の見せ方」の話であり遷移マップのノード情報と概念的に隣接するため、独立した ドロワーとの往復を1つ減らす。select は member gate インライン化（Task 18 項目4）と同じ renderVariantSelect / setInstanceVariant を共有し、書換え先の共有レジストリは常に同期する。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
rank 割当が BFS から longest-path へ刷新された後（038d27c）も barycenter 整列の コメントに旧語彙「BFS の rank は連番のため」が残っていた（Task 16 レビュー指摘）。 longest-path でも rank が連番で埋まる根拠は直前の layoutGraph 冒頭コメントに既にあるため、 そちらを参照する言い方へ揃える。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
simulator.ts の右ペイン廃止（常設カラム→トグルドロワー化）・2カラムレイアウト・統合ログの 画面名ラベル併記に合わせ、ラフスケッチのコメントを現状の実装へ追随させる。 `node packages/cli/dist/index.js check` クリーンを確認済み。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
タブバー等のハブ部品ノードがentryから到達不能だという理由だけでレーン最右端へ 隔離され、実際の後続ノードへ逆向きの長い交差エッジを生んでいた（UX round3 N-1）。 出エッジを持つ到達不能ノードは追加の起点としてlongest-path計算に加え、 出エッジを持たない孤立ノードだけを従来どおり隔離rankへ回す。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
transition行は`[ホーム] present → ホーム`のようにラベルと遷移先が全文重複し、 遷移元と誤読されていた（UX round3 N-2）。ラベル自体が遷移後の画面（=記録時の アクティブ画面と常に同一）を表すため併記が不要——event行のみ併記を維持する。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
遷移エッジを持たないgate対象（member gate参照先）ノードは近傍表示の無向隣接 だけでは決して現れず、マップtooltip経由のgate試験入口に到達できなかった （UX round3 N-3）。filterGraphNeighborhoodの可視集合にDATA.gateTargetsの ノードを常に含める。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
「外部イベントを発生させる」<details>がscreen-sectionスクロール領域の下端に
あるため、開いても行がfoldの下に隠れ無反応に見えていた（UX round3 N-4）。
ontoggleでthis.open時のみthis.scrollIntoView({block:'nearest'})を呼ぶ。
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
.gate-drawer-closeにwhite-space: nowrapを追加し1行化する（UX round3 N-5、cosmetic）。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
takasek
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
概要
docs/examples/simulator.shitae（simulator ツール UI 自体のラフスケッチ）を仕様の起点に、packages/simulator を観測 UI へ全面改修。設計者ヒアリング 6 回と Playwright + Chrome の実機 UX 評価 3 巡を挟んだ反復で、オートマトン理論（component=状態、frame スタック=プッシュダウン構成、gate=ガード条件）に整合する形へ収束させた。
主な内容
実行の可観測性
画面カード
遷移マップ
<basename>.simconfig.jsonへ永続化（File System Access API + ダウンロード fallback、CLI simulate が初期反映）gate 試験の 3 面展開
アクション行インライン切替 / ドロワー（右ペイン廃止 → 2 カラム化）/ マップ tooltip — 同一共有レジストリへの 3 入口。member gate off の操作は「無効」表示で残す
バグ修正（実機評価で検出）
dismiss()→dismiss(@nowPlaying)（named session への誤用）設計記録
検証
pnpm -r testgreen（simulator 204 tests 含む全 8 パッケージ）🤖 Generated with Claude Code