AI にロット追跡を作らせてみた — 67枚目で初めて「越えられない穴」が出た（やってみた #67）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。製造4枚目——ロット追跡 / トレーサビリティ（ロット系譜 × リコール範囲特定 × 入出庫工程履歴 × 出荷先追跡）。

製造の4枚目は食品工場のトレーサビリティ。不良ロットが出たとき、どの原材料から作られ、どこへ出荷されたかを辿ってリコール範囲を特定する画面。67枚やってきて、初めて「部品では描けない」構造に当たった回。

結果 — 4/5

tsc/build 緑・console 0・375px（横スクロール0）・ロット概要・受払照合・双方向系譜ツリー・リコール範囲確定（ライブ集計）・工程監査証跡・出荷先テーブル・h1 1個。今回 src 修正はゼロ——kit が85%を摩擦なく賄い、残り15%＝系譜の核が初の大穴。

今回の主役（の不在）— ロット系譜は DAG なのに、ツリーしか無い

トレーサビリティの心臓はロット系譜。これは本質的に **DAG（有向非巡回グラフ）**だ：1つの原材料ロットが複数の製品ロットに入り、1つの製品ロットが複数の原材料ロットを消費する（多親かつ多子）。だが kit の階層プリミティブは TreeView（厳密な単親ツリー）だけ:

No DAG / node-link / graph component — the single biggest gap. Lot genealogy is fundamentally a DAG. The only hierarchy primitive is TreeView, a strict single-parent tree. Workaround: split the DAG into two directional trees (上流/下流) and annotate cross-links in plain text (⚠ 共有ロット — RM-CONC-2405-23 にも投入) because the tree literally cannot draw the cross-link. The structure the user most needs to see — shared-lot fan-in/fan-out, which drives recall blast radius — is exactly what the component can't express.

つまりリコールの影響範囲を決める「共有ロットの分岐・合流」が、ツリーでは描けない。これは #281 に起票。グラフ/node-link は layout・エッジ配線・グラフ走査の a11y を伴う大型 primitive なので、3回ルールで（トレーサビリティ/組織図/依存グラフ/BOM で再出現したら）build する。1回目は正直に起票して見送り。

それでも越境はまた効いた

部品単体の被覆率は高く、他業界で育てた部品がまた骨格そのまま効いた:

• SafetyBanner（臨床のアレルギー/禁忌警告用）→ QA リコール警告に perfectly。requireAck＋controlled acknowledged が「QA 責任者がリコール範囲を承認してからサインオフ」に1:1。"best single component on the screen, zero friction"。
• Meter direction="higher-is-better"+target（#256・2回前に land）→ 受払照合バーに自力採用（受領 vs 出荷+保留+在庫残＝100%で success）。#65/#66/#67 と3回連続、野生で効き続けてる。
• Timeline（variant＋marker）→ 入庫/工程投入/製造/検査/出庫の監査証跡・DistributionBar → 出荷済/保留/在庫残の内訳・DataTable.renderCard → 375px で出荷先がカード崩し。

医療/物流/会計で育てた部品が、製造トレーサビリティでもそのまま効いた。

起票だけ（3回ルールで育てる）

• 🔴 系譜グラフ/DAG/node-link（多親系譜・#281・1回目・大型）。
• 🟡 RouteStops が配送ドメイン固定が2回目（#64 工程ルート＋#67 系譜/出荷チェーン・#282）。status enum 固定・配送ラベル baked・ETA/遅延の時間モデル固定で「消費/製造/検査」を表せない。汎用 status＋任意 time で build（あと1回）。
• 🟡 TreeView がラベルクリックで toggle と select 両方発火（ノード詳細を開く onNodeActivate が無い・#283）。
• 🟡 MetadataList が値を hard truncate（長い製造ライン名が wrap せず clip・#284）。
• 🟡 選択可能リスト がまた必要（リコール範囲確定＝checkbox＋status＋ライブ集計・リコール/返品/一括承認で再出現・#135 に追記）。

学び — 「kit が持ちこたえた」も「初の大穴」も、両方が正直なデータ

67枚目で初めて、部品の合成では表現しきれない構造（多親 DAG）に当たった。これは負けじゃなく、cold-test の狙いそのもの——「実業務をやらせると、どこで足りなくなるか」が炙り出される。一方で SafetyBanner（臨床）や Meter higher-is-better（#256）がまた別業界で骨格そのまま効き、85%は摩擦ゼロ。「持ちこたえた範囲」と「初めて足りなかった核」を同じ精度で記録するのが、次に何を作るべきかを決める材料になる。系譜グラフは大きいので急がず、3回ルールで再出現を待って build する。

次回予告（やってみた #68）

• 製造をもう1枚（生産計画/負荷山積み or 出荷/在庫引当）で5枚目、or 別業界へ pivot（教育/公共）。系譜グラフ#281・RouteStops汎用化#282 の再出現も観測。

試す

• gunjo.jp ／ npm @gunjo/ui ／ GitHub
• 前回まで: #1〜#66
• GunjoUI by UIXHERO

まだ alpha。67枚目で初めて部品では描けない構造（多親DAGの系譜）に当たり、それでも SafetyBanner/Meter がまた越境した回。

---

<!-- 公開前: 相互URL差込／スクショ確定／EN(dev.to)ミラー -->