cf99c06b97
- Add Bootstrap 5.3.3 CSS/JS via CDN to base.html with dark theme (data-bs-theme="dark") - Rework index.html to use Bootstrap grid (container-fluid, row, col-md-3/9), card components, and form utilities - Update health_status partial to use Bootstrap card-header/card-body structure - Rewrite style.css to override Bootstrap CSS variables for the dark mission-control palette; replace .badge.up/down/ready with .mc-badge-* modifiers; adapt layout and mobile breakpoints to Bootstrap grid All 27 tests pass. https://claude.ai/code/session_01KZMfwBpLuiv6x9GbzTqbys
98 lines
3.2 KiB
HTML
98 lines
3.2 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="container-fluid mc-content h-100">
|
|
<div class="row g-3 h-100">
|
|
|
|
<!-- Sidebar -->
|
|
<div class="col-12 col-md-3 d-flex flex-column gap-3 mc-sidebar">
|
|
|
|
<!-- Agents -->
|
|
<div class="card mc-panel">
|
|
<div class="card-header mc-panel-header">// AGENTS</div>
|
|
<div class="card-body p-3">
|
|
<div class="mc-agent-card">
|
|
<div class="d-flex align-items-center gap-2 mb-2">
|
|
<span class="status-dot amber"></span>
|
|
<span class="agent-name">TIMMY</span>
|
|
</div>
|
|
<div class="agent-meta">
|
|
<span class="meta-key">TYPE</span> <span class="meta-val">sovereign</span><br>
|
|
<span class="meta-key">MODEL</span> <span class="meta-val">llama3.2</span><br>
|
|
<span class="meta-key">BACKEND</span> <span class="meta-val">ollama</span><br>
|
|
<span class="meta-key">VERSION</span> <span class="meta-val">1.0.0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- System Health (HTMX polled) -->
|
|
<div class="card mc-panel"
|
|
hx-get="/health/status"
|
|
hx-trigger="load, every 30s"
|
|
hx-target="this"
|
|
hx-swap="innerHTML">
|
|
<div class="card-header mc-panel-header">// SYSTEM HEALTH</div>
|
|
<div class="card-body p-3">
|
|
<div class="health-row">
|
|
<span class="health-label">LOADING...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Chat Panel -->
|
|
<div class="col-12 col-md-9 d-flex flex-column mc-chat-panel">
|
|
<div class="card mc-panel flex-grow-1 d-flex flex-column min-h-0">
|
|
<div class="card-header mc-panel-header">// TIMMY INTERFACE</div>
|
|
|
|
<div class="chat-log flex-grow-1 overflow-auto p-3" id="chat-log">
|
|
<div class="chat-message agent">
|
|
<div class="msg-meta">TIMMY // SYSTEM</div>
|
|
<div class="msg-body">Mission Control initialized. Timmy ready — awaiting input.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-footer mc-chat-footer">
|
|
<form hx-post="/agents/timmy/chat"
|
|
hx-target="#chat-log"
|
|
hx-swap="beforeend"
|
|
hx-indicator="#send-indicator"
|
|
hx-sync="this:drop"
|
|
hx-disabled-elt="find button"
|
|
hx-on::after-settle="this.reset(); scrollChat()"
|
|
class="d-flex gap-2">
|
|
<input type="text"
|
|
name="message"
|
|
class="form-control mc-input"
|
|
placeholder="send a message to timmy..."
|
|
autocomplete="off"
|
|
autocorrect="off"
|
|
autocapitalize="none"
|
|
spellcheck="false"
|
|
enterkeyhint="send"
|
|
required />
|
|
<button type="submit" class="btn mc-btn-send">
|
|
SEND
|
|
<span id="send-indicator" class="htmx-indicator">▋</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function scrollChat() {
|
|
const log = document.getElementById('chat-log');
|
|
log.scrollTop = log.scrollHeight;
|
|
}
|
|
scrollChat();
|
|
</script>
|
|
|
|
{% endblock %}
|