相談 — 蓮さんへ — 2026.07.28

AIタブに端末を埋め込みましたSuperMovie Editor 内で Claude Code を起動する方式について、意見をください

目次

相談したいこと

SUMMARY

SuperMovie Editor の右ドック「AIタブ」に、claude を起動する埋め込み端末を実装しました。別ターミナルで Claude Code を起動する「2窓運用」が不要になります。

このページの目的はひとつだけです。この「エディタに端末を埋め込む」という方式そのものについて、蓮さんの意見が欲しい。賛成でも反対でも「こうした方がいい」でも構いません。技術的な詳細は後半に置いています。まず末尾の「聞きたいこと4点」だけ見ていただければ要点はつかめます。

実物

実際の画面です。右端の「AI」タブの中で claude が動いています。下の 「待機を開始（編集指示を受け付ける）」 を押すと待機プロンプトが端末に自動で入り、「指示待ちに入りました」まで進んだ状態です。

ライトモードのエディタ全景。右端の AI タブに Claude Code の端末が表示されている
ライトモード全景。端末もエディタのテーマに追従して白背景になる
ダークモードのエディタ全景。端末も暗い配色に切り替わっている
同じ画面のダークモード。--settings のインライン注入で Claude 側の配色も合わせている
AI タブの拡大

AI タブだけを拡大したものです。指示入力欄は廃止し、端末だけにしました（この判断への意見も聞きたいところです）。最下部が「待機を開始」ボタンです。

ライトモードの AI タブ拡大。白背景の端末に Claude Code が動作している
ライト
ダークモードの AI タブ拡大。暗い背景の端末
ダーク
テーマ追従の制約: Claude 側の配色は起動時に決まるため、端末を開いた後にテーマを切り替えると、背景は追従しますが Claude の文字色は前のままです。切り替えてから開き直せば揃います。

何を作ったか

DONE

SuperMovie Editor（Vite dev サーバがそのまま製品として動くブラウザアプリ）の AI タブの中に、claude を pty で起動する埋め込みターミナルを実装しました。

なぜこの方式にしたか

経緯

当初は Eclipse Theia で Electron アプリ化し、公式の Claude Code VS Code 拡張（チャット UI）を載せる案でした。競合の AKARI Video がこの方式です。取り下げた理由は2つあります。

技術構成

実装ファイル

サーバ側4ファイル・クライアント側2ファイルの新規追加のみで、既存の plugin.ts（814行）には一切触っていません。独立した Vite プラグイン smeClaude() に束ね、vite.config.ts の plugins 配列で smeServer() の前に置いています。

ファイル役割
claudeBin.tsclaude の検出（グローバル優先→エディタ管理ディレクトリ）
claudeInstallJob.tsローカル導入ジョブ（版固定・進捗ポーリング）
ptySession.tsnode-pty で claude を起動。エディタ全体で1セッション
ptyApi.tsWebSocket。接続制御
ClaudeTerminal.tsxxterm クライアント

起動時の工夫

MCP・テーマ

セキュリティ設計

pty入力＝任意コード実行相当として設計

検証状況

緑でも隠れていた実バグ

typecheck 0 / unit 2618件 全緑 / e2e（実ブラウザ・偽 claude）7件 全緑。ただし「テストが全部緑なのに壊れていた」実バグをレビューで6件潰しています。

#内容
1ws.close() が相手の応答まで最大30秒つながったままで、その間 takeover 後の旧タブが pty に書き込めた
2旧 WebSocket の onclose が新接続の参照を潰し、再起動すると誤エラー表示 or キー入力が消えた
3flex-basis:auto の兄弟が肥大し、履歴が溜まるとターミナルが 0px に消えた（子の min-height は外側配分で効かない）
4Origin にポートを決め打ちしていたため、別ポート起動で無言で壊れた
5MCP URL が実ポートに追随せず、別ポート起動時に別インスタンスの受け箱へ指示が流れる汚染経路があった
6xterm に fontFamily 未指定で、罫線・記号が別フォントへフォールバックし桁がずれた（実測: 英数字7.20px に対し ─/▶/⚠ が12.00px＝幅3種類 → 修正後は全て7.22px＝1種類）

実機フィードバックで変えた点

簡素化

最初は AI タブに「在席表示＋指示履歴＋指示入力欄＋端末」を積んでいましたが、たきが実機で見て「初心者には渋滞している・黒い端末が怖い」と判断。端末だけに簡素化し、エディタのテーマに追従（白背景可）させました。

指示入力欄は削除しましたが、サーバ側の受け箱・MCP は1行も消していないので、別ターミナルで Claude Code を動かす従来の並列運用は今まで通り使えます。

Codex や他の AI ツールは呼べるか

結論: 可能。ただし現状は未対応

今の実装では起動できません。 ptySession.ts は claude に固定しています。これは意図的な安全設計で、任意のコマンドを起動できる口にすると pty が汎用のリモートシェルになってしまうためです。

一方で Codex 側の受け入れ体制は揃っています（codex --help で実測確認）。エディタの MCP は HTTP（http://127.0.0.1:<ポート>/mcp）ですが、Codex は "streamable HTTP MCP server" に対応しているため直接つながります。stdio 専用ならブリッジが必要でしたが、その心配はありません。

Claude CodeCodex
HTTP MCP○○（codex mcp add <名前> --url <URL>）
設定のインライン注入--mcp-config '<JSON>'-c mcp_servers.…=…（ドット記法・TOML 値）
ユーザー設定を汚さない厳格モード--strict-mcp-config--strict-config

待機プロンプトを端末に打ち込む仕組みは特定のツールに依存していない（pty に文字列を書くだけ）ので、「起動できる対象の許可リストに codex を足す」という変更が中心になります。

素直にはいかない点（正直に4つ）

つまり「一箇所直せば両対応」ではなく、ツールごとの薄いアダプタを1枚ずつ書く形になります。土台（pty・接続制御・導入ジョブ・テーマ）は共有できるので、2つ目からは軽くなります。

参考: 競合の AKARI Video も Claude と Codex の両対応で、同じくツールごとの分岐を持っています。

聞きたいこと5点

1. この方式そのものへの賛否 — 端末を埋め込む方向か、Theia で公式チャット UI を載せる方向か
2. 指示入力欄を消したこと — 編集を頼むには端末に直接打つ形になった。受講生にはどちらが良いか
3. Codex 対応をやるべきか — 技術的には可能（上記）。受講生の入口を Claude 一本に絞る方が親切か、選べる方が良いか
4. Windows の node-pty — テスト PC 到着後に確認予定。ここが通らなければ設計を見直す必要がある
5. 受講生が Claude の有料サブスクを契約する前提 — どちらの方式でも必要。事業判断として成立するか

残っている作業

未完了