サイドバーのノード表示改善: 左寄せ修正とアイコン刷新(lucide-react/simple-icons)

[oboroge0]

概要

• サイドバーの左寄せ修正: ノード一覧の各プラグインボタンにラベルが2行に折り返すと中央寄せに見える不具合を修正
• アイコン表示の全面刷新: 手書きSVG約24種の自前実装（Boxへのサイレントフォールバックあり）を廃止し、lucide-react / simple-icons の実アイコンに置き換え。あわせて重複・破損していたアイコン割り当てを39プラグイン中16件で再設計

1. サイドバーの左寄せ修正

• apps/web/components/editor/Sidebar.tsx:347 — ノード一覧グリッドの各プラグインボタンの className に text-left を追加
  • 原因: <button> はブラウザのデフォルトスタイルで text-align: center になり、Tailwind Preflight もこれを上書きしない。1行に収まるラベルは flex box が内容にシュリンクするため見た目上問題が出ないが、長いラベルが2行に折り返すと2行目が1行目の幅を基準に中央寄せされ、「短いノードは左寄せ、長いノードは中央寄せ」に見える不整合が発生していた
  • 同じファイルのカテゴリヘッダーボタン（Sidebar.tsx:312）はもともと text-left を持っており左寄せで正しかったため、そのスタイルに合わせた
• 監査した他のボタン/ラベル表示箇所（変更不要と判断）:
  • apps/web/components/editor/ContextMenu.tsx:74,159 — 既に text-left 指定済みで、ラベルも truncate（単一行）のため問題なし
  • apps/web/components/editor/CustomNode.tsx:1616,1568 — ノードヘッダーのラベルは truncate で単一行固定のため折り返し自体が発生しない
  • apps/web/components/editor/SearchPanel.tsx — アイコンのみのボタンでテキストラベルなし、対象外
  • apps/web/components/panels/ActivityDrawer.tsx / NodeSettings.tsx — usePluginStore はラベル文字列の参照のみで、プラグイン一覧をボタングリッドとして描画していないため対象外
• 意図的に変更していないもの: Sidebar.tsx の "Loading plugins..." / "No nodes found" 等の空状態メッセージ（text-center は意図した用途）、MotionLibrary.tsx / ExpressionPresets.tsx などの別グリッドピッカー（スコープ外）

2. アイコン表示の全面刷新

アーキテクチャ変更（apps/web/lib/icons.tsx）

• 手書きSVGコンポーネント（~24種）を全て削除し、lucide-react（named importで個別インポート、tree-shaking対応）に置き換え
• "si:<slug>" 形式（例: si:anthropic）のアイコン名は simple-icons のブランドアイコンとして解決。simple-iconsのパスは単色シルエットのため fill でレンダリング（lucideはstroke方式のまま維持し、レンダラー内で分岐）
• getIconComponent(name) / renderIcon(name, props) / デフォルトエクスポートの呼び出し規約（IconProps = size/color/className）は変更なし。呼び出し元（Sidebar.tsx, CustomNode.tsx）の修正は不要
• 見つからない名前は従来通り Box（lucide-react）にフォールバック
• lucide-react@^1.23.0（React 18.3.1と互換）、simple-icons@^16.25.0 を apps/web/package.json に追加。どちらも個別 named import のみを使用しており、import * as は一切していない（バンドルサイズ懸念への対応）

副次的に修正されたバグ

旧・手書きSVGマップに存在せず Box（無地の四角）に見えていたアイコンは、実体を持つ lucide-react アイコンとして自動的に正しく表示されるようになった:
CalendarClock（cron-trigger）, Zap（groq-llm）, AudioLines（openai-tts）※

※ いずれも今回のマニフェスト変更なし（値はそのまま）で自動的に直る

最終アイコン割り当て表（全39プラグイン）

プラグイン	最終 ui.icon	種別	理由
aivis-tts	AudioWaveform	lucide	Volume2の5重複を解消。TTSエンジンごとに区別できる波形系アイコン。AivisSpeechはsimple-iconsに無いため商標を模倣せずlucideの汎用アイコンで代替（色は既存の#8B5CF6を維持、確証のない公式色の推測はしていない）
anthropic-llm	si:anthropic	si:	Cpuの4重複を解消。公式ブランドロゴが simple-icons に実在するため採用。色は公式hex #191919 がダークテーマで不可視のため、Claudeのテラコッタ系アクセント #D97757 を採用（後述の「近黒ブランドカラーの扱い」参照）
audio-player	Volume2（変更なし）	lucide	汎用の音声再生ノード。TTSエンジン群とは役割が異なる正当な汎用アイコンとして維持（意図的な残存、後述）
avatar-configuration	User（変更なし）	lucide	重複なし、意味的に妥当
coeiroink-tts	Radio	lucide	Volume2の5重複を解消。COEIROINKはsimple-iconsに無いためlucideの汎用アイコンで代替（色は既存の#E91E63を維持）
console-output	Terminal（変更なし）	lucide	重複なし
cron-trigger	CalendarClock（値は変更なし）	lucide	旧手書きマップに無く常にBoxに見えていたが、実体を持つlucideアイコンとして自動修正
data-formatter	FileJson（変更なし）	lucide	重複なし
delay	Hourglass	lucide	Clockの2重複を解消（timerと区別）。「待機」を表す典型的アイコン
discord-chat	si:discord	si:	MessageSquareの3重複を解消。公式ブランドロゴ採用。色は既存の#5865F2が既に公式hexと一致していたため変更なし
donation-alert	Gift（変更なし）	lucide	重複なし
emotion-analyzer	Smile（変更なし）	lucide	重複なし
end	Square（変更なし）	lucide	重複なし、「停止」の標準的な表現
foreach	List（変更なし）	lucide	重複なし
google-llm	si:googlegemini	si:	Cpuの4重複を解消。Google全般ではなく製品としてのGeminiロゴを採用。色も公式hex #8E75B2 に更新（既存の汎用Googleブルーから変更、両テーマで可読）
groq-llm	Zap（値は変更なし）	lucide	simple-iconsにGroqのロゴが存在しないことを確認済み。旧手書きマップには無くBoxに見えていたが実体を持つlucideアイコンとして自動修正。色は既存の#F55036を維持
http-request	Globe（変更なし）	lucide	重複なし
lip-sync	Mic（変更なし）	lucide	重複なし。sbv2-ttsのMic2とは別アイコンで区別
loop	RefreshCw（変更なし）	lucide	重複なし
manual-input	Type（変更なし）	lucide	Typeの2重複はtext-transform側を変更して解消。手動入力=「入力」の意味で最も適合するため据え置き
memory-save	Database（manifest未変更）	lucide	他エージェント編集中のためmanifestは触っていない。新レンダラーの lucide マップに Database を追加済みで正しく描画される
memory-search	Search（manifest未変更）	lucide	同上。Search をマップに追加済み
mistral-llm	si:mistralai	si:	Cpuの4重複を解消（Windは旧手書きマップにもなく実質破損状態だった）。公式ブランドロゴ採用。色も公式hex #FA520F に更新（既存の#FF7000から補正）
motion-trigger	Move	lucide	Playの2重複を解消（startと区別）。アバターの動作トリガーを表す意味的に妥当なアイコン
obs-scene-switch	si:obsstudio	si:	公式ブランドロゴ採用。色は公式hex #302E31 が近黒でダークテーマ不可視のため、既存の #8B7CC4 を維持
obs-source-toggle	si:obsstudio	si:	同上。obs-scene-switchと意図的に同一アイコン（後述の「意図的な重複」参照）
ollama-llm	si:ollama	si:	Cpuの4重複を解消。公式ブランドロゴ採用。Ollamaのブランドは黒/白のみで使えるアクセント色がないため、色は既存の #5E81AC を維持
openai-llm	Cpu（値は変更なし）	lucide	simple-iconsにOpenAIのロゴが存在しないことを確認済み（siOpenai等のエクスポートなし）。他3件のLLMプロバイダーがsi:へ移行した結果、Cpuを使うのはopenai-llmのみとなり自然に重複が解消された。色は既存の#10B981（OpenAIのいわゆる"ChatGPT green"に近い一般的に知られた配色）を維持
openai-tts	AudioLines（値は変更なし）	lucide	旧手書きマップに無くBoxに見えていたが実体を持つlucideアイコンとして自動修正。色は既存の#10B981を維持
prompt-builder	FileText（manifest未変更）	lucide	他エージェント編集中のためmanifestは触っていない。FileText をマップに追加済み
random	Dice5（変更なし）	lucide	重複なし
sbv2-tts	Mic2	lucide	Volume2の5重複を解消。Style-Bert-VITS2は音声「スタイル」制御が特徴のためMic系アイコンで区別。simple-iconsに無いため商標を模倣せずlucideで代替（色は既存の#9C27B0を維持）
start	Play（変更なし）	lucide	Playの2重複はmotion-trigger側を変更して解消。ワークフロー開始=「再生」の意味で最も適合するため据え置き
subtitle-display	Subtitles（変更なし）	lucide	重複なし
switch	GitBranch（変更なし）	lucide	重複なし、分岐制御として妥当
text-transform	CaseSensitive	lucide	Typeの2重複を解消（manual-inputと区別）。文字列変換（大文字/小文字等）を表す意味的に妥当なアイコン
timer	Clock（変更なし）	lucide	Clockの2重複はdelay側を変更して解消。「時計」の意味で最も適合するため据え置き
twitch-chat	si:twitch	si:	MessageSquareの3重複を解消。公式ブランドロゴ採用。色は既存の#9146FFが既に公式hexと一致していたため変更なし
variable	Variable（変更なし）	lucide	重複なし
voicevox-tts	Speaker	lucide	Volume2の5重複を解消。VOICEVOXはsimple-iconsに無いためlucideの汎用アイコンで代替（色は既存の#F59E0Bを維持）
youtube-chat	si:youtube	si:	MessageSquareの3重複を解消。公式ブランドロゴ採用。色は既存の#FF0000が既に公式hexと一致していたため変更なし

商標・著作権に関する判断

• simple-icons に実在を確認できたブランド（node_modules/simple-icons の named export を直接確認して採用）: Anthropic, Google Gemini, Mistral AI, Ollama, Discord, Twitch, YouTube, OBS Studio。いずれも公式hexを併せて設定
• simple-icons に存在しないことを確認したブランド（推測でスラッグを書かず、実際に require('simple-icons') のexportを検索して不在を確認）:
  • OpenAI（openai-llm, openai-tts）: siOpenai は存在しない（siOpenaigym のみヒット、別物）。ロゴを自作・模写することはせず、既存の Cpu / AudioLines（lucideの汎用アイコン）と既存の色設定をそのまま維持
  • Groq（groq-llm）: siGroq は存在しない。既存の Zap（lucide）と既存の色設定を維持
  • VOICEVOX / COEIROINK / AivisSpeech / Style-Bert-VITS2（voicevox-tts, coeiroink-tts, aivis-tts, sbv2-tts）: いずれもsimple-iconsに無い。日本語音声合成エンジンでロゴの著作権も不明瞭なため、模写・自作は行わず、エンジンごとに異なるlucideの音声/波形系アイコン（Speaker / Radio / AudioWaveform / Mic2）で視覚的に区別する方針を採用。テキストモノグラム（"V"/"C"等）は検討したが、既存のUIパターン（アイコン+単色チップ）との一貫性を優先し、確実に存在確認できるlucideアイコンでの区別を選んだ
  • 上記いずれも「確証のないブランド色を捏造しない」方針に基づき、色（ui.color/ui.bgColor）は既存値をそのまま維持（変更していない）

近黒ブランドカラーの扱い（ダークテーマ対応）

キャンバス上のノードヘッダーは legibleAccent()（apps/web/components/editor/CustomNode.tsx）で暗いアクセント色から保護されているが、サイドバーは ui.color を生のままアイコンfill・枠線（${color}40）・背景色に使う。そのため simple-icons の公式hexが近黒のブランドはダークテーマのサイドバーでほぼ不可視になる。ブランドの識別は si: シルエット（ロゴ形状）が担うので、ui.color はテーマセーフなアクセントに寄せる判断をした:

• anthropic-llm: 公式hex #191919 → #D97757（Claudeのテラコッタ系アクセント。両テーマで可読かつブランド連想が効く）
• ollama-llm: 公式hex #000000 → 既存色 #5E81AC に復帰(Ollamaは黒/白のみでアクセント色が存在しない）
• obs-scene-switch / obs-source-toggle: 公式hex #302E31 → 既存色 #8B7CC4 に復帰（同上）
• Gemini #8E75B2 / Mistral #FA520F は両テーマで可読なため公式hexのまま

意図的に残した重複

• obs-scene-switch と obs-source-toggle はどちらも si:obsstudio を使用。同一ソフトウェア（OBS Studio）の異なる操作を表すノードであり、他に区別できる公式サブブランドロゴが存在しないための意図的な選択（見落としではない）
• audio-player の Volume2 は、TTSエンジン群（voicevox-tts等）とは異なる「汎用オーディオ再生」ノードとして意図的に維持
• プログラムでの重複チェック（全マニフェストの ui.icon をグループ化するスクリプト）を実施し、上記2件（実質1組）以外の意図しない重複が無いことを確認済み

テスト結果

• cd apps/web && npx tsc --noEmit → エラーなし
• npm run lint（ルート） → web側は既存の警告のみ（変更ファイルである icons.tsx / Sidebar.tsx は0件）。server-ts側の biome エラーは今回のPRで一切変更していない apps/server-ts/src/engine/executor.ts 等の既存 noExplicitAny warningで、dev ブランチに既存の状態（server-tsは1ファイルも触っていない）
• npm test（ルート） → 331 pass / 0 fail（bun:test、tests/ 配下19ファイル）
• cd apps/web && npm run build（Next.js production build, Turbopack） → 成功（simple-icons / lucide-react のバンドラー解決に問題なし）
• 重複アイコンの自動検証スクリプト（全マニフェストの ui.icon をグループ化）→ 意図的な1件（obs系）以外の重複なしを確認

手動確認手順（ライブスクリーンショット検証は未実施）

ポート競合回避の制約上、既存の3000/8001を使う開発サーバーとは別ポートでの起動確認までは実施していません。動作確認する場合の手順:

cd apps/server-ts && PORT=8006 bun run dev
cd apps/web && PORT=3006 npm run dev

（apps/web/lib/runtimeEndpoints.ts を確認し、必要ならバックエンドURLをクエリパラメータ等で8006に向ける）

1. http://localhost:3006/editor/<workflow-id> を開く
2. 左サイドバーでLLM/TTS/チャット系カテゴリを展開し、Claude/Gemini/Mistral/Ollama/Discord/Twitch/YouTube/OBS系ノードがブランドロゴで表示されることを確認
3. ラベルが2行に折り返す長いノード名（例: "Style-Bert-VITS2"）が常に左寄せになっていることを確認
4. ライト/ダークテーマを切り替え、アイコンの視認性（特に si:ollama/si:obsstudio の黒系カラー）を確認

---

🤖 Generated with Claude Code

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: e4d88b91-5004-4970-a75e-95206aa2306e

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/node-icons-sidebar

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}