Skip to content

feat(tui): カテゴリメニューを最下部固定の横並びメニューバーへ変更#66

Merged
takemi-ohama merged 1 commit into
mainfrom
feature/tui-bottom-menubar
Jun 13, 2026
Merged

feat(tui): カテゴリメニューを最下部固定の横並びメニューバーへ変更#66
takemi-ohama merged 1 commit into
mainfrom
feature/tui-bottom-menubar

Conversation

@takemi-ohama

Copy link
Copy Markdown
Contributor

Pull Request

概要

devbase list トップ画面の常設カテゴリ(環境変数 / プラグイン / スナップショット / ステータス)を、一覧末尾の行から画面最下部に常設する横並びメニューバーへ移す。一覧はプロジェクトのみのすっきりした表示になり、カテゴリへは ←→ キーで移動して Enter で決定する。

? プロジェクトまたは操作を選択 (↑↓ 移動 / 名前で絞り込み / ←→ 下部メニュー / Enter 決定 / Esc・Ctrl-C 終了):
 » [1] carmo      (ndf, running (2 containers))
   [2] beta       (ndf, stopped)
──────────────────────────────────────────────────────────────
  環境変数    プラグイン    スナップショット    ステータス

関連 Issue

変更点

menu.select_with_menubar() 新設

  • questionary select のレイアウト下に区切り線 + 横並びバー(FormattedTextControl)を組み込む。一覧の件数・絞り込み状態に関わらずプロンプト描画の最下部に固定
  • フォーカス中のバー項目は bold reverse でハイライト(メニューらしい見た目)
  • キー操作:
    • ← →: バーへフォーカスを移して項目間を巡回(→ は先頭から、← は末尾から入り、端で循環)
    • ↑ ↓(バー上): 一覧へフォーカスを戻す(一覧内は従来どおり行移動・文字絞り込み)
    • Enter: フォーカス位置で確定(バー = カテゴリ key / 一覧 = プロジェクト index)
    • Esc / Ctrl-C: 終了(従来どおり)
  • questionary は ←→ を明示バインドしない(Keys.Any の catch-all のみ)ため、後付けマージで安全に割り当てられる。絞り込み入力中のカーソル移動キーだけ失われるが短文入力のため実害なし
  • PR fix(tui): 環境変数メニュー再構成 + Esc/Ctrl-C 二重 exit クラッシュ修正 #65 の二重 exit ガード(_guard_after_done)はバーのバインドにも自動適用される

app.py

  • _select_top をメニューバー方式へ切替(カテゴリ行を一覧から削除)
  • プロジェクト 0 件時は「(プロジェクトがありません)」プレースホルダ行を表示(questionary select は選択可能 choice 0 件だと構築できないため)。Enter しても何も起動せず再表示

リファクタリング

  • _add_key_binding_merge_app_bindings(KeyBindings 一括マージ)へ整理し、バー用バインド群の後付けに再利用

動作確認

  • pytest tests/ 全 697 件パス(skip 1 件は zsh 未インストールによる補完テストのみ)
  • 単体テスト 7 件追加(フォーカス遷移・Enter 確定・一覧フォーカス時のバー用 Enter 無効・ハイライト描画・プレースホルダ)
  • 実 TTY(pty)テスト: 「→→Enter でカテゴリ確定」「← で末尾タブへ」「→ 後に ↓ で一覧復帰して Enter でプロジェクト確定」「バー 4 項目の描画」を検証
  • pty + pyte で画面再構成し、区切り線 + 最下部バーのレイアウトを目視確認
  • ホスト側の実 TTY で devbase list の見た目・操作感を手動確認

スクリーンショット・ログ(任意)

$ uv run pytest tests/ -q
697 passed, 1 skipped in 31.60s

補足

  • バーは prompt_toolkit のフルスクリーンモードではなくインライン描画のため、「最下部固定」はプロンプト描画領域の最下部(一覧の直下)に常設される挙動
  • 旧表示(カテゴリが一覧の行に並ぶ形式)は廃止。key 入力での絞り込みはプロジェクト名のみが対象になる

🤖 Generated with Claude Code

devbase list トップ画面のカテゴリ (環境変数 / プラグイン / スナップショット /
ステータス) を一覧末尾の行から、画面最下部に常設する横並びメニューバーへ
移す。一覧はプロジェクトのみになり、カテゴリは ←→ で項目間を移動して
Enter で決定する。

- menu.select_with_menubar() 新設: questionary select のレイアウト下に
  区切り線 + 横並びバー (FormattedTextControl) を組み込む。フォーカス中の
  項目は bold reverse でハイライト
- キー操作: ←→ でバーへ入り巡回 (端で循環)、バー上の ↑↓ で一覧へ復帰、
  Enter はフォーカス位置で確定。questionary は ←→ を明示バインドしない
  (Keys.Any の catch-all のみ) ため後付けマージで安全に割り当てられる
- プロジェクト 0 件時は「(プロジェクトがありません)」のプレースホルダ行を
  置く (questionary select は選択可能 choice 0 件だと構築できない)。
  Enter しても何も起動せず再表示
- _add_key_binding を _merge_app_bindings (KeyBindings 一括マージ) へ
  リファクタリングし、バー用バインド群の後付けに再利用
- 単体テスト 7 件 + 実 TTY (pty) でのキー操作・バー描画テストを追加

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@takemi-ohama takemi-ohama merged commit 3f3fea4 into main Jun 13, 2026
5 checks passed
takemi-ohama added a commit that referenced this pull request Jun 13, 2026
* docs: README/ドキュメントを現状の階層メニュー TUI に合わせて更新

PR #63#66 の TUI 変更 (確認プロンプト整理 / Enter 待ち / env メニュー再構成 /
最下部メニューバー) を反映し、ドキュメントを実装と整合させる。

- README: 「対話的なプロジェクト選択」を「階層メニュー TUI」へ刷新。
  プロジェクト操作と最下部カテゴリメニュー (←→ 移動) を明記
- cli-reference: `devbase project list` を全面刷新。番号入力の旧説明を廃止し、
  TUI の画面構成図・キー操作表・カテゴリ別操作一覧・確認プロンプトの範囲を追加
- container-operations: プロジェクト一覧の説明を TUI 前提に更新し詳細へリンク
- architecture: 構成図と commands 表に project.py / tui/ を追加。tui/ の
  モジュール構成表を新設。cmd_project が container.py 側にある実態を反映
- 既存ドキュメントに元々抜けていた CLI サブコマンド (project rebuild /
  plugin migrate / env export・import) をコマンド一覧・ツリー図に補完

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* docs: cross-review #67 後始末 (rebuild ショートカット/SHORTCUTS整合/Enter操作/env export-import 補記)

- architecture.md: SHORTCUTS 行を実装に整合 (up/down/login/ps/scale/rebuild、build 除外・list 個別 routing)
- cli-reference.md: ショートカット表とツリーに rebuild [name] 追加、project rebuild 個別節を新設
- cli-reference.md: TUI Enter キー説明にカテゴリメニューフォーカス時の遷移を併記
- cli-reference.md: env export/import 個別節を新設し env-export-import.md へリンク
- README.md: ショートカット一覧に rebuild [name] 追加

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant