        <!-- Left Sidebar -->
        <aside class="sidebar">
            <section class="sidebar-section" data-section="live-sessions">
                <div class="sidebar-section-header" data-collapse-toggle>
                    <div class="sidebar-section-title">
                        <svg class="collapse-chevron" width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M6 4l4 4-4 4z"/></svg>
                        <h2>Workspace</h2>
                        <span class="section-count-badge" id="live-sessions-count">0</span>
                    </div>
                    <div class="sidebar-header-actions">
                        <button class="btn btn-small btn-primary sidebar-new-btn" onclick="event.stopPropagation(); showLaunchModal()">+ New</button>
                        <div class="sidebar-kebab-wrapper sidebar-settings-wrapper">
                            <button class="sidebar-settings-btn" onclick="event.stopPropagation(); toggleSidebarKebab(this)" title="Workspace settings">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="8" cy="8" r="2.5"/>
                                    <path d="M13.5 8a5.5 5.5 0 0 0-.1-.8l1.3-1-.7-1.2-1.5.5a5.5 5.5 0 0 0-1.2-.7L11 3.3h-1.4l-.3 1.5a5.5 5.5 0 0 0-1.2.7l-1.5-.5-.7 1.2 1.3 1a5.5 5.5 0 0 0 0 1.6l-1.3 1 .7 1.2 1.5-.5c.4.3.8.5 1.2.7l.3 1.5H11l.3-1.5c.4-.2.8-.4 1.2-.7l1.5.5.7-1.2-1.3-1a5.5 5.5 0 0 0 .1-.8z"/>
                                </svg>
                            </button>
                        <div class="sidebar-kebab-menu" style="display:none">
                            <button class="overflow-menu-item" onclick="event.stopPropagation(); closeSidebarKebabs(); toggleGroupByTeam()">
                                <svg id="group-by-team-check" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <polyline points="3 8 7 12 13 4"/>
                                </svg>
                                Group by Team
                            </button>
                            <hr class="overflow-menu-divider">
                            <button class="overflow-menu-item" onclick="event.stopPropagation(); closeSidebarKebabs(); sleepAllAgents()">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 1 0 0 10 5 5 0 0 1 0-10z"/></svg>
                                Sleep All
                            </button>
                            <button class="overflow-menu-item" onclick="event.stopPropagation(); closeSidebarKebabs(); wakeAllAgents()">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="5"/><path d="M8 5v3l2 1"/></svg>
                                Wake All
                            </button>
                            <hr class="overflow-menu-divider">
                            <button class="overflow-menu-item" onclick="event.stopPropagation(); closeSidebarKebabs(); showThemeConfigurator()">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="6.5"/><path d="M8 1.5v13M1.5 8h13"/><path d="M3 3l10 10M13 3L3 13"/></svg>
                                Themes
                            </button>
                        </div>
                    </div>
                    </div>
                </div>
                <div class="sidebar-section-body">
                    <ul id="live-sessions-list" class="session-list">
                        <li class="empty-state">No live sessions</li>
                    </ul>
                </div>
            </section>
            <section class="sidebar-section" data-section="jobs">
                <div class="sidebar-section-header" data-collapse-toggle>
                    <div class="sidebar-section-title">
                        <svg class="collapse-chevron" width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M6 4l4 4-4 4z"/></svg>
                        <h2>Jobs</h2>
                        <span class="section-count-badge" id="jobs-count">0</span>
                    </div>
                    <button class="btn btn-small btn-primary sidebar-new-btn" onclick="event.stopPropagation(); showJobModal()">+ Job</button>
                </div>
                <div class="sidebar-section-body">
                    <div class="sidebar-subtabs">
                        <button class="sidebar-subtab active" data-subtab="active" onclick="switchJobsSubtab('active')">Active <span class="subtab-count" id="active-jobs-count"></span></button>
                        <button class="sidebar-subtab" data-subtab="scheduled" onclick="switchJobsSubtab('scheduled')">Scheduled <span class="subtab-count" id="scheduled-jobs-count"></span></button>
                    </div>
                    <div class="sidebar-subtab-content" id="jobs-subtab-active">
                        <ul id="live-jobs-list" class="session-list">
                            <li class="empty-state">No active jobs</li>
                        </ul>
                    </div>
                    <div class="sidebar-subtab-content" id="jobs-subtab-scheduled" style="display:none">
                        <ul id="scheduled-jobs-list" class="session-list">
                            <li class="empty-state">No scheduled jobs</li>
                        </ul>
                    </div>
                </div>
            </section>
            <section class="sidebar-section" data-section="history">
                <div class="sidebar-section-header" data-collapse-toggle>
                    <div class="sidebar-section-title">
                        <svg class="collapse-chevron" width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M6 4l4 4-4 4z"/></svg>
                        <h2>Chat History</h2>
                        <span class="section-count-badge" id="history-count">0</span>
                    </div>
                </div>
                <div class="sidebar-section-body">
                    <div class="history-filters">
                        <!-- Row 1: Text search + advanced toggle -->
                        <div class="hf-search-row">
                            <input id="history-search" type="search" placeholder="Search chats...">
                            <button id="hf-adv-toggle" class="btn btn-small hf-adv-btn"
                                    title="Advanced filters">
                                <svg width="12" height="12" viewBox="0 0 16 16" fill="none"
                                     stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
                                    <line x1="2" y1="4" x2="14" y2="4"/>
                                    <line x1="4" y1="8" x2="12" y2="8"/>
                                    <line x1="6" y1="12" x2="10" y2="12"/>
                                </svg>
                                <span id="hf-active-count" class="hf-active-badge"
                                      style="display:none">0</span>
                            </button>
                        </div>

                        <!-- Advanced panel (collapsed by default) -->
                        <div id="hf-advanced" class="hf-advanced" style="display:none">

                            <!-- FTS mode (shown only when search box has text) -->
                            <div class="hf-row" id="hf-fts-mode-row" style="display:none">
                                <label class="hf-label">Match</label>
                                <div class="hf-toggle-group">
                                    <button class="hf-toggle" data-mode="phrase">Phrase</button>
                                    <button class="hf-toggle active" data-mode="and">All words</button>
                                    <button class="hf-toggle" data-mode="or">Any word</button>
                                </div>
                            </div>

                            <!-- Type filter -->
                            <div class="hf-row">
                                <label class="hf-label">Type</label>
                                <div class="hf-toggle-group">
                                    <button class="hf-toggle active" data-chat-type="all">All</button>
                                    <button class="hf-toggle" data-chat-type="agent">Agent Chats</button>
                                    <button class="hf-toggle" data-chat-type="group">Group Chats</button>
                                </div>
                            </div>

                            <!-- Source multi-select -->
                            <div class="hf-row">
                                <label class="hf-label">Source</label>
                                <div class="hf-toggle-group">
                                    <button class="hf-toggle active" data-source="all">All</button>
                                    <button class="hf-toggle" data-source="claude">Claude</button>
                                    <button class="hf-toggle" data-source="gemini">Gemini</button>
                                </div>
                            </div>

                            <!-- Tag multi-filter -->
                            <div class="hf-row">
                                <label class="hf-label">Tags</label>
                                <div class="hf-tag-filter" id="hf-tag-pills"></div>
                                <select id="hf-tag-add" class="hf-tag-add-select">
                                    <option value="">+ tag</option>
                                </select>
                            </div>
                            <div class="hf-row" id="hf-tag-logic-row" style="display:none">
                                <label class="hf-label">Tag logic</label>
                                <div class="hf-toggle-group">
                                    <button class="hf-toggle active" data-logic="AND">AND</button>
                                    <button class="hf-toggle" data-logic="OR">OR</button>
                                </div>
                            </div>

                            <!-- Date range -->
                            <div class="hf-row">
                                <label class="hf-label">From</label>
                                <input type="date" id="hf-date-from" class="hf-date">
                            </div>
                            <div class="hf-row">
                                <label class="hf-label">To</label>
                                <input type="date" id="hf-date-to" class="hf-date">
                            </div>

                            <!-- Duration range (in minutes for usability) -->
                            <div class="hf-row">
                                <label class="hf-label">Duration</label>
                                <input type="number" id="hf-dur-min" class="hf-dur-input"
                                       placeholder="min" min="0" step="1">
                                <span class="hf-dur-sep">&ndash;</span>
                                <input type="number" id="hf-dur-max" class="hf-dur-input"
                                       placeholder="max" min="0" step="1">
                                <span class="hf-dur-unit">min</span>
                            </div>

                            <button class="btn btn-small hf-clear-btn">Clear filters</button>
                        </div>
                    </div>
                    <ul id="history-sessions-list" class="session-list">
                        <li class="empty-state">Loading...</li>
                    </ul>
                </div>
            </section>
        </aside>
