はじめに

Input Assistant for Claude Code の v1.12.1 をリリースした。

今回のメインは 入力タブのレイアウト刷新 だ。機能は変わっていない。

「見た目をちゃんとしたい」という動機だけで手を入れた。

AI選択UIのカード化

これまで入力タブの AI 選択は、ラジオボタンの横並びだった。

○ Claude Code  ○ Codex  ○ Gemini  ○ VS Code Chat

機能的には問題なかった。ただ、サイドバーが少し狭くなるとラベルが詰まって見た目が崩れやすく、どれが選択中かもひと目でわかりにくかった。

v1.12.1 でカード型 UI に変更した。各 AI がアイコン付きのカードとして並び、選択中のカードがハイライトされる。

「どれが選ばれているか」が見た目で明確になったのと、幅が変わっても崩れにくくなった。

レスポンシブ対応：480px 前後が一番変わる

今回、Container Queries を使って 600px / 480px / 400px の3段階でレイアウトが切り替わるようにした。

VS Code のサイドバーは標準的な使い方で 480px 前後になることが多い。この幅あたりで一番変化を感じられる。

変わったもの:

タブヘッダーが詰まったら横スクロール可能に
ボタングループが幅に応じて折り返す
Skills ドロップダウンがビューポートからはみ出さないよう制約

これまでサイドバーを狭くすると UI がはみ出したり重なったりすることがあった。Container Queries を使うことで、親コンテナの幅を基準にレイアウトを切り替えられる。@media では viewport 幅しか見られないので、サイドバーのような「ページ内の一部」には Container Queries の方が素直に書ける。

/* Container Queries の使い方イメージ */
.input-panel {
  container-type: inline-size;
}
 
@container (max-width: 480px) {
  .button-group {
    flex-wrap: wrap;
  }
}
 
@container (max-width: 400px) {
  .tab-header {
    overflow-x: auto;
  }
}

正直なところ

機能追加ではないので「これが便利になりました」と言いにくいリリースだ。

ただ、ラジオボタンのままだと「ちゃんと作られている感」が薄いな、とずっと感じていた。毎日自分で使うものなので、見た目の質も積み重なって体験に影響する。

今回の変更は自分が気持ちよく使い続けるために入れたもの、という認識が正直なところだ。

その他の変更点

細かいバグ修正・改善を含む。詳細は CHANGELOG.md を参照。

インストール・更新

VS Code Marketplace で "Input Assistant for Claude Code" を検索するか、以下から。

参考