#48スコア 4/5物流・倉庫

AI に入庫（棚入れ）を作らせてみた — 逆順スキャンでも部品は効き、Progress の小さな穴を1つ埋めた（やってみた #48）

ルート: /put-away
デスクトップ表示
モバイル表示

375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。

解説記事

AI に入庫（棚入れ）を作らせてみた — 逆順スキャンでも部品は効き、Progress の小さな穴を1つ埋めた（やってみた #48）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。物流/倉庫(WMS)2枚目——入庫 / 棚入れ (put-away)（入庫指示 × 商品スキャン → 推奨ロケーション → 格納先スキャン × 容量/充填 × 分割格納 × 在庫計上）。

#47 ピッキング（ロケ→商品で取り出す）と対の、商品→ロケで格納する入庫側。2段スキャンが逆順（商品先 → 格納先ロケ）になるのが今回の肝。同じ物流でも、出庫と入庫で作法が鏡像になる。

結果 — 4/5

tsc/build 緑・console 0・375px ハンディプライマリ・商品スキャン→推奨棚＋容量表示→ロケスキャンで+1・満杯はオーバーストック阻止＋読み上げ・分割格納（3+5=8 を2棚へ）・対象外はエラー・入庫確定で read-only サマリ（棚別ロールアップ）・h1 1個。

逆順でも、育てた部品はそのまま効いた

スキャン順が #47 と逆（商品→ロケ）でも、ScanInput は両スキャンに効いた:

ScanInput for BOTH scans — the centerpiece. onScan(code) → ScanResult {ok, message} is exactly the right contract; type-then-Enter, lockMs debounce, auto-clear, re-focus, polite aria-live が全部入り。stage ごとに key で remount して label+handler を差し替えた。

Delta（残数・muted/success）・EditableDataTable（格納グリッド・renderFooterCell・375px カード化）・RevealSection（容量オーバーライド/保留/検証ゲート）・Progress（充填率の label/valueText）・CardTitle as・formatCurrency（¥186,400）——全部発掘・採用。複利は逆順の鏡像画面でも崩れなかった。

src で直した穴 — Progress に意味を持たせる tone

今回の clean な穴は、既存出荷コンポーネントが明らかに足りない prop だった:

  • 🟠 Progress の充填バーが bg-foreground 固定で、容量メーターのトーン色（残りわずか→警告、満杯→赤）が出せない。cold AI は Progress の上に色付きバーを -mt-2.5 で重ねるハックを強いられた。→ tone prop（default/primary/success/warning/destructive/info）を追加（#229・PR #231・ブラウザ実証）。デフォルトは中立のまま＝既存呼び出しは無変更。

これは新規 primitive ではなく既存部品への小さな追加なので、3回ルール（新 primitive は3回見てから作る）とは別軸——#219（label/valueText 追加）と同じ「明らかな穴＋悪いワークアラウンド」は即修正する判断。docs にも「意味を持つ充填（tone）」デモ＋未掲載だった label/valueText/tone を追記。

起票だけした穴（新 primitive は3回ルール）

  • 🟠 ロケーション容量/充填 Meter primitive（#230・1回目）。「この棚に入る？」に専用部品が無い。Progress＋tone で当座は組めるが、複数セグメント（現充填＋入荷分のオーバーレイ）＋閾値トーン＋容量形状の Meter/Gauge が理想。倉庫容量/ストレージ使用量/クォータで再出現したら build。
  • 🟠 2段スキャンゲート（ScanGate）（#227・2回目）。#47 は location→item、#48 は item→location——順序が逆でも欲しい＝概念が順序非依存で汎化。cold AI が再び scanStage ステートマシンを手組み。あと1回で build。
  • 🟡 分割格納エディタ・グリッド内 Select が native。

学び — 「小さな既存修正」と「新 primitive」を分けて捌く

即修正（既存部品の明白な穴）: Progress tone #229 → land
起票して待つ（新 primitive・3回ルール）: 容量 Meter #230(1回)・ScanGate #227(2回)

複利が回り始めた段階の規律は、穴の"種類"で対応を変えること。既存部品が prop 1個足りなくて consumer がハックを強いられているなら即直す（#219・#229）。一方、全く新しい合成部品（ScanGate・容量 Meter）は、頻度が primitive を浮かび上がらせるまで起票して待つ。過剰 build を避けつつ、明白な穴は放置しない——この2軸で kit は健全に育つ。今回は逆順スキャンでも全部品が効き、穴は Progress の prop 1個だった＝物流2枚目も kit はほぼ持ちこたえた。

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

  • 物流をもう1枚（出荷検品/梱包 or 在庫ロケーション管理）で ScanGate#227 を3回目＝build 閾値へ、容量 Meter#230 も2回目を狙う。方針: 1業界3〜5枚・可能な限り違う内容・業界特有UI最優先。

試す

まだ alpha。逆順スキャンでも部品は効き、Progress の小さな穴を1つ埋めた回。

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

使用した @gunjo/ui コンポーネント

この画面のソースが直接 import している部品です。

AlertAlertDescriptionAlertTitleBadgeBadgePropsButtonCardCardContentCardDescriptionCardHeaderCardTitleDeltaDialogDialogContentDialogDescriptionDialogFooterDialogHeaderDialogTitleEditableColumnEditableDataTableInputLabelNumberInputProgressRevealSectionScanInputScanResultSelectSeparatorStatistic

cold AI が組み上げた実コード

ファイル名をクリックでソースを展開できます。