Cognition、エージェント UI 刷新ツール Devin のチャットレンダラーを公開──巨大セッションの読込時間を 70% 削減
数百万メッセージ級の長寿命エージェントセッションにおける DOM レンダリングの限界を、2段階フェッチとアンカー行制御で克服した。
リリース: 2026-08-26 · 読了 3 分記事の要約
1. 核心（What）
- Cognition は Devin のウェブアプリにおけるチャットレンダラーをゼロから書き換え、大規模セッションの読み込み時間を最大 70% 削減した。
- レイアウトシフト（CLS）を 86% 低減し、アプリ全体の入力応答性を示す INP（Interaction to Next Paint）を 36% 改善した。
- 数百万件のメッセージを含むセッションでも、スケルトンアウトラインの導入により遅延なしのスクロールを実現した。
- コンパクトなサイドバー、⌘K パレット、ネストされたサブエージェント管理機能を含むウェブアプリ全体の刷新も同時に同梱された。
2. 影響（Why）
- 長文脈エージェント UI の性能限界を突破: 何日も稼働するエージェントのログをブラウザでそのまま描画するとメモリと DOM が破綻するため、大規模セッションを扱う AI アプリ設計において仮想化とアイランドロードの実装が事実上の必須要件となる。
- 国内 SaaS の複雑なログ管理への応用: [国内 AI エージェント開発・SaaS 運営企業] のような中規模事業者は、数万トークンを超えるマルチターン会話の表示遅延とスクロール飛び現象を解消するためのアーキテクチャ見直しに直結する。
3. 根拠・詳細（How）
- 2段階フェッチとアイランドロードによる軽量化: フルペイロードを最初から取得せず、イベントタイプのみのインデックスを高速スキャンして高さを近似したスケルトンを描画し、スクロール位置周辺の実際のイベントをバッファ付きで順次水和（ハイドレーション）する。
- アンカー行制御によるビューポートの安定化: 実メッセージへ切り替わる際の高さのズレを防ぐため、可視領域の最上部行をアンカーとして固定し、描画後の高さの差分を計算してブラウザ描画前にスクロールオフセットを自動適用する。
4. 展望・課題（Next）
- 自律エージェントによる UI デバッグの活用: 開発チームが構築した仮想化デバッガーのログを夜間バッチで Devin 自身に渡し、並列でバグ修正を行わせるワークフローが今後他の複雑なフロントエンド開発にも展開される可能性。