diff --git a/document/07_ui_design_spec.md b/document/07_ui_design_spec.md index 9da8589..05dea10 100644 --- a/document/07_ui_design_spec.md +++ b/document/07_ui_design_spec.md @@ -2,59 +2,52 @@ ## 1. 基本方針 -- フレームワーク非依存（Vanilla JS + HTML + CSS のみ） +- **ビジュアルコンセプト**: ガラスモーフィズム（Glassmorphism）を採用した、透過感と光沢のあるプレミアムなデスクトップ体験。 +- **技術スタック**: フレームワーク非依存（Vanilla JS + HTML + CSS）。 +- **UXの方針**: リアルタイムな応答性、常駐による即時利用、AIの挙動の可視化。 --- -## 2. 追加要件（必須UI機能） +## 2. デザイン・機能仕様 -### 2.1 llama_server動作状態表示 +### 2.1 llama_server 動作状態・モデル表示 -- 画面上部または目立つ位置に「llama_serverの動作状態（起動中/停止中/エラー等）」を表示する -- 状態取得はバックエンドAPIまたはSSE等で定期的に取得 -- 状態に応じて色やアイコンで分かりやすく表示 +- ヘッダー部に「モデル名」と「動作ステータス（カラーインジケーター付）」を表示。 +- ステータス: ● 起動中 (Green), ● 待機中 (Blue), ● 停止中 (Gray/Red)。 -### 2.2 格納ドキュメント件数表示 +### 2.2 セマンティック検索インターフェース -- 画面上部または目立つ位置に「格納ドキュメント件数（例: 123件）」を表示する -- 件数はバックエンドAPIで取得し、UIに反映 -- 状態表示やllama_server状態と並列で表示 +- 入力欄と検索ボタンを中央に配置し、検索結果はカード形式で透過背景で表示。 -### 2.3 mcp.json内容表示・コピー機能 +### 2.3 MCP Activity Log (New) -- 画面上にmcp.json（MCP API仕様等）の内容を表示するボタンを設置 -- ボタン押下で内容をモーダルや別領域に表示 -- さらに「クリップボードにコピー」ボタンで内容をコピー可能ｓ +- 画面右側にスライドインする「アクティビティログ」パネル。 +- MCP経由でAIエージェントが実行したツール呼び出しをリアルタイムに表示。 + +### 2.4 Resident Mode UI + +- ウィンドウを閉じてもシステムトレイに格納。 +- トレイアイコンのクリックで表示/非表示を切り替え。 +- 右クリックメニューで明示的なアプリケーション終了を提供。 --- -## 3. 画面構成 - -### 3.1 メイン画面要素 - -- **llama_server状態表示**: 画面上部または目立つ位置に「llama_server: 起動中/停止中/エラー」等を色分けで表示 -- **ドキュメント件数表示**: 画面上部または目立つ位置に「ドキュメント: 123件」等を表示 -- **mcp.json表示ボタン**: 画面上部または適切な位置に「mcp.json表示」ボタン -- **mcp.json内容表示**: モーダルや下部領域にJSON内容を整形表示 -- **クリップボードコピー**: 表示領域内に「コピー」ボタン -- **検索ボックス**: テキスト入力（id="query"） -- **検索ボタン**: 検索実行（onclick="search()"） -- **検索結果表示**: 
 にJSON形式で表示
-- **レイアウト**: 画面中央寄せ、余白あり、シンプルなボックス配置
-
-#### レイアウト例
-
-```
--------------------------------+
-| llama_server: [● 起動中]      |
-| ドキュメント: 123件           |
-| [mcp.json表示] [コピー]        |
-| { mcp.jsonの内容 ... }         |
-| TelosDB 検索                 |
-| [検索ワード__________][検索]  |
-|                               |
-| { 検索結果(JSON) ... }        |
--------------------------------+
+```mermaid
+graph TD
+    subgraph "Main Window"
+        Header[Header: Status Hub]
+        Search[Body: Search Interface]
+        Log[Slide Panel: Activity Log]
+    end
+    
+    Header -->|Status| Dot[Status Dot]
+    Header -->|Info| Count[Doc Count]
+    Header -->|Actions| Config[MCP Config Modal]
+    
+    Search -->|Input| Input[Search Bar]
+    Search -->|Output| Results[Result Cards]
+    
+    Log -->|Real-time| SSE[Tool Invocation Log]
 ```
 
 ---
@@ -91,10 +84,22 @@
 - preタグ（id="result"）でJSONを整形表示
 - エラー時はエラーメッセージを表示（今後拡張）
 
-## 5. カラースキーム・フォント
+### 5.1 背景と質感 (Glassmorphism)
 
-- フォント: system-ui, sans-serif
-- タイトル: 太字、大きめ
+- **背景**: `linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)`
+- **パネル/カード**: 背景に `rgba(255, 255, 255, 0.05)`、ブラー効果 `backdrop-filter: blur(10px)`。
+- **ボーダー**: `1px solid rgba(255, 255, 255, 0.1)` で光沢感を表現。
+
+### 5.2 タイポグラフィ
+
+- **フォントファミリー**: `'Inter', 'Roboto', 'Outfit', sans-serif`
+- **強調色**: `#4facfe`, `#00f2fe` (アクティブ/リンク)
+
+### 5.3 アニメーション
+
+- フェードイン: 全体的な要素の登場時。
+- スライドイン: アクティビティログの表示。
+- ホバー変形: 検索ボタンやカードへのマウスオーバー時 (`scale: 1.02`)。
 
 ---