AI にホール運営＋KDSを作らせてみた — KDSは KanbanBoard、でも卓タイルだけ手組み（やってみた #96）
/restaurant-floor375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI にホール運営＋KDSを作らせてみた — KDSは KanbanBoard、でも卓タイルだけ手組み（やってみた #96）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。飲食・レストラン 2枚目——ホール運営／テーブル管理＋キッチンディスプレイ(KDS)。リアルタイムの卓状態・注文進行・要対応。
#95予約台帳とは真逆の、営業中のリアルタイム運営ボード。観測：KDS（調理ステージを流れる注文）に KanbanBoard が効くか＋StatGroup の継続再利用。
結果 — 4/5
tsc/build 緑・375px 横溢れゼロ・0 console error。フロア卓状態・KDS注文ステージ・要対応・卓を掘り下げる詳細・本日サマリ。
観測 — KDSは KanbanBoard、サマリは StatGroup
予備知識ゼロの AI に「(a)KDS注文ステージ盤 (b)サマリ指標行 (c)卓状態タイル をどう作ったか」を聞いた：
KanbanBoard — まさに KDS の注文ステージ盤。列=受付/調理中/提供待ち/提供済・getColumnId/renderCard・列ごとの件数バッジ・閉じ込めた横スクロールで4列が375pxを破らない。「この分野でライブラリ最良の単一コンポーネント」。ドラッグ&ドロップは自前で用意する必要があるが、キッチンのタッチ画面ではステージ送りボタンの方が良い。 StatGroup — 「まさに『サマリ指標行』と説明されている」。6指標を渡してcols={{base:2,md:3,lg:6}}＝~10行で完了。Meter(提供遅延・経過/目標)・Banner×3(提供遅延=destructive/会計待ち=warning/長居=info)・Badgeicon・Drawer+MetadataList(卓詳細) も既製。
KanbanBoard（整備ラウンドで作り・#83 HR ATS で発掘）が KDS に業界越え＝同じ盤が採用パイプラインでもキッチンでも効く。StatGroup（#94 で作った）は #95予約に続き #96 でも再利用＝飲食2枚連続。
唯一の手組み＝StatusTile の不在（新しい欠落）
卓状態タイルだけ手組み＝フロアの各卓（卓番＋状態Badge＋滞在/金額/担当＋提供遅延/長居タグ＋クリック）を
Card+Badge+Icon+Tag+<ul>gridで。フロア/座席/状態タイルのコンポーネントが無い。さらにCardに操作できる手がかりが無いので、クリックできる card ごとにrole/tabIndex/onKeyDownのアクセシビリティを手書き。
→ #344 を課題に記録（StatusTile＝タイトル＋状態Badge＋指標行＋要対応タグ＋onActivate）。予備知識ゼロの AI 曰く「あらゆる運営ボード——レストランのフロア/キッチンのまとめ台/病床ボード/倉庫のドック——が今これを再発明している」。1回目だが明確に業界横断。Card の操作できるアクセシビリティ（#341 と同じ根）も同じ issue に。
課題記録（追記）
- 🔵 StatGroup が Statistic と隣り合っていて名前から見つけにくい・Meter と Progress の重複（#325）・Statistic が375pxで通貨を桁の途中で折り返す（compact 指定が欲しい・#344）。
今回 src の新規コンポーネントなし（4/5・KanbanBoard/StatGroup 再利用が成果・StatusTile を課題に記録）。
学び — 次の「横に広がる階層」は運営の StatusTile かもしれない
人物の階層（PersonCell→RelationshipRow→StatGroup）を揃えた。#96 が示したのは別の軸＝運営ボードの最小単位 StatusTile（状態を持つ何か＝卓/病床/ドック/ジョブ）。PersonCell が「人を1行」なら StatusTile は「状態を持つモノを1タイル」。これも業界横断（飲食/医療/物流/製造）で繰り返す形——3回ルールで再出現を待って固める候補。一方 KanbanBoard/StatGroup の業界越えが示すとおり、ステージ盤と指標行はもう揃っている。
次回予告（やってみた #97）
- 飲食3枚目（シフト管理 ScheduleGrid＋StatGroup or 売上ダッシュボード）。StatusTile 再出現の観測。
試す
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。