embedded-lab-control 0.2.0__py3-none-any.whl

labctl/web/templates/activity.html

@@ -0,0 +1,202 @@
+{% extends "base.html" %}
+
+{% block title %}Activity — Lab Controller{% endblock %}
+
+{% block head %}
+<style>
+  .activity-page { max-width: 1400px; }
+  .activity-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
+  .activity-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
+  .filter-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: #e9ecef; cursor: pointer; font-size: 0.85rem; border: 1px solid transparent; }
+  .filter-chip.active { background: #0d6efd; color: white; }
+  .filter-chip.source-cli.active { background: #0d6efd; }
+  .filter-chip.source-mcp.active { background: #6f42c1; }
+  .filter-chip.source-api.active { background: #20c997; }
+  .filter-chip.source-daemon.active { background: #6c757d; }
+  .filter-chip.source-internal.active { background: #adb5bd; color: #212529; }
+  .activity-status { font-size: 0.8rem; color: #6c757d; margin-left: 1rem; }
+  .activity-status.live::before { content: "●"; color: #28a745; margin-right: 0.3rem; }
+  .activity-status.stale::before { content: "●"; color: #dc3545; margin-right: 0.3rem; }
+  .activity-feed { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 0.85rem; border: 1px solid #dee2e6; border-radius: 4px; background: #fafafa; max-height: 70vh; overflow-y: auto; }
+  .activity-row { display: grid; grid-template-columns: 180px 200px 80px 160px 160px 80px 1fr; gap: 0.5rem; padding: 0.35rem 0.6rem; border-bottom: 1px solid #eee; align-items: baseline; }
+  .activity-row:last-child { border-bottom: none; }
+  .activity-row.row-new { animation: flash-new 1.2s ease-out; }
+  @keyframes flash-new { from { background: #fff3cd; } to { background: transparent; } }
+  .col-ts { color: #6c757d; }
+  .col-actor { color: #0d6efd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .col-source { font-size: 0.75rem; padding: 0.1rem 0.4rem; border-radius: 3px; background: #e9ecef; text-align: center; color: #495057; }
+  .col-source.source-cli { background: #cfe2ff; color: #084298; }
+  .col-source.source-mcp { background: #e2d9f3; color: #3d2a7e; }
+  .col-source.source-api { background: #d1f2eb; color: #0f6848; }
+  .col-source.source-daemon { background: #dee2e6; color: #495057; }
+  .col-action { font-weight: 500; }
+  .col-target { color: #495057; }
+  .col-result.result-ok { color: #28a745; }
+  .col-result.result-error { color: #dc3545; font-weight: bold; }
+  .col-result.result-forbidden { color: #fd7e14; }
+  .col-details { color: #6c757d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .activity-empty { padding: 2rem; text-align: center; color: #6c757d; }
+  .pause-btn { font-size: 0.85rem; padding: 0.2rem 0.6rem; margin-left: 0.5rem; }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="activity-page">
+  <div class="activity-header">
+    <div>
+      <h1 style="display: inline-block; margin: 0;">Activity</h1>
+      <span id="activity-status" class="activity-status">connecting…</span>
+      <button id="pause-btn" class="btn btn-sm btn-secondary pause-btn">Pause</button>
+    </div>
+    <div>
+      <span id="event-count" style="font-size: 0.85rem; color: #6c757d;">0 events</span>
+    </div>
+  </div>
+
+  <div class="activity-filters" id="filters">
+    <span style="align-self: center; font-size: 0.85rem; color: #495057;">Source:</span>
+    <span class="filter-chip source-cli" data-filter="source" data-value="cli">cli</span>
+    <span class="filter-chip source-mcp" data-filter="source" data-value="mcp">mcp</span>
+    <span class="filter-chip source-api" data-filter="source" data-value="api">api</span>
+    <span class="filter-chip source-daemon" data-filter="source" data-value="daemon">daemon</span>
+    <span class="filter-chip source-internal" data-filter="source" data-value="internal">internal</span>
+    <span style="align-self: center; font-size: 0.85rem; color: #495057; margin-left: 1rem;">Result:</span>
+    <span class="filter-chip" data-filter="result" data-value="ok">ok</span>
+    <span class="filter-chip" data-filter="result" data-value="error">error</span>
+    <span class="filter-chip" data-filter="result" data-value="forbidden">forbidden</span>
+  </div>
+
+  <div class="activity-feed" id="feed">
+    <div class="activity-empty">Loading…</div>
+  </div>
+</div>
+
+<script>
+(function() {
+  const feed = document.getElementById('feed');
+  const statusEl = document.getElementById('activity-status');
+  const countEl = document.getElementById('event-count');
+  const pauseBtn = document.getElementById('pause-btn');
+
+  // Deduplicate by id (server-rendered initial + SSE first hydration overlap).
+  const seen = new Set();
+  const maxRows = 2000;
+  let eventCount = 0;
+  let paused = false;
+  let buffered = [];  // events while paused
+
+  // Active filters: { source: Set, result: Set }
+  const filters = { source: new Set(), result: new Set() };
+
+  function matchesFilters(event) {
+    if (filters.source.size && !filters.source.has(event.source)) return false;
+    if (filters.result.size && !filters.result.has(event.result)) return false;
+    return true;
+  }
+
+  function formatDetails(detailsJson) {
+    if (!detailsJson) return '';
+    try {
+      const o = JSON.parse(detailsJson);
+      if (o.message) return o.message;
+      return Object.keys(o).map(k => `${k}=${JSON.stringify(o[k])}`).join(' ');
+    } catch (e) {
+      return detailsJson;
+    }
+  }
+
+  function renderRow(event, isNew) {
+    const row = document.createElement('div');
+    row.className = 'activity-row' + (isNew ? ' row-new' : '');
+    row.dataset.source = event.source;
+    row.dataset.result = event.result;
+    row.innerHTML = `
+      <div class="col-ts">${event.logged_at || ''}</div>
+      <div class="col-actor" title="${event.actor}">${event.actor}</div>
+      <div class="col-source source-${event.source}">${event.source}</div>
+      <div class="col-action">${event.action}</div>
+      <div class="col-target">${event.entity_name || '-'}</div>
+      <div class="col-result result-${event.result}">${event.result}</div>
+      <div class="col-details" title="${formatDetails(event.details).replace(/"/g, '&quot;')}">${formatDetails(event.details)}</div>
+    `;
+    if (!matchesFilters(event)) row.style.display = 'none';
+    return row;
+  }
+
+  function addEvent(event) {
+    if (seen.has(event.id)) return;
+    seen.add(event.id);
+    eventCount++;
+    countEl.textContent = `${eventCount} events`;
+
+    if (paused) {
+      buffered.push(event);
+      return;
+    }
+    // Clear "Loading..." placeholder on first render.
+    if (feed.querySelector('.activity-empty')) feed.innerHTML = '';
+    feed.prepend(renderRow(event, true));
+    // Trim oldest rows.
+    while (feed.children.length > maxRows) {
+      feed.removeChild(feed.lastChild);
+    }
+  }
+
+  function applyFilters() {
+    feed.querySelectorAll('.activity-row').forEach(row => {
+      const match =
+        (!filters.source.size || filters.source.has(row.dataset.source)) &&
+        (!filters.result.size || filters.result.has(row.dataset.result));
+      row.style.display = match ? '' : 'none';
+    });
+  }
+
+  // Server-rendered initial events (oldest-first → render newest-first).
+  const initial = {{ initial_events | tojson }};
+  for (let i = initial.length - 1; i >= 0; i--) addEvent(initial[i]);
+  if (initial.length === 0) {
+    feed.innerHTML = '<div class="activity-empty">No events yet.</div>';
+  }
+
+  // Filter chips.
+  document.querySelectorAll('.filter-chip').forEach(chip => {
+    chip.addEventListener('click', () => {
+      const f = chip.dataset.filter;
+      const v = chip.dataset.value;
+      if (filters[f].has(v)) { filters[f].delete(v); chip.classList.remove('active'); }
+      else { filters[f].add(v); chip.classList.add('active'); }
+      applyFilters();
+    });
+  });
+
+  // Pause / resume.
+  pauseBtn.addEventListener('click', () => {
+    paused = !paused;
+    pauseBtn.textContent = paused ? `Resume (${buffered.length})` : 'Pause';
+    if (!paused) {
+      while (buffered.length) {
+        const event = buffered.shift();
+        if (feed.querySelector('.activity-empty')) feed.innerHTML = '';
+        feed.prepend(renderRow(event, true));
+      }
+      while (feed.children.length > maxRows) feed.removeChild(feed.lastChild);
+    } else {
+      setInterval(() => { if (paused) pauseBtn.textContent = `Resume (${buffered.length})`; }, 500);
+    }
+  });
+
+  // SSE connection.
+  const es = new EventSource('{{ url_for("views.activity_stream") }}');
+  es.onopen = () => { statusEl.className = 'activity-status live'; statusEl.textContent = 'live'; };
+  es.onerror = () => { statusEl.className = 'activity-status stale'; statusEl.textContent = 'reconnecting…'; };
+  es.addEventListener('activity', (ev) => {
+    try {
+      const event = JSON.parse(ev.data);
+      addEvent(event);
+    } catch (e) {
+      console.warn('bad activity event', e);
+    }
+  });
+})();
+</script>
+{% endblock %}

labctl/web/templates/base.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Lab Controller{% endblock %}</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    {% block head %}{% endblock %}
+</head>
+<body>
+    <nav class="navbar">
+        <div class="nav-brand">
+            <a href="{{ url_for('views.index') }}">Lab Controller</a>
+        </div>
+        <div class="nav-links">
+            <a href="{{ url_for('views.index') }}" class="nav-link">Dashboard</a>
+            <a href="{{ url_for('views.activity') }}" class="nav-link">Activity</a>
+            <a href="{{ url_for('views.settings') }}" class="nav-link">Settings</a>
+            <a href="{{ url_for('api.health_check') }}" class="nav-link">API</a>
+            {% if session.get('user') %}
+            <span class="nav-user">{{ session['user'] }}</span>
+            <form action="{{ url_for('auth.logout') }}" method="post" class="inline-form nav-logout">
+                <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
+                <button type="submit" class="btn btn-sm btn-secondary">Logout</button>
+            </form>
+            {% endif %}
+        </div>
+    </nav>
+
+    <main class="container">
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    <div class="alert alert-{{ category }}">{{ message }}</div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+
+        {% block content %}{% endblock %}
+    </main>
+
+    <footer class="footer">
+        <p>Lab Controller v{{ labctl_version }}</p>
+    </footer>
+
+    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
+    {% block scripts %}{% endblock %}
+</body>
+</html>

labctl/web/templates/claim_refused.html

@@ -0,0 +1,38 @@
+{% extends "base.html" %}
+
+{% block title %}{{ sbc_name }} is claimed - Lab Controller{% endblock %}
+
+{% block content %}
+<div class="page-header">
+    <a href="{{ back }}" class="back-link">&larr; Back to {{ sbc_name }}</a>
+    <h1>Not changed: {{ sbc_name }}</h1>
+</div>
+
+<div class="claim-section">
+    <h3>{% if body.error == "sbc_claimed" %}Claimed by another user{% else %}Not allowed{% endif %}</h3>
+    <p>{{ body.message }}</p>
+    {% if body.claim and body.claim.reason %}
+    <div class="info-row">
+        <span class="label">Reason:</span>
+        <span class="value">{{ body.claim.reason }}</span>
+    </div>
+    {% endif %}
+    {% if body.error == "sbc_claimed" and body.claim and body.claim.is_active %}
+    <p>Wait for the claim to end, or ask its holder to release it
+    (<code>labctl request-release {{ body.sbc_name }} -r REASON</code>).</p>
+    {% elif body.error == "sbc_claimed" %}
+    <p>The claim has expired but is in its grace period; retry once it ends.</p>
+    {% endif %}
+    {% if can_override %}
+    <form action="{{ action }}" method="post" class="mt-2">
+        <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
+        {% for key, value in fields %}
+        <input type="hidden" name="{{ key }}" value="{{ value }}">
+        {% endfor %}
+        <input type="hidden" name="override_claim" value="1">
+        <button type="submit" class="btn btn-sm btn-danger">Override the claim and continue</button>
+        <span>(recorded in the activity log)</span>
+    </form>
+    {% endif %}
+</div>
+{% endblock %}

labctl/web/templates/console.html

@@ -0,0 +1,237 @@
+{% extends "base.html" %}
+
+{% block title %}Console - {{ sbc.name }}{% endblock %}
+
+{% block head %}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.min.css">
+<style>
+    .console-container {
+        background: var(--color-surface);
+        border-radius: var(--border-radius);
+        border: 1px solid var(--color-primary);
+        padding: 1rem;
+        margin-bottom: 1rem;
+    }
+
+    .console-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 1rem;
+        padding-bottom: 0.5rem;
+        border-bottom: 1px solid var(--color-primary);
+    }
+
+    .console-status {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .status-dot {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: var(--color-text-muted);
+    }
+
+    .status-dot.connected {
+        background: var(--color-success);
+        box-shadow: 0 0 8px var(--color-success);
+    }
+
+    .status-dot.disconnected {
+        background: var(--color-danger);
+    }
+
+    #terminal {
+        height: 500px;
+    }
+
+    .console-footer {
+        margin-top: 1rem;
+        padding-top: 0.5rem;
+        border-top: 1px solid var(--color-primary);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .console-info {
+        color: var(--color-text-muted);
+        font-size: 0.9rem;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<a href="{{ url_for('views.sbc_detail', name=sbc.name) }}" class="back-link">&larr; Back to {{ sbc.name }}</a>
+
+<div class="page-header">
+    <h1>Console: {{ sbc.name }}</h1>
+    <p>Serial console connection</p>
+</div>
+
+<div class="console-container">
+    <div class="console-header">
+        <div class="console-status">
+            <span class="status-dot" id="status-indicator"></span>
+            <span id="status-text">Disconnected</span>
+        </div>
+        <div>
+            <button class="btn btn-success btn-sm" id="connect-btn" onclick="connectConsole()">Connect</button>
+            <button class="btn btn-danger btn-sm" id="disconnect-btn" onclick="disconnectConsole()" style="display: none;">Disconnect</button>
+        </div>
+    </div>
+
+    <div id="terminal"></div>
+
+    <div class="console-footer">
+        <div class="console-info">
+            {% if port %}
+            Port: {{ port.device_path }} | TCP: {{ port.tcp_port }} | Baud: {{ port.baud_rate }}
+            {% else %}
+            No console port configured
+            {% endif %}
+        </div>
+        <div class="console-info">
+            <span id="write-status">Read-only</span>
+        </div>
+    </div>
+</div>
+
+<div class="detail-card">
+    <h3>Keyboard Shortcuts</h3>
+    <table class="detail-table">
+        <tr><th>Ctrl+C</th><td>Send interrupt signal</td></tr>
+        <tr><th>Ctrl+D</th><td>Send EOF</td></tr>
+        <tr><th>Ctrl+L</th><td>Clear screen</td></tr>
+        <tr><th>Ctrl+A</th><td>Go to beginning of line</td></tr>
+        <tr><th>Ctrl+E</th><td>Go to end of line</td></tr>
+    </table>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/xterm-addon-web-links@0.9.0/lib/xterm-addon-web-links.min.js"></script>
+<script src="https://cdn.socket.io/4.6.0/socket.io.min.js"></script>
+<script>
+    const sbcName = "{{ sbc.name }}";
+    let terminal = null;
+    let fitAddon = null;
+    let socket = null;
+    let connected = false;
+
+    // Initialize terminal
+    function initTerminal() {
+        terminal = new Terminal({
+            cursorBlink: true,
+            fontSize: 14,
+            fontFamily: "'Monaco', 'Consolas', 'Courier New', monospace",
+            theme: {
+                background: '#1a1a2e',
+                foreground: '#eaeaea',
+                cursor: '#e94560',
+                selection: '#0f3460',
+            }
+        });
+
+        fitAddon = new FitAddon.FitAddon();
+        terminal.loadAddon(fitAddon);
+        terminal.loadAddon(new WebLinksAddon.WebLinksAddon());
+
+        terminal.open(document.getElementById('terminal'));
+        fitAddon.fit();
+
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            fitAddon.fit();
+        });
+
+        // Handle terminal input
+        terminal.onData(data => {
+            if (connected && socket) {
+                socket.emit('console_input', { text: data });
+            }
+        });
+
+        terminal.writeln('Lab Controller Console');
+        terminal.writeln('Click "Connect" to open console connection');
+        terminal.writeln('');
+    }
+
+    function updateStatus(isConnected, message) {
+        const indicator = document.getElementById('status-indicator');
+        const statusText = document.getElementById('status-text');
+        const connectBtn = document.getElementById('connect-btn');
+        const disconnectBtn = document.getElementById('disconnect-btn');
+
+        connected = isConnected;
+
+        if (isConnected) {
+            indicator.className = 'status-dot connected';
+            statusText.textContent = message || 'Connected';
+            connectBtn.style.display = 'none';
+            disconnectBtn.style.display = 'inline-block';
+        } else {
+            indicator.className = 'status-dot disconnected';
+            statusText.textContent = message || 'Disconnected';
+            connectBtn.style.display = 'inline-block';
+            disconnectBtn.style.display = 'none';
+        }
+    }
+
+    function connectConsole() {
+        terminal.writeln('\x1b[33mConnecting...\x1b[0m');
+
+        socket = io('/console', {
+            transports: ['websocket']
+        });
+
+        socket.on('connect', () => {
+            console.log('WebSocket connected');
+            socket.emit('open_console', { sbc_name: sbcName });
+        });
+
+        socket.on('console_opened', (data) => {
+            updateStatus(true, 'Connected');
+            terminal.writeln('\x1b[32m' + data.message + '\x1b[0m');
+            terminal.writeln('');
+        });
+
+        socket.on('console_output', (data) => {
+            terminal.write(data.text);
+        });
+
+        socket.on('error', (data) => {
+            terminal.writeln('\x1b[31mError: ' + data.message + '\x1b[0m');
+            updateStatus(false, 'Error');
+        });
+
+        socket.on('disconnect', () => {
+            terminal.writeln('\x1b[31mDisconnected\x1b[0m');
+            updateStatus(false, 'Disconnected');
+        });
+
+        socket.on('console_closed', () => {
+            terminal.writeln('\x1b[33mConsole closed\x1b[0m');
+            updateStatus(false, 'Closed');
+        });
+    }
+
+    function disconnectConsole() {
+        if (socket) {
+            socket.emit('close_console');
+            socket.disconnect();
+            socket = null;
+        }
+        updateStatus(false, 'Disconnected');
+        terminal.writeln('\x1b[33mDisconnected\x1b[0m');
+    }
+
+    // Initialize on page load
+    document.addEventListener('DOMContentLoaded', initTerminal);
+</script>
+{% endblock %}

labctl/web/templates/dashboard.html

@@ -0,0 +1,100 @@
+{% extends "base.html" %}
+
+{% block title %}Dashboard - Lab Controller{% endblock %}
+
+{% block content %}
+<div class="page-header">
+    <h1>SBC Dashboard</h1>
+    <p>{{ sbcs|length }} device(s) configured</p>
+</div>
+
+{% if sbcs %}
+<div class="sbc-grid">
+    {% for sbc in sbcs %}
+    <div class="sbc-card">
+        <div class="sbc-header">
+            <h2><a href="{{ url_for('views.sbc_detail', name=sbc.name) }}">{{ sbc.name }}</a></h2>
+            <span class="status-badge status-{{ sbc.status.value }}">{{ sbc.status.value }}</span>
+        </div>
+
+        <div class="sbc-body">
+            <div class="sbc-info">
+                <div class="info-row">
+                    <span class="label">Project:</span>
+                    <span class="value">{{ sbc.project or '-' }}</span>
+                </div>
+                <div class="info-row">
+                    <span class="label">IP:</span>
+                    <span class="value">{{ sbc.primary_ip or '-' }}</span>
+                </div>
+                <div class="info-row">
+                    <span class="label">Console:</span>
+                    <span class="value">
+                        {% if sbc.console_port %}
+                            tcp:{{ sbc.console_port.tcp_port }}
+                        {% else %}
+                            -
+                        {% endif %}
+                    </span>
+                </div>
+            </div>
+
+            {% set claim = claims_by_sbc.get(sbc.name) %}
+            {% if claim %}
+            <div class="claim-badge">
+                <span class="claim-indicator"></span>
+                <span class="claim-holder">{{ claim.agent_name }}</span>
+                {% if claim.time_remaining %}
+                    {% set rem = claim.time_remaining.total_seconds()|int %}
+                    {% if rem >= 3600 %}
+                        <span class="claim-time">{{ rem // 3600 }}h {{ (rem % 3600) // 60 }}m</span>
+                    {% elif rem >= 60 %}
+                        <span class="claim-time">{{ rem // 60 }}m</span>
+                    {% else %}
+                        <span class="claim-time">{{ rem }}s</span>
+                    {% endif %}
+                {% endif %}
+                {% if claim.pending_requests %}
+                    <span class="claim-warning" title="Release requested">!</span>
+                {% endif %}
+            </div>
+            {% endif %}
+        </div>
+
+        <div class="sbc-footer">
+            {% if sbc.power_plug %}
+                {% set power = power_states.get(sbc.name) %}
+                <div class="power-status">
+                    <span class="power-indicator power-{{ power.value if power else 'unknown' }}"></span>
+                    <span>{{ power.value.upper() if power else 'UNKNOWN' }}</span>
+                </div>
+                <div class="power-actions">
+                    <form action="{{ url_for('views.sbc_power_action', name=sbc.name, action='on') }}" method="post" class="inline-form">
+                        <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
+                        <button type="submit" class="btn btn-sm btn-success" title="Power On">ON</button>
+                    </form>
+                    <form action="{{ url_for('views.sbc_power_action', name=sbc.name, action='off') }}" method="post" class="inline-form">
+                        <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
+                        <button type="submit" class="btn btn-sm btn-danger" title="Power Off">OFF</button>
+                    </form>
+                    <form action="{{ url_for('views.sbc_power_action', name=sbc.name, action='cycle') }}" method="post" class="inline-form">
+                        <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
+                        <button type="submit" class="btn btn-sm btn-warning" title="Power Cycle">⟳</button>
+                    </form>
+                </div>
+            {% else %}
+                <div class="power-status">
+                    <span class="text-muted">No power plug</span>
+                </div>
+            {% endif %}
+        </div>
+    </div>
+    {% endfor %}
+</div>
+{% else %}
+<div class="empty-state">
+    <h2>No SBCs configured</h2>
+    <p>Use <code>labctl add &lt;name&gt;</code> to add an SBC.</p>
+</div>
+{% endif %}
+{% endblock %}

labctl/web/templates/login.html

@@ -0,0 +1,25 @@
+{% extends "base.html" %}
+
+{% block title %}Login - Lab Controller{% endblock %}
+
+{% block content %}
+<div class="login-container">
+    <div class="login-card">
+        <h1>Lab Controller</h1>
+        <p class="text-muted">Sign in to continue</p>
+
+        <form method="post" class="login-form">
+            <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
+            <div class="form-group">
+                <label for="username">Username</label>
+                <input type="text" id="username" name="username" class="form-control" required autofocus>
+            </div>
+            <div class="form-group">
+                <label for="password">Password</label>
+                <input type="password" id="password" name="password" class="form-control" required>
+            </div>
+            <button type="submit" class="btn btn-primary btn-block">Sign In</button>
+        </form>
+    </div>
+</div>
+{% endblock %}