cflx 0.6.98

Conflux – a spec-driven parallel coding orchestrator that runs AI agents on git worktrees
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <meta name="theme-color" content="#1a1a2e">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>Conflux - Web Monitor</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <div class="pull-to-refresh-indicator" id="ptr-indicator" aria-live="polite">
        <div class="ptr-icon" aria-hidden="true"></div>
        <span class="ptr-text">Pull to refresh</span>
    </div>
    <div class="container">
        <header>
            <h1>Conflux</h1>
            <div class="connection-status" id="connection-status" role="status" aria-live="polite">
                <span class="status-dot" aria-hidden="true"></span>
                <span class="status-text">Connecting...</span>
            </div>
        </header>

        <div id="toast-container" class="toast-container" aria-live="assertive"></div>

        <section class="overall-progress" id="overall-progress" aria-label="Overall Progress">
            <h2 class="overall-progress-title">Overall Progress</h2>
            <div class="overall-progress-bar-container">
                <div class="overall-progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                    <div class="overall-progress-fill" id="overall-progress-fill" style="width: 0%"></div>
                </div>
                <div class="overall-progress-text">
                    <span id="overall-progress-tasks">0 / 0 tasks</span>
                    <span id="overall-progress-percent">0%</span>
                </div>
            </div>
        </section>

        <section class="stats-bar" id="stats-bar" aria-label="Statistics">
            <div class="stat">
                <span class="stat-value" id="total-changes" aria-label="Total changes">-</span>
                <span class="stat-label">Total</span>
            </div>
            <div class="stat">
                <span class="stat-value" id="completed-changes" aria-label="Completed changes">-</span>
                <span class="stat-label">Completed</span>
            </div>
            <div class="stat">
                <span class="stat-value" id="in-progress-changes" aria-label="In progress changes">-</span>
                <span class="stat-label">In Progress</span>
            </div>
            <div class="stat">
                <span class="stat-value" id="pending-changes" aria-label="Pending changes">-</span>
                <span class="stat-label">Pending</span>
            </div>
        </section>

        <section class="tabs" id="tabs" aria-label="View Tabs">
            <button class="tab-btn active" id="tab-changes" data-tab="changes" aria-label="View changes">Changes</button>
            <button class="tab-btn" id="tab-worktrees" data-tab="worktrees" aria-label="View worktrees">Worktrees</button>
        </section>

        <section class="control-bar" id="control-bar" aria-label="Execution Controls">
            <button id="btn-run" class="control-btn control-btn-primary" aria-label="Start or resume processing">
                <span class="btn-icon"></span>
                <span class="btn-text">Run</span>
            </button>
            <button id="btn-stop" class="control-btn control-btn-warning" aria-label="Stop processing gracefully" disabled>
                <span class="btn-icon"></span>
                <span class="btn-text">Stop</span>
            </button>
            <button id="btn-cancel-stop" class="control-btn control-btn-info" aria-label="Cancel stop request" disabled>
                <span class="btn-icon"></span>
                <span class="btn-text">Cancel Stop</span>
            </button>
            <button id="btn-force-stop" class="control-btn control-btn-danger" aria-label="Force stop immediately" disabled>
                <span class="btn-icon"></span>
                <span class="btn-text">Force Stop</span>
            </button>
            <button id="btn-retry" class="control-btn control-btn-success" aria-label="Retry error changes" disabled>
                <span class="btn-icon">🔄</span>
                <span class="btn-text">Retry</span>
            </button>
        </section>

        <main id="changes-container" role="main" class="tab-content">
            <div class="loading" id="loading" aria-busy="true">
                <div class="spinner" aria-hidden="true"></div>
                <p>Loading changes...</p>
            </div>
            <div class="changes-list" id="changes-list" role="list"></div>
            <div class="empty-state" id="empty-state" style="display: none;">
                <p>No changes found.</p>
            </div>
        </main>

        <main id="worktrees-container" role="main" class="tab-content" style="display: none;">
            <div class="worktrees-list" id="worktrees-list" role="list"></div>
            <div class="empty-state" id="worktrees-empty-state" style="display: none;">
                <p>No worktrees found.</p>
            </div>
        </main>

        <footer>
            <span id="last-updated">Last updated: -</span>
        </footer>
    </div>

    <script src="/app.js"></script>
</body>
</html>