fix: 質問ダイアログの選択肢ラベル・説明を折返して全文表示する - #76
Merged
Merged
Conversation
セッションの質問(AskUserQuestion)ダイアログで、選択肢のラベルと説明を
同じ行(row の Box)に並べていたため、Yoga が両方の <Text> を縮めて長い
文言が途中で切れて読めなくなっていた。
- `core/choice-lines.ts` を追加: 選択肢 1 件を表示幅ベースで物理行へ展開する
純関数(継続行は prefix の幅ぶん字下げしてラベルの桁に揃える)。
- `core/layout.ts` に `dialogContentWidth(columns)` を追加: 枠・パディングを
引いた本文幅(極端に狭い端末向けに下限あり)。
- `ui/choice-row.tsx` を追加(共有 presentational): 1 行 1 <Text> で描き、
説明は dim。質問ダイアログとモデル選択(/model)の両方で使う。
- ツール許可ダイアログの入力要約も 1 行切り詰めから折返し表示に変更。
- ダイアログの枠に flexShrink={0}: 縦が足りないときに縮んで潰れる役は
内部スクロールを持つログ/一覧に任せる。
takecchi
added a commit
that referenced
this pull request
Jul 31, 2026
docs/ARCHITECTURE.md の core ファイル一覧で #76 の choice-lines.ts と 本 PR の composer-layout.ts を両方残す形でコンフリクトを解消。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
概要
セッションで質問(
AskUserQuestion)が出たとき、選択肢のラベル(左側の文字)が長いと途中で途切れて読めない問題を修正しました。説明文も同様に切れていたので、こちらも折返して全文出すようにしています。原因
ラベルと説明を同じ行(row の
Box)に 2 つの<Text>として並べていたため、幅が足りないと Yoga が両方を縮め、ラベルも説明も途中で切り捨てられていました。直し方
ログ描画(
core/scroll.tsのlogLines)と同じ方針に揃えました。core/choice-lines.ts(新規・純粋): 選択肢 1 件(ラベル + 説明)を、表示幅(CJK/絵文字は 2 セル)ベースで物理行へ展開。継続行は prefix(❯,❯ [x])の表示幅ぶん字下げしてラベルの桁に揃える。説明はさらに 2 セル深く字下げ。core/layout.ts:dialogContentWidth(columns)を追加(ビューの padding + 枠 + ダイアログの paddingX = 6 セルを引く。極端に狭い端末で縦に爆発しないよう下限あり)。ui/choice-row.tsx(新規・共有 presentational): 1 行 1<Text>で描画(ラベル行はカーソル色、説明行は dim)。質問ダイアログと/modelのモデル選択の両方で使用。flexShrink={0}: 縦が足りないときに縮んで潰れる役は、内部スクロールを持つログ/一覧に任せる。表示例(80 桁)
テスト
core/choice-lines.spec.ts(新規・テーブルドリブン): 折返し・字下げ・表示幅(日本語)・改行入り説明・説明なし・極端に狭い幅core/layout.spec.ts:dialogContentWidthの段階(下限含む)ui/permission-dialog.spec.tsx: 長いラベル/説明が 1 文字も欠けない(X×150 /Y×260 の出現数を数える)、説明がラベルの次の行に字下げして出るui/model-select.spec.tsx: 長い説明が切り詰められないnpm run lint/npm run typecheck/npm test/npm run build