07 UIデザイン仕様書

1. デザインコンセプト

• Glassmorphism: 透過、ブラー（backdrop-filter）、および淡いボーダーによる奥行きのある質感。
• Color Palette: ダークネイビーを基調とした、深みのあるプレミアムな配色。
• Interaction: Hover 効果やフェードアニメーションによる生き生きとした応答性。

2. レイアウト構造 (Grid System)

1. Header: ブランドロゴ、モデル名、システムステータス（dot + text）、ドキュメント件数。
2. Search Center: インデックス検索入力、および検索実行ボタン。
3. Main Content: カード形式で展開される検索結果リスト。
4. Activity Sidebar: MCP 経由のツール呼び出しをリアルタイム表示するサイドログ領域。
5. Action Bar: MCP 設定、スキーマコピー等の機能ボタン一式。

3. 技術仕様 (Frontend Stack)

• Engine: Tauri 2 (Webview2)
• Style: カスタム CSS 変数による一元管理（styles.css）。
• Data Sync:
  • SSE (Server-Sent Events): サーバー側からの update イベントを購読し、UI を自動リフレッシュ。
  • JSON-RPC Over HTTP: 検索や CRUD 操作のディスパッチ。

4. 特筆すべきデザイン要素

• Status Dot: 起動（緑）、待機（橙）、停止（赤）のカラーインジケーター。

• Glass Panel:

  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);

• Log Animation: 新しいログが上部からスライドインしてフェードインするアニメーション。

5. UI フロー

1. アプリ起動 -> llama-server 状態確認（待機中 -> 起動中）。
2. MCP ツール呼び出し（外部） -> SSE 経由でアクティビティログに項目が追加（アニメーション）。
3. データ変更 -> SSE data_changed 受信 -> ドキュメント件数を自動再取得して更新。