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

1. 基本方針

フレームワーク非依存（Vanilla JS + HTML + CSS のみ）

2. 追加要件（必須UI機能）

2.1 llama_server動作状態表示

画面上部または目立つ位置に「llama_serverの動作状態（起動中/停止中/エラー等）」を表示する
状態取得はバックエンドAPIまたはSSE等で定期的に取得
状態に応じて色やアイコンで分かりやすく表示

2.2 格納ドキュメント件数表示

画面上部または目立つ位置に「格納ドキュメント件数（例: 123件）」を表示する
件数はバックエンドAPIで取得し、UIに反映
状態表示やllama_server状態と並列で表示

2.3 mcp.json内容表示・コピー機能

画面上にmcp.json（MCP API仕様等）の内容を表示するボタンを設置
ボタン押下で内容をモーダルや別領域に表示
さらに「クリップボードにコピー」ボタンで内容をコピー可能ｓ

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) ... }        |
-------------------------------+

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. カラースキーム・フォント

フォント: system-ui, sans-serif
タイトル: 太字、大きめ

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>