インターフェース概要

http://localhost:3000 を開くと /workspace が表示されます。画面は 4 つの機能ゾーンで構成されています。

1. 左サイドバー — Workflow、Tasks、Portfolio（素材ライブラリ）の 3 ボタン。
2. トップヘッダー — ワークフロータイトルのメニューと、モード切替（Create / Execute）。
3. キャンバス — ノードを置き、エッジでつなぐ無限キャンバス。
4. Smart Island — 画面下部のフローティングドック。選択状態とモードに応じて表示が変わります。

左サイドバー（左上）

アイコンボタンが 3 つ、次の順で並んでいます。

古いドキュメントでは「素材ボタンは Smart Island にある」と説明していましたが、変更されました。現在は左サイドバーの 3 番目のアイコンです。

トップヘッダー

上部中央にワークフロータイトルのメニューがあります。ワークフロー名をクリックすると、リネーム・保存・現在のキャンバスのフォークができます。

その右にあるのが モード切替 です。

• Create モード（Sparkles アイコン）— デフォルト。ノードを並べ、接続し、ワークフローを組み立てます。Smart Island には Add ツールバーが表示されます。
• Execute モード（Play アイコン）— 実行を指示するモードです。Smart Island は 1 つの Play ボタンだけになります。

詳しい違いは ワークフローモード を参照してください。

キャンバス

メインの作業エリアは、React Flow ベースの無限キャンバスです。パンもズームも自由にできます。基本操作は次のとおりです。

• パン — 中ボタンドラッグ、Space + ドラッグ、またはトラックパッドの 2 本指スクロール。
• ズーム — ピンチ、スクロールホイール、または右下のズームコントロール。
• ノード選択 — クリック。選択状態によって Smart Island の表示が切り替わります。
• 複数選択 — 複数ノードを囲むようにドラッグ、または Shift + クリック。
• 接続 — 出力ハンドル（ノードの右側）から別ノードの入力ハンドル（左側）へドラッグします。接続は ABI に照らして検証され、テキスト出力はテキスト入力へ、画像出力は画像入力へ、というように型が合う場合のみつながります。

Smart Island（下部）

キャンバス下部のフローティングドックです。表示内容はモードと選択状態で決まります。

• Create モード + 選択なし → Add ツールバー（7 つのアイコン：3D モデル、ドキュメント、画像、テキスト、動画、音声、リンク）。クリックすると、ビューポート中央に新しい素材ノードが追加されます。
• Create モード + 1 つ以上のノードを選択 → 選択中のノードに対して意味のある操作が並びます（例：テキストノード選択時は「transform → 画像生成」、音声と動画を選択時は「combine → リップシンク」）。
• Execute モード → 大きな Play ボタンが 1 つ。ワークフローの実行中は、ボタンがマルチカラーにゆっくり明滅します。

ボタンの一覧は Smart Island を参照してください。

ノードの構造

キャンバス上のノードは、どれも次の要素を持ちます。

• ヘッダー — ノードタイプ名と、ドラッグで移動するための小さなハンドル。
• 入力ハンドル（左側）— ノードが ABI で宣言する型付き入力ごとに 1 つ。
• 出力ハンドル（右側）— 型付き出力ごとに 1 つ。
• 本体 — ノードタイプによって変わります。テキスト入力欄、画像プレビュー、音声波形、動画プレイヤー、ドキュメントのファイル名など。
• ステータスインジケーター — このノードに紐づくタスクの実行中に点灯し、完了すると結果またはエラーを表示します。

ノードタイプと入出力の完全な一覧は ノードタイプ を参照してください。

データの保存場所

• ワークフローとノードの位置 — data/tongflow.db（SQLite）。
• アップロードした素材 — ディスク上の data/uploads/。Portfolio から参照されます。
• タスクの実行履歴 — 同じ SQLite データベース内。Zap（Tasks）ボタンから確認できます。

外部の変換ノード（Modal / LLM）につながない限り、データがマシンの外に出ることはありません。