<!DOCTYPE html>
<html lang="en" data-theme="auto" data-theme-preference="auto">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ project_name }} — Agents Dashboard</title>
    <link rel="icon" href="/static/favicon.svg?v={{ static_v }}" type="image/svg+xml">
    <!-- Resolve theme before CSS loads to prevent flash of wrong theme -->
    <script>
    (function() {
        var p = 'auto';
        try { p = localStorage.getItem('agents-dashboard-theme') || 'auto'; } catch(e) {}
        var resolved = p;
        if (p === 'auto') resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
        document.documentElement.setAttribute('data-theme', resolved);
        document.documentElement.setAttribute('data-theme-preference', p);
    })();
    </script>
    <link rel="stylesheet" href="/static/css/theme.css?v={{ static_v }}">
    <link rel="stylesheet" href="/static/css/style.css?v={{ static_v }}">
    <link rel="stylesheet" href="/static/css/board.css?v={{ static_v }}">
    <link rel="stylesheet" href="/static/css/dialog.css?v={{ static_v }}">
    <link rel="stylesheet" href="/static/css/file-browser.css?v={{ static_v }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css">
</head>
<body>
    <header class="top-bar" data-map-name="topbar">
        <h1 class="project-title" data-map-name="topbar.title">{{ project_name }} ({{ current_branch }})</h1>

        <!-- Stats Display -->
        <div class="stats-bar" id="stats-bar" data-map-name="topbar.stats">
            <div class="stat-item">
                <span class="stat-label">Cost:</span>
                <span class="stat-value" id="total-cost">$0.00</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Tokens:</span>
                <span class="stat-value" id="total-tokens">0</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Messages:</span>
                <span class="stat-value" id="total-messages">0</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Tools:</span>
                <span class="stat-value" id="tool-calls">0</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Active:</span>
                <span class="stat-value" id="active-agents">0</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Today:</span>
                <span class="stat-value" id="completed-today">0</span>
            </div>
        </div>

        <div class="top-bar-actions" data-map-name="topbar.actions">
            <button id="search-btn" class="btn btn-icon" onclick="SearchDialog.open()" title="Search items" data-map-name="topbar.btn-search">🔍</button>
            <button id="files-btn" class="btn btn-secondary btn-sm" onclick="FileBrowser.open()" data-map-name="topbar.btn-files">Files</button>
            <button id="notifications-btn" class="btn btn-icon" title="System notifications — MCP server errors, agent failures, and warnings" data-map-name="topbar.btn-notifications">
                <span class="bell-icon">&#x1F514;</span>
                <span class="notification-badge" id="notification-badge" style="display:none">0</span>
            </button>
            <button id="config-btn" class="btn btn-icon" title="Settings" data-map-name="topbar.btn-config">⚙</button>
            <button id="sound-toggle" class="btn btn-icon" title="Sound on (click to mute)" data-map-name="topbar.btn-sound">
                <span class="sound-on">🔊</span>
                <span class="sound-off" style="display:none">🔇</span>
            </button>
            <button id="theme-toggle" class="btn btn-icon" title="Theme: System" data-map-name="topbar.btn-theme">
                <span class="theme-icon-auto">🖥</span>
                <span class="theme-icon-light">☀</span>
                <span class="theme-icon-dark">☾</span>
            </button>
        </div>
    </header>

    {% block content %}{% endblock %}

    <!-- Shortcuts Bar -->
    <div class="shortcuts-bar" id="shortcuts-bar" style="display:none" data-map-name="shortcuts.bar">
        <div class="shortcuts-buttons"></div>
        <div class="shortcuts-actions">
            <button class="shortcut-action-btn" onclick="Shortcuts.showAddDialog()" title="Add shortcut" data-map-name="shortcuts.btn-add">+</button>
            <button class="shortcut-action-btn" onclick="Shortcuts.showManageDialog()" title="Manage shortcuts" data-map-name="shortcuts.btn-manage">⚙</button>
        </div>
    </div>

    <!-- Shortcuts — always-visible add button when bar is hidden -->
    <button class="shortcuts-add-floating" id="shortcuts-add-floating" onclick="Shortcuts.showAddDialog()" title="Add a shortcut" data-map-name="shortcuts.btn-add-floating">+ Shortcut</button>

    <script type="importmap">{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"}}</script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.8/dist/purify.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
    <script>mermaid.initialize({ startOnLoad: false, theme: document.documentElement.dataset.theme === 'light' ? 'default' : 'dark' });</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
    <script src="/static/js/api.js?v={{ static_v }}"></script>
    <script src="/static/js/sound.js?v={{ static_v }}"></script>
    <script src="/static/js/theme.js?v={{ static_v }}"></script>
    <script src="/static/js/diff.js?v={{ static_v }}"></script>
    <script src="/static/js/annotate.js?v={{ static_v }}"></script>

    <!-- Dialog modules - load in dependency order -->
    <script src="/static/js/dialog-core.js?v={{ static_v }}"></script>
    <script src="/static/js/dialog-utils.js?v={{ static_v }}"></script>
    <script src="/static/js/attachments.js?v={{ static_v }}"></script>
    <script src="/static/js/item-dialog.js?v={{ static_v }}"></script>
    <script src="/static/js/detail-dialog.js?v={{ static_v }}"></script>
    <script src="/static/js/review-dialog.js?v={{ static_v }}"></script>
    <script src="/static/js/clarification-dialog.js?v={{ static_v }}"></script>
    <script src="/static/js/request-changes-dialog.js?v={{ static_v }}"></script>
    <script src="/static/js/config-dialog.js?v={{ static_v }}"></script>
    <script src="/static/js/annotation-canvas.js?v={{ static_v }}"></script>

    <script src="/static/js/notification-dialog.js?v={{ static_v }}"></script>

    <!-- Main dialog coordinator - loads after all modules -->
    <script src="/static/js/dialogs.js?v={{ static_v }}"></script>
    <script src="/static/js/file-browser.js?v={{ static_v }}"></script>
    <script src="/static/js/search-dialog.js?v={{ static_v }}"></script>
    <script src="/static/js/shortcuts.js?v={{ static_v }}"></script>
    <script src="/static/js/flame.js?v={{ static_v }}"></script>
    <script src="/static/js/stats.js?v={{ static_v }}"></script>
    <script src="/static/js/board.js?v={{ static_v }}"></script>
    <script src="/static/js/app.js?v={{ static_v }}"></script>

    {% if ui_map %}
    <!-- PROJECT_MAP overlays: enabled via server flag --ui-map. Cmd+Shift+M cycles modes. See AGENT_FILES/CARDS/PROJECT_MAP.md. -->
    <script src="/static/js/map_overlay.js?v={{ static_v }}"></script>
    <script src="/static/js/spacing_overlay.js?v={{ static_v }}"></script>
    <script src="/static/js/map_coordinator.js?v={{ static_v }}"></script>
    {% endif %}
</body>
</html>
