<!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>