<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TelosDB | Local Semantic Search</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="glass-panel">
<header>
<div class="brand">
<h1>TelosDB</h1>
<p>Local Sementic Search Engine</p>
<div id="model-name-display" class="model-name" title="現在使用中のモデル">判定中...</div>
</div>
<div class="stats">
<div class="status-badge">
<span id="llama-status-dot" class="status-dot idle"></span>
<span id="llama-status-text">判定中...</span>
</div>
<div class="status-badge">
<span class="accent-purple">◆</span>
<span id="doc-count-value">--</span> docs
</div>
</div>
</header>
<div class="search-container">
<input type="text" id="query" class="search-input" placeholder="知識を検索..." autocomplete="off">
<button onclick="search()" class="search-btn">検索</button>
</div>
<div id="result" class="results-panel">
<!-- 検索結果がここに挿入されます -->
<div class="empty-state">
クエリを入力して検索を開始してください
</div>
</div>
<div class="activity-log">
<div class="activity-log-title">
<span>MCP Activity Log</span>
<span id="activity-count" style="font-weight:normal; font-size: 0.7rem;">Listening...</span>
</div>
<div id="activity-items">
<!-- Tool calls will appear here -->
<div style="text-align:center; color:#475569; padding:10px; font-size:0.8rem;">Waiting for MCP calls...</div>
</div>
</div>
<div class="actions">
<button id="show-mcp-btn" class="secondary-btn">MCP Config</button>
<button id="copy-mcp-btn" class="secondary-btn hidden">Copy Schema</button>
</div>
</div>
</div>
<div class="modal-overlay" id="overlay"></div>
<div id="mcp-json-modal">
<h3 class="modal-title">mcp.json</h3>
<pre id="mcp-json-content"></pre>
<div class="actions">
<button onclick="closeModal()" class="secondary-btn">閉じる</button>
</div>
</div>
<!-- React mount point for small components (e.g. ModelName) -->
<div id="root"></div>
<script>
const API_BASE = "http://127.0.0.1:3001";
async function updateLlamaStatus() {
const dot = document.getElementById("llama-status-dot");
const text = document.getElementById("llama-status-text");
try {
const res = await fetch(`${API_BASE}/llama_status`);
const data = await res.json();
const status = data.status;
if (status === "running") {
dot.style.background = "#22c55e"; // green
dot.style.boxShadow = "0 0 8px #22c55e";
text.textContent = "起動中";
} else if (status === "stopped") {
dot.style.background = "#ef4444"; // red
text.textContent = "停止中";
} else {
dot.style.background = "#f59e0b"; // amber
text.textContent = "待機中";
}
} catch {
dot.style.background = "#ef4444";
text.textContent = "接続エラー";
}
}
async function updateDocCount() {
try {
const res = await fetch(`${API_BASE}/doc_count`);
const data = await res.json();
document.getElementById("doc-count-value").textContent = data.count || "0";
} catch {
document.getElementById("doc-count-value").textContent = "0";
}
}
async function updateModelName() {
try {
const res = await fetch(`${API_BASE}/model_name`);
const data = await res.json();
document.getElementById("model-name-display").textContent = data.model_name || "不明";
} catch {
document.getElementById("model-name-display").textContent = "接続エラー";
}
}
async function search() {
const query = document.getElementById("query").value;
const resultPanel = document.getElementById("result");
if (!query.trim()) return;
resultPanel.innerHTML = '<div class="empty-state">検索中...</div>';
try {
const res = await fetch(`${API_BASE}/messages`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
jsonrpc: "2.0",
method: "search_text",
params: { content: query, limit: 10 },
id: 1,
}),
});
const data = await res.json();
const results = data.result?.content || [];
if (results.length === 0) {
resultPanel.innerHTML = '<div class="empty-state">結果が見つかりませんでした</div>';
return;
}
resultPanel.innerHTML = results.map(r => `
<div class="result-card">
<div class="result-header">
<span>ID: ${r.id}</span>
<span>Score: ${(1 - r.distance).toFixed(4)}</span>
</div>
<div class="result-content">${r.content}</div>
</div>
`).join('');
} catch (e) {
resultPanel.innerHTML = `<div class="empty-state error-state">検索エラー: ${e.message}</div>`;
}
}
// Modal Logic
const modal = document.getElementById("mcp-json-modal");
const overlay = document.getElementById("overlay");
const copyBtn = document.getElementById("copy-mcp-btn");
document.getElementById("show-mcp-btn").onclick = async function () {
const pre = document.getElementById("mcp-json-content");
try {
const res = await fetch("mcp.json");
const text = await res.text();
pre.textContent = text;
modal.classList.add("open");
overlay.classList.add("open");
copyBtn.classList.remove("hidden");
} catch {
alert("mcp.jsonの読み込みに失敗しました");
}
};
function closeModal() {
modal.classList.remove("open");
overlay.classList.remove("open");
}
copyBtn.onclick = function () {
const text = document.getElementById("mcp-json-content").textContent;
navigator.clipboard.writeText(text);
const originalText = this.textContent;
this.textContent = "Copied!";
setTimeout(() => this.textContent = originalText, 2000);
};
overlay.onclick = closeModal;
// Init
setInterval(updateLlamaStatus, 3000);
updateLlamaStatus();
updateDocCount();
updateModelName();
// Setup SSE for real-time updates
const eventSource = new EventSource(`${API_BASE}/sse`);
const activityItems = document.getElementById("activity-items");
let callCount = 0;
eventSource.addEventListener("update", (e) => {
console.log("Data update received:", e.data);
const msg = e.data;
if (msg.startsWith("mcp:call:")) {
// Handle tool call notification
const method = msg.replace("mcp:call:", "");
callCount++;
// Remove empty state if present
if (callCount === 1) activityItems.innerHTML = '';
const now = new Date();
const timeStr = now.toLocaleTimeString('ja-JP', { hour12: false });
const item = document.createElement("div");
item.className = "log-item";
item.innerHTML = `
<span class="log-method">${method}</span>
<span class="log-time">${timeStr}</span>
`;
activityItems.insertBefore(item, activityItems.firstChild);
document.getElementById("activity-count").textContent = `${callCount} events`;
// Limit log items for performance
if (activityItems.children.length > 20) {
activityItems.removeChild(activityItems.lastChild);
}
} else if (msg === "data_changed") {
updateDocCount();
}
});
eventSource.onerror = () => {
console.warn("SSE connection lost. Reconnecting...");
};
// Enter key search
document.getElementById("query").addEventListener("keypress", (e) => {
if (e.key === "Enter") search();
});
</script>
</body>
</html>
