インターフェース概要
http://localhost:3000 を開くと /workspace に着きます。画面は 4 つの機能ゾーンに分かれます：
- 左サイドバー — 3 つのボタン：Workflow、Tasks、Portfolio（素材ライブラリ）
- トップヘッダー — ワークフロータイトルメニュー、モード切替（Create / Execute）
- キャンバス — ノードとエッジが暮らす無限キャンバス
- Smart Island — キャンバス下部のフローティングドック、選択とモードによって表示が変わります
左サイドバー（左上）
3 つのアイコンボタン、左から右に：
| アイコン | 開くもの | 機能 |
|---|---|---|
| Workflow | ワークフローダイアログ | 保存済みワークフローを閲覧、開く、リネーム、複製、削除。新規作成もここから |
| Zap | タスクパネル | アカウントで実行したすべてのタスクの一覧。各タスクをクリックして入出力やエラーを確認。ノードが失敗したときに Modal / LLM のエラーメッセージをここで確認できます |
| FolderOpen | Portfolio ダイアログ | 素材ライブラリ：すべてのワークフローを跨いでアップロードしたファイル。再利用、リネーム、削除が可能。アップロード素材はここに ——Smart Island ではありません。 |
「素材ボタンは 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 モード → 1 つの大きな Play ボタン。実行中はマルチカラーの呼吸ボールに変化
詳細は Smart Island を参照。
ノードの構造
キャンバス上のすべてのノードは：
- ヘッダー — ノードタイプ名と移動用ハンドル
- 入力ハンドル（左側）— ABI で宣言された各型付き入力に対応
- 出力ハンドル（右側）— 各型付き出力に対応
- 本体 — ノードタイプによって異なる：テキスト入力、画像プレビュー、音声波形、動画プレイヤー、ドキュメントファイル名など
- ステータスインジケーター — このノードに紐づくタスクの実行中に点灯、完了時に結果またはエラーを表示
完全なノードカタログは ノードタイプ を参照。
データの保存場所
- ワークフローとノード位置 —
data/tongflow.db（SQLite） - アップロード素材 —
data/uploads/（ローカルディスク）、Portfolio から参照 - タスク実行履歴 — 同じ SQLite。Zap（Tasks）ボタンから閲覧
変換ノードを外部サービス（Modal / LLM）に接続しない限り、データはあなたのマシンから出ません。
