Coding Agent のフロントエンドを、AsyncIterable と自作の pipe で宣言的に実装する

現在、Coding AgentをUIから扱うためのGUIクライアント（Claude Desktopのようなもの）を自作しています。

Streamで出力が末尾に追加されていくようなシンプルなLLMと異なり、Coding Agent の出力は過去のメッセージを更新するケース（過去に実行開始したツールが時間差で完了した場合）や、メッセージとは関係のないメタデータ（セッションタイトルやモデルの変更など）に関するイベントも多く含まれています。 現在の実装ではフロントエンドでSSEの形でイベントを受け取り AsyncIterable に変換しているのですが、AsyncIterable の helper はまだStage2であり、for-await を使うしかありません。しかし、素直に for-await で実装するとコードが複雑になります。（コールバック関数を多用したり、巨大なreducerを書く羽目になります。）

そこで、自作の pipe 関数と、AsyncIterableを扱うための mapやreduce、take、buffer、shareなどの部品を作成し、宣言的に処理を書ける仕組みを作成しました。特にreduceやbufferなどは、中間状態をReact等のフレームワークに依存せずに処理できるため、フレームワークへの依存度を下げることもできます。

このセッションではpipe周辺の具体的な実装を紹介し、 それらをReactへ繋ぎこむまでの方法や工夫を紹介します。