<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LocalGPT</title>
<link rel="stylesheet" href="/ui/style.css">
</head>
<body>
<div id="app">
<header>
<h1>LocalGPT</h1>
<div class="header-controls">
<button id="sessions-toggle" title="Saved Sessions">Sessions</button>
<button id="logs-toggle" title="Daemon Logs">Logs</button>
<button id="status-toggle" class="icon-btn" title="Status">
<span class="status-dot" id="status-dot"></span>
</button>
<select id="session-select" title="Select session"></select>
<button id="new-session" title="New session">New</button>
</div>
</header>
<div id="status-panel" class="status-panel hidden">
<div class="status-header">
<span>System Status</span>
<button id="status-close" class="icon-btn" title="Close">×</button>
</div>
<div class="status-content">
<div class="status-row">
<span class="status-label">Version</span>
<span class="status-value" id="status-version">-</span>
</div>
<div class="status-row">
<span class="status-label">Model</span>
<span class="status-value" id="status-model">-</span>
</div>
<div class="status-row">
<span class="status-label">Sessions</span>
<span class="status-value" id="status-sessions">-</span>
</div>
<div class="status-section">
<div class="status-section-title">Heartbeat</div>
<div class="status-row">
<span class="status-label">Status</span>
<span class="status-value" id="heartbeat-status">-</span>
</div>
<div class="status-row">
<span class="status-label">Interval</span>
<span class="status-value" id="heartbeat-interval">-</span>
</div>
<div class="status-row">
<span class="status-label">Last Run</span>
<span class="status-value" id="heartbeat-last">-</span>
</div>
<div class="status-row" id="heartbeat-detail-row" style="display:none;">
<span class="status-label">Detail</span>
<span class="status-value" id="heartbeat-detail">-</span>
</div>
</div>
</div>
</div>
<div id="logs-panel" class="logs-panel hidden">
<div class="logs-header">
<span>Daemon Logs</span>
<div class="logs-controls">
<button id="logs-refresh">Refresh</button>
<label><input type="checkbox" id="logs-auto"> Auto</label>
<button id="logs-close" class="icon-btn">×</button>
</div>
</div>
<pre id="logs-output"></pre>
</div>
<div id="sessions-panel" class="sessions-panel hidden">
<div class="sessions-header">
<span>Saved Sessions</span>
<button id="sessions-close" class="icon-btn">×</button>
</div>
<div id="sessions-list"></div>
<div id="session-viewer" class="hidden">
<button id="session-back">← Back</button>
<div id="session-messages"></div>
</div>
</div>
<main id="chat-container">
<div id="messages"></div>
</main>
<footer>
<textarea id="input" placeholder="Type a message or /help for commands..." rows="1"></textarea>
<button id="send">Send</button>
</footer>
</div>
<script src="/ui/app.js"></script>
</body>
</html>