<!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="settings-toggle" title="Settings">Settings</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 class="status-section">
<div class="status-section-title">Channels <span id="channels-summary" class="channels-summary"></span></div>
<div id="channels-list"></div>
</div>
</div>
</div>
<div id="settings-panel" class="status-panel hidden">
<div class="status-header">
<span>Settings</span>
<button id="settings-close" class="icon-btn" title="Close">×</button>
</div>
<div class="status-content">
<div class="settings-field">
<label for="setting-model">Default Model</label>
<input id="setting-model" type="text" data-key="agent.default_model">
</div>
<div class="settings-field">
<label for="setting-port">Server Port</label>
<input id="setting-port" type="number" data-key="server.port">
</div>
<div class="settings-field">
<label for="setting-heartbeat">Heartbeat Interval</label>
<input id="setting-heartbeat" type="text" data-key="heartbeat.interval">
</div>
<div class="settings-field">
<label for="setting-log-level">Log Level</label>
<select id="setting-log-level" data-key="logging.level">
<option value="trace">trace</option>
<option value="debug">debug</option>
<option value="info">info</option>
<option value="warn">warn</option>
<option value="error">error</option>
</select>
</div>
<div class="settings-actions">
<button id="settings-save">Save</button>
<span id="settings-status"></span>
</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>