07 UIデザイン仕様書（TelosDB クリーンベンチ版）

1. 基本方針

ビジュアルコンセプト: ガラスモーフィズム（Glassmorphism）を採用した、透過感と光沢のあるプレミアムなデスクトップ体験。
技術スタック: フレームワーク非依存（Vanilla JS + HTML + CSS）。
UXの方針: リアルタイムな応答性、常駐による即時利用、AIの挙動の可視化。

2. デザイン・機能仕様

2.1 llama_server 動作状態・モデル表示

ヘッダー部に「モデル名」と「動作ステータス（カラーインジケーター付）」を表示。
ステータス: ● 起動中 (Green), ● 待機中 (Blue), ● 停止中 (Gray/Red)。

2.2 セマンティック検索インターフェース

入力欄と検索ボタンを中央に配置し、検索結果はカード形式で透過背景で表示。

2.3 MCP Activity Log (New)

画面右側にスライドインする「アクティビティログ」パネル。
MCP経由でAIエージェントが実行したツール呼び出しをリアルタイムに表示。

2.4 Resident Mode UI

ウィンドウを閉じてもシステムトレイに格納。
トレイアイコンのクリックで表示/非表示を切り替え。
右クリックメニューで明示的なアプリケーション終了を提供。

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]

4. UI要素仕様

4.1 llama_server状態表示

id="llama-status" などで状態を表示
状態に応じて色分け（例: 緑=起動中, 赤=停止, 黄=エラー）
状態取得はAPI/SSE/ポーリング等で実装（今後拡張）

4.2 ドキュメント件数表示

id="doc-count" などで件数を表示
件数取得はAPIで実装（今後拡張）

4.3 mcp.json内容表示・コピー

id="mcp-json" で内容表示、ボタンで表示/非表示切替・コピー

4.4 入力欄

type="text"、id="query"
placeholder="検索ワード"

4.5 ボタン

type="button"（またはbuttonタグ）
onclick="search()" など

4.6 検索結果表示

preタグ（id="result"）でJSONを整形表示
エラー時はエラーメッセージを表示（今後拡張）

5.1 背景と質感 (Glassmorphism)

背景: 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)。

6. サンプルHTML（実装例）

以下は、UI仕様を満たす最小構成のサンプルHTMLです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>TelosDB</title>
  <style>
    body { font-family: sans-serif; margin: 2em; }
    input, button { font-size: 1.1em; margin: 0.2em; }
    pre { background: #f4f4f4; padding: 1em; border-radius: 6px; }
  </style>
</head>
<body>

  <div id="llama-status" style="font-weight:bold; color:green;">llama_server: 起動中</div>
  <div id="doc-count" style="font-weight:bold; color:#333;">ドキュメント: 123件</div>
  <button onclick="showMcpJson()">mcp.json表示</button>
  <button onclick="copyMcpJson()">コピー</button>
  <pre id="mcp-json" style="display:none;"></pre>
  <h1>TelosDB 検索</h1>
  <input id="query" type="text" placeholder="検索ワード" />
  <button onclick="search()">検索</button>
  <pre id="result"></pre>
  <script>
    async function showMcpJson() {
      const res = await fetch('mcp.json');
      const data = await res.json();
      const pre = document.getElementById('mcp-json');
      pre.textContent = JSON.stringify(data, null, 2);
      pre.style.display = 'block';
    }
    function copyMcpJson() {
      const pre = document.getElementById('mcp-json');
      if (pre.style.display !== 'none') {
        navigator.clipboard.writeText(pre.textContent);
      }
    }
    async function search() {
      const q = document.getElementById('query').value;
      const res = await fetch('http://127.0.0.1:3001/messages', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          jsonrpc: '2.0',
          method: 'search_text',
          params: { content: q, limit: 10 },
          id: 1,
        }),
      });
      const data = await res.json();
      document.getElementById('result').textContent = JSON.stringify(data.result, null, 2);
    }
  </script>
</body>
</html>