AI に自治体の窓口業務を作らせてみた — 規制の重い部分が「組み立て」で済んだ／DataTable の実バグも出た（やってみた #75）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。新業界・公共/自治体1枚目——窓口業務 / 申請受付管理（申請受付一覧 × 処理ワークフロー × 本人確認/書類チェック × 手数料計算 × 交付/証明書発行）。

教育を5枚で締めて、公共/自治体へ pivot。1枚目は市区町村役所の窓口——証明書の申請を受け、受付→本人確認→審査→承認→交付 と処理する画面。規制が重い部分（監査可能な交付・2人承認・手数料・色非依存の状態）が、構築じゃなく"組み立て"で済んだ——一方で DataTable の実バグも炙り出した。

結果 — 4/5

tsc/build/eslint 緑・console 0・375px・申請受付一覧・処理ワークフロー（advance/差戻し）・本人確認＋必要書類チェック・手数料計算・CoSign 承認・SignedRecord 交付ロック。

今回の主役 — 規制の重い部分が「composition, not construction」

cold AI が医療/金融のために作った部品を、公共の規制ワークフローにそのまま当てた:

• SignedRecord（臨床記録/退院サマリ用）→ 交付記録「best fit of the whole catalog, zero friction」。下書き→署名ロック→署名者+時刻の監査行→追記のみ＝監査可能な交付に1:1。labels で交付語彙に、children({readOnly}) で証明書/手数料/申請者の MetadataList を本文に。
• CoSign（与薬ダブルチェック/出納 maker-checker 用）→ 責任者承認。同一人物ガード・必須確認項目・タイムスタンプ付き CoSignValue が自治体の承認に。デフォルトラベルが既に日本語。
• ApprovalSteps（経費/稟議用）→ 処理ワークフロー（差戻しは marker＋「差戻し」ラベルで色だけに非依存）。
• Badge icon（#72 で land）→ 状態ピル・formatCurrency（¥600/¥0）→ 手数料。

"The hard, regulated parts (auditable issuance, 2-person approval, JPY fees, non-color-only status) were composition, not construction."

医療・金融で育てた SignedRecord/CoSign が、公共の窓口で骨格そのまま効いた。

src で land — DataTable の実バグ（マウスで行クリックが効かない）

• 🔴→✅ onRowClick がマウスクリックで発火しない実バグを fix（PR #302）。cold AI が最初の操作で踏んだ:
  • 症状: 行に cursor-pointer が出てるのに、行をクリックしても詳細 Sheet が開かない。キーボード Enter だけ効く。
  • 原因: クリック可能な行は tabIndex=0/role="button" になる。一方「行内のボタンを押したら行クリックを抑制する」ガード isInteractiveTarget が closest('…, [tabindex]:not([tabindex="-1"])') を使っていて、行自身がこのセレクタにマッチ→本文クリックが全部「インタラクティブ要素」扱いで握り潰されていた。利用者は fork しないと直せない。
  • 直し: ガードに行の境界（event.currentTarget）を渡し、マッチが行の内側の要素のときだけ抑制（match !== null && match !== boundary）。行内ボタン/リンク/入力は今まで通り抑制。テーブル行・renderCard カード両方に適用。
  • ブラウザ実証: 行本文クリック→onRowClick 発火（青井 花）・行内の詳細ボタン→ボタンのみ発火（行クリックは不変）。onRowClick のデモも追加（prop に例が無かった＝docs ギャップも同時に解消）。

起票だけ

• 🟠 インタラクティブな処理ステッパーが無いが2回目（#63 賃貸審査＋#75 自治体窓口・#267）。ApprovalSteps/Stepper は表示専用で、cold AI が状態機械を~120行手組み（advance/差戻し/承認連動/交付ロック）。「back-office/government 画面で最大の欠落」。あと1回で build。
• 🟡 Alert に icon/title/description prop 無（svg を第1子で渡す暗黙契約が型から発見不能・#303）。

学び — 越境の複利は「規制ドメイン」でも効く／cold-test は実バグも掘る

医療の SignedRecord・CoSign が、公共の交付・承認に骨格そのまま効いた——規制の重い部分ほど、作法の骨格（署名ロック/maker-checker）が業界を越える。同時に #75 は、文脈ゼロの利用者が最初の操作（行クリック）で踏む実バグ（onRowClick 死亡）を炙り出した。これは既存デモが onRowClick を使っていなかったため埋もれていた穴で、cold-test の「実際に操作する」性質がなければ見つからなかった。直し＋デモ追加で解消。

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

• 公共をもう1枚（生活保護/給付金審査・施設予約・税申告 など）で2枚目。インタラクティブ処理ステッパー#267 を3回目＝build へ近づける。系譜#281・連続時間軸#142残りも観測継続。

試す

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

まだ alpha。医療の署名/2人承認が公共の交付/承認に越境し、DataTable のマウス行クリック実バグを直した回。

---

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