UI デザイン仕様書 (UI Design Specification)

1. コンセプト: Glassmorphism

TelosDB の UI は、Apple の macOS や Microsoft の Windows 11 のトレンドを取り入れた 「ガラスモーフィズム (Glassmorphism)」 をテーマにしています。 これは、デスクトップアプリという「OSとの調和」が求められる環境において、透明感と高級感を演出するためです。

1.1 デザインの構成要素

• 背景: すりガラスのようなブラー効果（backdrop-filter: blur）。
• ボーダー: 光の屈折を表現する微細なセミ透明の境界線。
• タイポグラフィ: 視認性の高い、モダンなサンセリフ体。

2. インタラクティブ・フィードバック

2.1 ステータス・インジケーター

画面右上のドットは、システムの「生存確認」を行います。

• Green: 全システム正常稼働中。
• Red: サイドカーまたは MCP サーバーの停止。
• Click: 詳細な接続ステータスをポップオーバー表示。

2.2 アクティビティ・ログ (SSE Listener)

検索や登録が発生した際、画面下部にアニメーションと共にログが流れます。 これは SSE (Server-Sent Events) によってバックエンドから「プッシュ」される仕組みになっており、ユーザーはアプリがバックグラウンドで何を行っているかをリアルタイムに把握できます。

3. フロントエンド技術スタック

あえて重量級のフレームワークを避け、Vanilla JS と Vanilla CSS で構成しています。

• 理由: Tauri の WebView2 は非常に高速であり、余計なレイヤーを挟まないことでメモリ消費を抑え、起動速度を最大化するためです。
• SSE 実装: EventSource API をネイティブに使用し、低遅延な通知受け取りを実現。

4. レイアウト構造

メインエリアには現在のドキュメント登録数（Docs Count）が強調表示され、システムの「知識の蓄積状況」を直感的に確認できる設計になっています。 ログエリアは最大 5 件まで履歴を表示し、それ以上は滑らかにフェードアウトします。