Skip to content

feat(ui): give the terminal pane a header with tabs, close and size (index.html, src/styles.css, src/main.ts, docs) - #74

Merged
smileygames merged 2 commits into
mainfrom
68-terminal-pane-header
Aug 24, 2026
Merged

feat(ui): give the terminal pane a header with tabs, close and size (index.html, src/styles.css, src/main.ts, docs)#74
smileygames merged 2 commits into
mainfrom
68-terminal-pane-header

Conversation

@smileygames

@smileygames smileygames commented Aug 24, 2026

Copy link
Copy Markdown
Member

Closes #68

診断面を独立した窓にした。上端のヘッダに、窓の名前「端末」・開いている端末のタブ・端末自身の文字サイズ・面を畳む を載せ、角丸は面(#diagnostics)が持つ。端末(#terminal)は上側の角を手放す。

タブと参加者の行は連動する。二つは renderPanel の一回の呼び出しから同時に描くため、連動は構造で成立する。終了した端末のタブには が付き、「読んだ」の合図は暗黙の選択から明示の操作へ移った(showView の終了ビュー破棄は落ちた)。端末の文字サイズは寸法の三軸目であり、会話面(#60)とも UI 全体(#66)とも独立している。

ヘッダが出た状態の実機を見ての三点(#68 本文「実機を見ての追加指示」)を同じ PR で反映済みである——ヘッダに色を敷かない(窓は全体が一つの地)、ヘッダに窓の名前「端末」を出す、枠と端末の間の余白を 0.35rem から 0.15rem へ詰める。最後の一点は端末が使える桁数と行数に直接効く。

受容した重複と代償(タブと行が同じ選択を持つこと、終了した端末が閉じられるまでメモリに残ること)は #68 で決着済みであり、docs/0-requirements.md の「受容したトレードオフ」に記録した。

診断面を独立した窓として扱えるようにする。上端にヘッダを置き、そこへ開いて
いる端末のタブ、端末自身の文字サイズ、面を畳む ✕ を載せる。角丸は面
(#diagnostics) が持ち、端末 (#terminal) は上側の角を手放す。値は 8px で、
ヘッダの上端と面の下端の両方に同じ値が出る。

タブと参加者の行は連動する。どちらを押しても同じ端末が画面に出る。二つは
renderPanel の一回の呼び出しから同時に描くため、連動は実装の約束ではなく
構造で成立する。同じ選択を二つの面が持つ重複は #59 の判断と逆を向くが、
Master が承知の上で両方を選んでいる。

「読んだ」の合図が移る。showView は終了した端末を「別のアカウントが選ばれた」
時点で捨てていたが (#57)、終了したタブに ✕ が付いたことで、その合図は暗黙の
選択から明示の操作へ移る。合図は失われず、置き場所が変わる。代償は閉じられる
までスクロールバックがメモリに残ることであり、受容したトレードオフへ記録した。
走っているセッションのタブには ✕ を出さない。出せば「セッションの終了」と
読まれ、行の 終了 を端末側へ移さない制約を破る。

端末の文字サイズは寸法の三軸目である。会話面 (#60) とも UI 全体 (#66) とも
独立し、互いに相対で乗らない。localStorage の梯子 (9〜24px、既定 13px) で
持ち、変えるたびに fit を呼んで桁数と行数をセッションへ伝える。表示は px で
ある。何桁入るかを決めるのがこの数そのものだからである。

#68
@smileygames smileygames linked an issue Aug 24, 2026 that may be closed by this pull request
@smileygames smileygames self-assigned this Aug 24, 2026
…inset

実機を見ての三点(Master、2026-08-24、#68 本文「実機を見ての追加指示」)。

ヘッダに色を敷かない。窓は全体が一つの地であり、それはページの地 (--bg) で
あってパネルの色味 (--surface) ではない。面が --surface を持っていたのは帯で
あった頃の名残であり、ヘッダを一色の帯として端末の上に置く形になっていた。
ヘッダであることは位置と中身が言う。窓と会話面を分けるのは枠線と角丸である。
地が入れ替わったため、ヘッダの操作子と選択中のタブは --surface で持ち上げる
(タイトルバーの操作子と同じ形)。

ヘッダに窓の名前「端末」を出す。左端に置き、タブはその後ろに並ぶ。何も走って
いないときにヘッダが自分について言うのはこの名前だけになる。

枠と端末の間の余白を 0.35rem から 0.15rem へ詰める。ここは余白ではなく端末が
使っていない面積であり、CLI の桁数と行数は残った寸法から計算される。0 には
しない。xterm はカーソルと選択を自分の箱の縁まで描くため、枠に密着させると縁が
枠線の上へ乗る。

#68

@smileygames smileygames left a comment

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

自己レビュー結果: PASS

#68 の受け入れ基準と、実機を見ての追加指示三点に対して差分を確認した。

受け入れ基準

  • ヘッダ#terminal-head に「端末」・タブ・寸法のピッカー・診断 ボタンは残っており、たためた状態から開く手として機能している( は畳んだ後は届かないため、二つは入口と出口)。
  • は面をたたむ。 セッションは生きたまま、タブは面と一緒に戻る。行の 終了 は動いていない。
  • タブと行の連動renderTerminalTabs()renderPanel() の中から呼ばれており、両面が views から一回の呼び出しで描かれる。約束事で同期を保つ形になっていない点を評価する。
  • 角丸--pane-radius: 8px#diagnostics に乗り、overflow: hidden#terminal は下側の角だけを持つ。
  • 端末の寸法pullcept.terminal-font-size、梯子 9–24px(両端が上下限)、既定 13pxpx 表記は #60% と意図的に別で、桁数を決める数だからという理由が付いている。三軸の独立は保たれている。
  • タブの表示 — アカウント名。走っていないアカウントはタブを持たない。
  • は終了したタブにだけ出るview.ended !== null の中でのみ生成。走っているタブに出ると「セッションの終了」と読まれ、制約を破るため。
  • 「読んだ」の合図の移動showView 冒頭の終了ビュー破棄が消え、closeView() がタブの から呼ばれている。#68 本文に書いたとおりの形。

実機を見ての追加指示(三点とも入っている)

  • ヘッダに色を敷かない — 面全体が --bg になり、--surface はヘッダの中の操作と選択中のタブ側へ移った。ヘッダが帯にならない。
  • 「端末」をヘッダ左に — タブがその後ろ。走っているセッションが無いときに面が自分について言う唯一のものでもある。
  • 枠の余白 — 0.35rem0.15rem0 にしていない理由(xterm がカーソルと選択を箱の縁まで描く)がコメントに残っている。

判断として見るべき点

#terminalmin-height18rem から 0 へ。ヘッダが中に入った固定 50vh の面では、18rem は端末が要求できて与えられない数になり、はみ出しが黙って切られる。落とした判断は妥当。

受容したトレードオフ(docs に記録済み)

  • タブと行が一つの選択を二面で持つ(#59 の判断とは逆向き。#68 で承知の上で選択)。
  • 終了した端末が閉じられるまで scrollback を抱える(#57 は切り替え時の破棄で避けていた)。

実機未確認

追加指示三点の見え方は実機で未確認。docs の未実装節に記録済み。ヘッダ「端末」の表示は、実機を見た上で落とすかを決める暫定であり、落とす判断になった場合は別 issue で扱う(#68 本文)。

次の一手

実行モード auto。人間のレビュー gate は無く、この自己レビュー通過をもって squash merge する。リリース種別は minor 相当(新しい chrome 面の追加と、#57 の合図の置き場所の変更を含み、利用者から観測できる構造変更である)。

@smileygames
smileygames merged commit 47f23d3 into main Aug 24, 2026
2 checks passed
@smileygames
smileygames deleted the 68-terminal-pane-header branch August 24, 2026 00:46
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.

feat(ui): give the terminal pane a header with tabs, close and size

1 participant