<!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>
<site-header></site-header>
<div class="container">
<div class="layout">
<app-sidebar></app-sidebar>
<main class="main-content">
<main-panel></main-panel>
</main>
</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>
<site-footer></site-footer>
<script type="module" src="components/site-header.js"></script>
<script type="module" src="components/app-sidebar.js"></script>
<script type="module" src="components/site-footer.js"></script>
<script type="module" src="components/main-panel.js"></script>
<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");
const dotTop = document.getElementById("llama-status-dot-top");
const textTop = document.getElementById("llama-status-text-top");
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 = "LLM Active";
if (dotTop) { dotTop.style.background = "#22c55e"; dotTop.style.boxShadow = "0 0 8px #22c55e"; }
if (textTop) textTop.textContent = "LLM Active";
} else if (status === "stopped") {
dot.style.background = "#3b82f6"; // blue (for LSA active)
dot.style.boxShadow = "none";
text.textContent = "LSA Active";
if (dotTop) { dotTop.style.background = "#3b82f6"; dotTop.style.boxShadow = "none"; }
if (textTop) textTop.textContent = "LSA Active";
} else {
dot.style.background = "#f59e0b"; // amber
text.textContent = "Wait...";
if (dotTop) dotTop.style.background = "#f59e0b";
if (textTop) textTop.textContent = "Wait...";
}
} catch {
dot.style.background = "#ef4444";
text.textContent = "Err";
if (dotTop) dotTop.style.background = "#ef4444";
if (textTop) textTop.textContent = "Err";
}
}
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();
const modelMain = document.getElementById("model-name-display");
const modelTop = document.getElementById("model-name-top");
if (modelMain) modelMain.textContent = data.model_name || "不明";
if (modelTop) modelTop.textContent = data.model_name || "不明";
} catch {
const modelMain = document.getElementById("model-name-display");
const modelTop = document.getElementById("model-name-top");
if (modelMain) modelMain.textContent = "接続エラー";
if (modelTop) modelTop.textContent = "接続エラー";
}
}
async function reindex() {
if (!confirm("LSAインデックスを再構築します。現在の全データが再学習され、数秒〜数十秒かかる場合があります。実行しますか？")) return;
const btn = document.getElementById("reindex-btn");
const originalText = btn.textContent;
btn.textContent = "Updating...";
btn.disabled = true;
try {
const res = await fetch(`${API_BASE}/messages`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
jsonrpc: "2.0",
method: "lsa_retrain",
params: {},
id: Date.now(),
}),
});
const data = await res.json();
if (data.result) {
alert("LSA再学習を開始しました。完了までしばらくお待ちください。更新状況はSSE経由で反映されます。");
} else {
alert("エラー: " + (data.error || "再学習の開始に失敗しました"));
}
} catch (e) {
alert("通信エラー: " + e.message);
} finally {
btn.textContent = originalText;
btn.disabled = false;
}
}
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>Sim: ${r.similarity.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>
