<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TelosDB - Database Browser</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="sidebar">
<div class="sidebar-header">
<h1>TelosDB</h1>
</div>
<div class="sidebar-section">
<div class="sidebar-section-title">Status</div>
<ul class="status-list">
<li class="status-item">
<span>MCP Server</span>
<span id="mcp-status" class="tag tag-orange">Loading</span>
</li>
<li class="status-item">
<span>LLM Engine</span>
<span id="sidecar-status" class="tag tag-orange">Checking</span>
</li>
</ul>
</div>
<div class="sidebar-section">
<div class="sidebar-section-title">Database Browser</div>
<ul id="table-list" class="table-list">
<!-- Tables loaded here -->
</ul>
</div>
<div class="sidebar-section" style="margin-top: auto;">
<button class="btn btn-outline" style="width: 100%; border-radius: 8px;" onclick="loadMcpConfig()">
MCP Config
</button>
</div>
</div>
<div class="main-content">
<div class="main-header">
<h2 id="current-title">Welcome to TelosDB</h2>
<div id="loading-indicator" style="display: none;">
<div class="spinner" style="width: 24px; height: 24px; border-width: 3px;"></div>
</div>
</div>
<div id="main-tabs" class="tabs" style="display: none;">
<div id="tab-data" class="tab active" onclick="switchTab('data')">Data Explorer</div>
<div id="tab-schema" class="tab" onclick="switchTab('schema')">Schema</div>
<div id="tab-vector" class="tab" onclick="switchTab('vector')">Vector Search</div>
</div>
<div class="view-container">
<!-- Empty View -->
<div id="view-empty" class="empty-state">
<div class="empty-state-icon">📁</div>
<h3>データベースを選択してください</h3>
<p>左側のリストからテーブルを選択してデータを閲覧するか、<br>ベクトル検索タブでAI機能を利用できます。</p>
</div>
<!-- Data Explorer View -->
<div id="view-data" class="view">
<div class="search-container">
<div class="input-group">
<input type="text" id="table-search" placeholder="ID or Contentで部分一致検索..."
onkeyup="if(event.key==='Enter') searchTable()">
</div>
<button class="btn" onclick="searchTable()">Search</button>
</div>
<div class="table-wrapper">
<table id="data-table">
<thead id="data-head"></thead>
<tbody id="data-body"></tbody>
</table>
</div>
<div class="pagination">
<span id="pagination-info">Showing 0-0 of 0</span>
<div style="display: flex; gap: 10px;">
<button id="prev-btn" class="btn btn-outline" onclick="changePage(-1)">Previous</button>
<button id="next-btn" class="btn btn-outline" onclick="changePage(1)">Next</button>
</div>
</div>
</div>
<!-- Schema View -->
<div id="view-schema" class="view">
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Nullable</th>
<th>PK</th>
<th>Default</th>
</tr>
</thead>
<tbody id="schema-body"></tbody>
</table>
</div>
</div>
<!-- Vector Search View -->
<div id="view-vector" class="view">
<div class="search-container" style="flex-direction: column;">
<textarea id="vector-input" rows="3" placeholder="文章を入力してください。AIが意味の近い内容を検索します..."></textarea>
<div style="display: flex; justify-content: flex-end; margin-top: 12px; gap: 12px;">
<div
style="display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-secondary);">
Limit: <input type="number" id="vector-limit" value="5" min="1" max="50"
style="width: 60px; padding: 4px 8px;">
</div>
<button class="btn" onclick="executeVectorSearch()">
<span>Launch Vector Search</span>
</button>
</div>
</div>
<div id="vector-results">
<!-- Results populated here -->
</div>
</div>
<!-- MCP Config View -->
<div id="view-mcp" class="view">
<div class="json-block">
<div
style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
<h4 style="color: var(--accent-color);">mcp.json Configuration</h4>
<button class="btn btn-outline" style="padding: 4px 12px; font-size: 0.75rem;"
onclick="copyConfig()">Copy JSON</button>
</div>
<pre id="mcp-json"
style="max-height: 500px; overflow: auto; background: rgba(0,0,0,0.3); padding: 16px; border-radius: 8px; border: 1px solid var(--border-color); font-size: 0.8rem;"></pre>
</div>
</div>
</div>
</div>
<script type="module" src="index.js"></script>
</body>
</html>
