指示書O — エラー種別ラベルの折り返しと空値表示

実行後はこの表と、文書末尾の「実行状態」表を更新してください。

★この指示書を読んでいるあなたへ★ .claude/commands/d-watch.md に「実装は Cursor 側、Claude Code は指示書作成まで」とありますが、 これは2つの環境の役割分担です。Cursor の中で動いている Claude は実装担当です。 この指示書を渡されたなら、調査や改訂ではなく実装を行ってください。

★★着手前にユーザーへ確認すること — ★なし★★★

★2件の論点はいずれも 2026-09-09 にユーザーから回答を得ています。段階1 からそのまま進めてください。★

問題1は折り返して2行分になるようにしてください
問題2は文字列が入っていれば生値のまま、入っていなければその他や不明としてしまうのは特に矛盾しないと思います

この指示書の位置づけ

指示書K（D-088）で ★エラー種別を生値のまま表示する★ 方針に切り替えた結果、 レポート画面「エラー種別の内訳」で ★2つの表示上の問題★ が表面化しました。 以前は日本語の短い分類名（「ハンドルアップ」等）だったため出ていなかった問題です。

★行の高さは固定されていない★ので（.errorRow は display: flex; align-items: center; padding: 8px 20px;。 components/features/reports/ReportsScreen.module.css:261-267）、★ラベルが折り返せば行が自然に伸びます★。

★禁止事項★

段階1: ラベルを折り返す（CSS のみ）

components/features/reports/ReportsScreen.module.css の .errorLabel に ★折り返しを許可する指定を足す★。

やること

• ★overflow-wrap: anywhere（または word-break: break-all）★を足す
  • ★英語識別子は途中に改行できる場所（空白・ハイフン）が無い★ので、★単語の途中で折れる指定が必要★
  • ★overflow-wrap: break-word だけでは折れない場合がある★（break-word は「単語がボックスに収まらないとき」の 挙動が実装依存。anywhere のほうが確実）
• ★line-height の調整が要るか確認すること★（2行になったとき行間が詰まりすぎないか。 現状 .errorLabel に line-height の指定は無い＝継承値）

★やらないこと★

• ★★クランプ（2行に切り詰め）はしない★★ — 禁止事項1。 ★実測した識別子は110px幅で2行に収まる★ので通常は2行になる。 ★3行以上になる値が来ても、行が伸びるだけで崩れない★（.errorRow に高さ固定が無いため）
• ★width: 110px は変えなくてよい★（変えると他の列とのバランスが崩れる）。 ★ただし実装者が「2行に収まらない」と判断したら幅を調整してよい。その場合は段階4 で記録すること★

★この段階の完了条件★

1. .errorLabel に折り返しを許可する指定が入っている
2. ★クランプ指定（-webkit-line-clamp / line-clamp / text-overflow: ellipsis）が入っていないこと★
3. npx tsc --noEmit エラー0 / npm run lint 0
4. ★CSS のみなのでテストは増えない★（npm test が着手前と同数で全パスすること）
5. コミットする

段階2: 空値の表示を決める純粋関数を作る

★lib/format/ に新規ファイルを作る★（名前は実装者が決めてよい。例 lib/format/raw-label.ts）。 ★前例: lib/format/robot-model.ts（isSupportedModel()。指示書N で作成）★ — 設定値は lib/config、 それを読む純粋関数は lib/format という既存の分け方を踏襲する。

★仕様★

★上記4つ（null / undefined / 空文字 / 空白のみ）は同じ扱いにすること★。

★代替文言は (値なし) を推奨★

★ユーザーは「その他や不明」でよいと言っているので、この3案のどれを選んでも方針違反ではありません★。 ★実装者が変えたい場合は変えてよい。ただし文言は1箇所の定数にまとめ、あちこちに直書きしないこと★（禁止事項3）。

★テストを先に書く★

lib/format/__tests__/ に置く（robot-model.test.ts と同じ場所）。★最低限この6ケース★:

★ケース6は「決めて固定する」ことが目的です★。どちらでもよいが、★テストで固定し、段階4 で記録すること★。 （lib/format/robot-model.ts は比較前に trim() している＝前例はトリムする側）

★この段階の完了条件★

1. lib/format/ に新規ファイルがあり、★DB アクセスを含まない純粋関数★であること
2. 代替文言が ★1箇所の定数★ になっていること
3. テストが上記6ケースを含み、全パスすること
4. npx tsc --noEmit エラー0 / npm run lint 0
5. ★npm test のテスト数が着手前の実測値から増えていること★
6. コミットする

段階3: ラベルに適用する

やること

• components/features/reports/ReportsScreen.tsx:440 の <div className={styles.errorLabel}>{item.label}</div> を、★段階2 の関数を通す形にする★
• ★i18n★: 代替文言を lib/i18n.ts の EN に足すこと。 ★キーは日本語原文。完全一致でしか引けない★（lib/i18n.ts:1-6 のコメント参照）。 例: "(値なし)": "(no value)"

★★適用範囲は「エラー種別の内訳のラベル」だけにすること★★

★申し送りとして記録すること（段階4 の docs/decisions.md に書く）★:

★同じ問題は status_1h / status_30m / robot_status にも起こりうる★（空値だと空のバッジが出る）。 ★ただし fixtures に空値が無く、実データでも空になるか未確認なので今回は適用しない★（禁止事項4）。

★この段階の完了条件★

1. ReportsScreen.tsx:440 が段階2 の関数を通している
2. ★lib/i18n.ts に対訳が入っている★
3. ★ERROR_TONE に差分が無いこと★（禁止事項5）。★item.type はそのまま ERROR_TONE の キーとして使われ続ける — 代替文言は表示だけの話で、色分けのキーには影響させない★
4. npx tsc --noEmit エラー0 / npm run lint 0 / npm test 全パス
5. コミットする

段階4: 動作確認と記録

★ブラウザでの確認★

• ★npm run dev を Bash で起動しないこと。Browser pane の preview_start を使う★
• ★Browser pane が黒画面 / 0×0 になる既知の問題★: preview_start に url を渡して開き直す

★確認すること★:

★ブラウザが使えなかった場合は、代替手段（curl + API JSON 等）で何を確認し、 何が確認できなかったかを実行状態表に明記すること★（指示書N 段階5 の前例）。

docs/decisions.md に ★D-089★ を追記

★記録すること★:

1. ★生値方針（D-077 / D-088）にしたことで表面化した表示の問題であること★（仕様変更ではない）
2. ★クランプせず折り返しにした理由（値を隠さない）★
3. ★代替文言に何を選んだか、およびその理由★
4. ★(値なし) は「値が空である」という事実の表示であり、D-077 の「推測でマッピングしない」に反しないこと★
5. ★前後に空白がある値をトリムするか／しないかの決定★（段階2 ケース6）
6. ★width: 110px を変えたなら、その値と理由★
7. ★申し送り: status_1h / status_30m / robot_status にも同じ問題が起こりうる（今回は未適用）★

docs/handoff.md に追記

★最新は 追記24（docs/handoff.md:2000）★。次は ★追記25★ の見込み。★着手直前に自分で確認すること★。

push

• ★git add は必ずファイルパスを明示。git add -A は禁止★（禁止事項6）
• git push origin develop（★main へは push しない★）

★この段階の完了条件★

1. 上記7項目の確認を実施した（★できなかったものは実行状態表に明記した★）
2. docs/decisions.md に D-089 を追記した（★7項目すべて記録★）
3. docs/handoff.md に追記した
4. ★origin/develop へ push 済み★
5. ★文書末尾の「実行状態」表を更新した★

完了条件（全体）

1. ★着手前確認は「なし」★（2件とも回答済み。段階1 から進めた）
2. 段階1〜4 をすべて実施したこと（★途中で止めた場合は、どこで止めたかを実行状態表に書くこと★）
3. npx tsc --noEmit エラー0 / npm run lint 0
4. npm test 全パス。★テスト数が着手前の実測値から増えていること★（作成時点の基準: 30ファイル / 603テスト）
5. ★.errorLabel に折り返し指定があり、クランプ指定が無いこと★
6. ★代替文言が lib/format/ の定数1箇所にあり、ReportsScreen.tsx に直書きされていないこと★
7. ★grep -n "ERROR_TONE" components/features/reports/ReportsScreen.tsx の結果が着手前と同じであること★
8. ★lib/fixtures/reports.ts に差分が無いこと★（★:473 の空文字は境界ケースなので消さない★）
9. ★d-watch-api.yaml / prisma/schema.prisma / lib/db/ に差分が無いこと★
10. ★lib/i18n.ts に対訳が入っていること★
11. docs/decisions.md / docs/handoff.md の更新
12. ★origin/develop へ push 済み★
13. 文書末尾の「実行状態」表を更新した

実行状態

実行日: 2026-09-09 取得した決定番号: D-089 着手前の実測値: 30ファイル / 603テスト / tsc 0 / lint 0（2026-09-09 実測。指示書記載と一致） 純粋関数の置き場所: lib/format/raw-label.ts（formatRawLabel()。DBアクセスなしの純粋関数。 lib/format/robot-model.ts と同じ分け方＝設定値は lib/config、判定は lib/format。 今回は静的定数のみで lib/config は使っていない） 選んだ代替文言: (値なし)（指示書の推奨案どおり。理由はD-089参照） 前後の空白の扱い: トリムする（lib/format/robot-model.ts の前例を踏襲。 lib/format/__tests__/raw-label.test.ts ケース6で固定） width: 110px を変えたか: 変えていない（指示書の既定推奨どおり） 完了後の実測値: 31ファイル / 610テスト 全パス / tsc 0 / lint 0 詳細: docs/decisions.md D-089 / docs/handoff.md 追記25 を参照。 段階4のブラウザ確認はCursor Browser paneが無い環境のため npm run dev + curl で代替し、 折り返し・空値表示・ダーク/ライト・JP/EN・コンソールエラーはCSR構成のため目視確認できていない （D-089に限界を明記）。