    <!-- Launch Modal -->
    <div id="launch-modal" class="modal" style="display:none">
        <div class="modal-content modal-content-wide">
            <!-- Step 1: Session type chooser -->
            <div id="launch-step-chooser">
                <h3>Launch New Session</h3>
                <div class="launch-type-cards">
                    <button class="launch-type-card" onclick="window._selectLaunchType('agent')">
                        <div class="launch-type-icon">
                            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M12 2a4 4 0 0 1 4 4v2a4 4 0 0 1-8 0V6a4 4 0 0 1 4-4z"/>
                                <path d="M6 10v1a6 6 0 0 0 12 0v-1"/>
                                <line x1="12" y1="17" x2="12" y2="21"/>
                                <line x1="8" y1="21" x2="16" y2="21"/>
                            </svg>
                        </div>
                        <div class="launch-type-label">AI Agent</div>
                        <div class="launch-type-desc">Launch Claude or Gemini with system prompt and tools</div>
                    </button>
                    <button class="launch-type-card" onclick="window._selectLaunchType('terminal')">
                        <div class="launch-type-icon">
                            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="2" y="3" width="20" height="18" rx="2"/>
                                <polyline points="7 9 10 12 7 15"/>
                                <line x1="13" y1="15" x2="17" y2="15"/>
                            </svg>
                        </div>
                        <div class="launch-type-label">Terminal</div>
                        <div class="launch-type-desc">Open a shell session you can use alongside your agents</div>
                    </button>
                </div>
                <div class="modal-actions">
                    <button class="btn" onclick="hideLaunchModal()">Cancel</button>
                </div>
            </div>

            <!-- Step 2a: Agent form -->
            <div id="launch-step-agent" style="display:none">
                <h3>
                    <button class="launch-back-btn" onclick="window._selectLaunchType('back')" title="Back">&larr;</button>
                    Launch AI Agent
                </h3>
                <label>Agent Name <span style="color:var(--text-muted);font-weight:normal">(optional)</span>:
                    <input type="text" id="launch-agent-name" placeholder="e.g. Auth Feature, Bug Fix #123">
                </label>
                <label>Working Directory:
                    <div class="dir-input-row">
                        <input type="text" id="launch-dir" placeholder="/path/to/project" data-coral-root="{{ coral_root }}" value="{{ coral_root }}">
                        <button class="btn" id="btn-browse" onclick="toggleBrowser('launch-dir','dir-browser','browser-list','browser-current-path')">Browse</button>
                    </div>
                </label>
                <div id="dir-browser" class="dir-browser" style="display:none">
                    <div class="dir-browser-header">
                        <button class="btn btn-small dir-browser-up" onclick="browserNavigateUp()" title="Go up">..</button>
                        <span class="dir-browser-path" id="browser-current-path">~</span>
                    </div>
                    <ul class="dir-browser-list" id="browser-list">
                        <li class="empty-state">Loading...</li>
                    </ul>
                </div>
                <label>Agent Type:
                    <select id="launch-type">
                        <option value="claude">Claude</option>
                        <option value="gemini">Gemini</option>
                    </select>
                </label>
                <label>Flags <span style="color:var(--text-muted);font-weight:normal">(optional)</span>:
                    <input type="text" id="launch-flags" placeholder="e.g. --verbose">
                </label>
                <div class="flag-shortcuts">
                    <button class="btn btn-small flag-shortcut-btn" onclick="toggleFlag('launch-flags','--chrome')">--chrome</button>
                    <button class="btn btn-small flag-shortcut-btn" onclick="toggleFlag('launch-flags','--dangerously-skip-permissions')">--dangerously-skip-permissions</button>
                </div>
                <div class="modal-actions">
                    <button class="btn" onclick="hideLaunchModal()">Cancel</button>
                    <button class="btn btn-primary" onclick="launchSession()">Launch</button>
                </div>
            </div>

            <!-- Step 2b: Terminal form -->
            <div id="launch-step-terminal" style="display:none">
                <h3>
                    <button class="launch-back-btn" onclick="window._selectLaunchType('back')" title="Back">&larr;</button>
                    Launch Terminal
                </h3>
                <label>Session Name <span style="color:var(--text-muted);font-weight:normal">(optional)</span>:
                    <input type="text" id="launch-terminal-name" placeholder="e.g. build server, test runner">
                </label>
                <label>Working Directory:
                    <div class="dir-input-row">
                        <input type="text" id="launch-terminal-dir" placeholder="/path/to/project" data-coral-root="{{ coral_root }}" value="{{ coral_root }}">
                        <button class="btn" id="btn-browse-terminal" onclick="toggleBrowser('launch-terminal-dir','dir-browser-terminal','browser-list-terminal','browser-current-path-terminal')">Browse</button>
                    </div>
                </label>
                <div id="dir-browser-terminal" class="dir-browser" style="display:none">
                    <div class="dir-browser-header">
                        <button class="btn btn-small dir-browser-up" onclick="browserNavigateUp()" title="Go up">..</button>
                        <span class="dir-browser-path" id="browser-current-path-terminal">~</span>
                    </div>
                    <ul class="dir-browser-list" id="browser-list-terminal">
                        <li class="empty-state">Loading...</li>
                    </ul>
                </div>
                <div class="modal-actions">
                    <button class="btn" onclick="hideLaunchModal()">Cancel</button>
                    <button class="btn btn-primary" onclick="launchSession()">Launch</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Restart Modal -->
    <div id="restart-modal" class="modal" style="display:none">
        <div class="modal-content" style="width:480px">
            <h3>Restart Session</h3>
            <p id="restart-modal-name" style="color:var(--text-secondary);font-size:13px;margin-bottom:12px"></p>
            <label>Flags <span style="color:var(--text-muted);font-weight:normal">(optional)</span>:
                <input type="text" id="restart-flags" placeholder="e.g. --verbose">
            </label>
            <div class="flag-shortcuts">
                <button class="btn btn-small flag-shortcut-btn" onclick="toggleFlag('restart-flags','--chrome')">--chrome</button>
                <button class="btn btn-small flag-shortcut-btn" onclick="toggleFlag('restart-flags','--dangerously-skip-permissions')">--dangerously-skip-permissions</button>
            </div>
            <div class="modal-actions">
                <button class="btn" onclick="hideRestartModal()">Cancel</button>
                <button class="btn btn-warning" onclick="confirmRestart()">Restart</button>
            </div>
        </div>
    </div>

    <!-- Info Modal -->
    <div id="info-modal" class="modal" style="display:none">
        <div class="modal-content" style="width:480px">
            <h3>Session Info</h3>
            <dl class="info-grid">
                <dt>Agent Name</dt>
                <dd id="info-agent-name"></dd>
                <dt>Agent Type</dt>
                <dd id="info-agent-type"></dd>
                <dt>Tmux Session</dt>
                <dd id="info-tmux-session"></dd>
                <dt>Attach Command</dt>
                <dd>
                    <code id="info-tmux-command"></code>
                    <button class="copy-btn" onclick="copyInfoCommand()" title="Copy to clipboard">Copy</button>
                </dd>
                <dt>Working Directory</dt>
                <dd id="info-working-dir"></dd>
                <dt>Log Path</dt>
                <dd id="info-log-path"></dd>
                <dt>Pane Title</dt>
                <dd id="info-pane-title"></dd>
                <dt>Branch</dt>
                <dd id="info-git-branch"></dd>
                <dt>Latest Commit</dt>
                <dd id="info-git-commit"></dd>
            </dl>
            <div class="modal-actions">
                <button class="btn" onclick="hideInfoModal()">Close</button>
            </div>
        </div>
    </div>

    <!-- Resume Modal -->
    <div id="resume-modal" class="modal" style="display:none">
        <div class="modal-content" style="width:440px">
            <h3>Resume Session</h3>
            <p style="font-size:13px;color:var(--text-secondary);margin-bottom:12px">
                Select a live agent to restart with this session:
            </p>
            <div id="resume-session-list"></div>
            <div class="modal-actions">
                <button class="btn" onclick="hideResumeModal()">Cancel</button>
            </div>
        </div>
    </div>

    <!-- Settings Modal -->
    <div id="settings-modal" class="modal" style="display:none">
        <div class="modal-content" style="width:440px">
            <h3>Settings</h3>
            <button class="btn btn-primary settings-theme-btn" onclick="hideSettingsModal(); showThemeConfigurator()" style="width:100%;margin-bottom:12px">
                <span class="material-icons" style="font-size:16px;vertical-align:middle;margin-right:6px">palette</span>
                Customize Theme
            </button>
            <dl class="info-grid">
                <dt>Theme</dt>
                <dd>
                    <select id="settings-theme" class="settings-select">
                        <option value="dark">Dark</option>
                        <option value="light">Light</option>
                        <option value="system">System</option>
                    </select>
                </dd>
                <dt>Default Render Engine</dt>
                <dd>
                    <select id="settings-renderer-select" class="settings-select"></select>
                </dd>
                <dt>Default Agent Type</dt>
                <dd>
                    <select id="settings-agent-type" class="settings-select">
                        <option value="claude">Claude</option>
                        <option value="gemini">Gemini</option>
                    </select>
                </dd>
                <dt>Default Working Directory</dt>
                <dd>
                    <input type="text" id="settings-working-dir" class="settings-input" data-coral-root="{{ coral_root }}" placeholder="{{ coral_root }}">
                </dd>
                <dt class="toggle-dt">
                    <label for="settings-fit-pane-width">Fit Pane Width</label>
                    <span class="toggle-desc">Auto-resize tmux pane to match browser width</span>
                </dt>
                <dd><input type="checkbox" id="settings-fit-pane-width"></dd>
                <dt class="toggle-dt">
                    <label for="settings-notify-needs-input">Notifications</label>
                    <span class="toggle-desc">Show toast when an agent needs input</span>
                </dt>
                <dd><input type="checkbox" id="settings-notify-needs-input"></dd>
                <dt class="toggle-dt">
                    <label for="settings-check-updates">Check for Updates</label>
                    <span class="toggle-desc">Notify when a new version of Coral is available</span>
                </dt>
                <dd><input type="checkbox" id="settings-check-updates"></dd>
            </dl>
            <div class="modal-actions">
                <button class="btn" onclick="hideSettingsModal()">Cancel</button>
                <button class="btn btn-primary" onclick="applySettings()">Apply</button>
            </div>
        </div>
    </div>

    <!-- Theme Configurator Modal (content rendered dynamically) -->
    <div id="theme-configurator-modal" class="modal" style="display:none"></div>

    <!-- Scheduled Job Modal -->
    <div id="job-modal" class="modal" style="display:none">
        <div class="modal-content modal-content-wide">
            <h3 id="job-modal-title">New Scheduled Job</h3>
            <label>Job Name:
                <input type="text" id="job-modal-name" placeholder="e.g. Nightly Tests">
            </label>
            <label>Description <span style="color:var(--text-muted);font-weight:normal">(optional)</span>:
                <input type="text" id="job-modal-description" placeholder="e.g. Runs the full test suite">
            </label>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
                <label>Cron Expression:
                    <input type="text" id="job-modal-cron" placeholder="0 2 * * *" value="0 2 * * *" oninput="validateCronPreview()">
                </label>
                <label>Timezone:
                    <input type="text" id="job-modal-timezone" placeholder="UTC" value="UTC" oninput="validateCronPreview()">
                </label>
            </div>
            <div id="cron-preview" style="font-size:12px;margin:-4px 0 8px;min-height:18px"></div>
            <label>Repository Path:
                <input type="text" id="job-modal-repo" placeholder="/path/to/repo" data-coral-root="{{ coral_root }}" value="{{ coral_root }}">
            </label>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
                <label>Base Branch:
                    <input type="text" id="job-modal-branch" placeholder="main" value="main">
                </label>
                <label>Agent Type:
                    <select id="job-modal-agent">
                        <option value="claude">Claude</option>
                        <option value="gemini">Gemini</option>
                    </select>
                </label>
            </div>
            <label>Prompt:
                <textarea id="job-modal-prompt" rows="4" placeholder="Run the full test suite and report failures..." style="width:100%;resize:vertical"></textarea>
            </label>
            <label>Flags <span style="color:var(--text-muted);font-weight:normal">(optional)</span>:
                <input type="text" id="job-modal-flags" placeholder="e.g. --verbose">
            </label>
            <div class="flag-shortcuts">
                <button class="btn btn-small flag-shortcut-btn" onclick="toggleFlag('job-modal-flags','--chrome')">--chrome</button>
                <button class="btn btn-small flag-shortcut-btn" onclick="toggleFlag('job-modal-flags','--dangerously-skip-permissions')">--dangerously-skip-permissions</button>
            </div>
            <div style="display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end">
                <label>Max Duration (seconds):
                    <input type="number" id="job-modal-timeout" value="3600" min="60">
                </label>
                <label style="display:flex;align-items:center;gap:6px;padding-bottom:6px">
                    <input type="checkbox" id="job-modal-cleanup" checked>
                    Cleanup worktree
                </label>
            </div>
            <div class="modal-actions">
                <button class="btn" onclick="hideJobModal()">Cancel</button>
                <button class="btn btn-primary" id="job-modal-submit" onclick="saveScheduledJob()">Create Job</button>
            </div>
        </div>
    </div>

    <!-- Add Macro Modal -->
    <div id="macro-modal" class="modal" style="display:none">
        <div class="modal-content" style="width:400px">
            <h3>Add Macro</h3>
            <label>Label:
                <input type="text" id="macro-label-input" placeholder="e.g. Commit & Push" style="width:100%">
            </label>
            <label style="margin-top:8px;display:block">Command:
                <input type="text" id="macro-command-input" placeholder="e.g. /commit && git push" style="width:100%">
            </label>
            <p style="color:var(--text-muted);font-size:11px;margin-top:6px">Use <code>&&</code> to chain multiple commands (1s delay between each).</p>
            <div class="modal-actions">
                <button class="btn" onclick="hideMacroModal()">Cancel</button>
                <button class="btn btn-primary" onclick="addMacro()">Add</button>
            </div>
        </div>
    </div>

    <!-- Webhooks Modal -->
    <div id="webhook-modal" class="modal" style="display:none">
        <div class="modal-content modal-content-wide">
            <h3>Webhook Notifications</h3>

            <!-- List view -->
            <div id="webhook-list-view" style="display:flex;flex-direction:column;gap:12px">
                <div style="display:flex;justify-content:flex-end">
                    <button class="btn btn-small btn-primary" onclick="showWebhookCreate()">+ Add Webhook</button>
                </div>
                <div id="webhook-list-body"></div>
            </div>

            <!-- Create / Edit form -->
            <div id="webhook-form-view" style="display:none;flex-direction:column;gap:12px">
                <h4 id="webhook-form-title">Add Webhook</h4>
                <input type="hidden" id="webhook-form-id">
                <form id="webhook-form" class="webhook-form"
                      onsubmit="event.preventDefault(); saveWebhook()">
                    <label>Name
                        <input id="wh-name" type="text"
                               placeholder="e.g. Slack #agents" required>
                    </label>
                    <label>Platform
                        <select id="wh-platform">
                            <option value="slack">Slack</option>
                            <option value="discord">Discord</option>
                            <option value="generic">Generic HTTP POST</option>
                        </select>
                    </label>
                    <label>Webhook URL
                        <input id="wh-url" type="url"
                               placeholder="https://hooks.slack.com/..." required>
                    </label>
                    <label>Agent Filter (blank = all agents)
                        <input id="wh-agent-filter" type="text"
                               placeholder="claude-agent-1">
                    </label>
                    <p style="color:var(--text-muted);font-size:12px;margin:4px 0 8px">
                        Sends a notification when an agent needs input and has been idle for 5+ minutes.
                    </p>
                    <label class="checkbox-label">
                        <input id="wh-enabled" type="checkbox" checked>
                        Enabled
                    </label>
                    <div style="display:flex;gap:8px;margin-top:4px">
                        <button type="submit" class="btn btn-primary">Save</button>
                        <button type="button" class="btn"
                                onclick="showWebhookList()">Cancel</button>
                    </div>
                </form>
            </div>

            <!-- Delivery history view -->
            <div id="webhook-history-view"
                 style="display:none;flex-direction:column;gap:8px">
                <button class="btn btn-small"
                        onclick="showWebhookList()">&#8592; Back</button>
                <div id="webhook-history-body"></div>
            </div>
        </div>
    </div>

