plan-viewerには、テキストを選択して「ここが分からない」と質問を送れるアノテーション機能（注釈・質問機能）がある。スマホではうまく動くけど、PCでは以下の問題が起きていた：
これらのバグは個別に修正したが、修正を重ねてコードが複雑化してしまった。そこでagentation（エージェント向けビジュアルフィードバックツール、★2,400）のソースコードを分析し、彼らの設計パターンを参考にしてコードを整理しつつ品質を上げる。
現在は「ページ全体の中での絶対位置」で質問ボックスを配置しているため、スクロール量を計算に入れる必要があり、コードが複雑で位置ズレのバグが起きやすい。
agentationと同じ方法に変更する：「今見えてる画面の中での位置」（position: fixed）で配置する。これによりスクロール計算が完全に不要になり、コードが大幅にシンプルになる。
現在は質問ボックスが「パッ」と突然表示される。agentationでは「ふわっ」と0.2秒かけてスケールアップ＋フェードインするアニメーションを使っていて、UIが洗練されている。同じパターンを取り入れる。
外部ライブラリは一切使わず、CSS（見た目のルール）だけで実現するので、ページの読み込み速度に影響なし。
質問ボックスを「選択テキストの上に出すか下に出すか」を判定するために、現在は「一瞬だけ見えない状態で表示して高さを測る」というトリック（visibility: hidden）を使っている。
agentationは固定の推定値（約290px）で判定しており、実測不要。plan-viewerの質問ボックスも内容がほぼ固定（選択テキスト＋入力欄＋ボタン）なので、推定値で十分。これによりコードが4行減り、表示のちらつきリスクもゼロになる。
合計 10ファイル。コード量は全体として減る方向（追加より削除が多い）。
🔬 agentationとは: GitHubで★2,400のオープンソースツール。AIコーディングエージェントに「ここ直して」と伝えるためのビジュアルフィードバックツール。React製だが、UI設計パターンはplan-viewerのようなバニラJS（フレームワーク不使用）にも応用可能。
🎯 YAGNI原則: agentationには多くの高度な機能（マルチセレクト、CSSセレクタ取得、アニメーションフリーズ等）があるが、plan-viewerに必要な3つのパターンだけを厳選して取り入れる。
📱 スマホ互換性: 3つの改善はすべてスマホでも正常に動作する設計。特に配置方法の変更（position: fixed）はスマホのソフトキーボード表示時にもメリットがある。