<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="color-scheme" content="dark light">
<meta name="theme-color" content="#10131a">
<title>Conflux operator console</title>
<link rel="stylesheet" href="/style.css">
<script type="module" src="/app.js"></script>
</head>
<body>
<a class="skip-link" href="#main">Skip to main content</a>
<header class="app-header">
<div class="brand">
<h1>Conflux</h1>
<p class="brand-sub" id="instance-summary" translate="no">Not connected</p>
</div>
<div class="header-status">
<p class="connection" id="connection-state" role="status" aria-live="polite">
<span class="connection-mark connection-mark-unknown" id="connection-mark" aria-hidden="true"></span>
<span id="connection-text">Connecting…</span>
</p>
<p class="connection-detail" id="connection-detail">Last confirmed update: never</p>
<div class="header-actions">
<button type="button" class="btn btn-secondary" id="btn-refresh">Refresh now</button>
<button type="button" class="btn btn-secondary" id="btn-disconnect" hidden>Disconnect</button>
</div>
</div>
</header>
<main id="main" tabindex="-1">
<h2 class="visually-hidden">Operator console</h2>
<section class="card auth-card" id="auth-section" aria-labelledby="auth-heading" hidden>
<h3 id="auth-heading">Authentication required</h3>
<p id="auth-message">This instance requires an API token before it will return state or accept commands.</p>
<form id="auth-form" class="auth-form" novalidate>
<div class="field">
<label for="auth-token">API token</label>
<div class="field-row">
<input type="password" id="auth-token" name="auth-token" autocomplete="off"
autocapitalize="off" spellcheck="false" required
aria-describedby="auth-token-hint">
<button type="button" class="btn btn-secondary" id="auth-token-toggle"
aria-pressed="false" aria-controls="auth-token">Show</button>
</div>
<p class="hint" id="auth-token-hint">The token is sent only in the Authorization header and is
never written to the address bar, the log view, or persistent browser storage.</p>
</div>
<button type="submit" class="btn btn-primary" id="auth-submit">Connect</button>
</form>
<p class="form-error" id="auth-error" role="alert"></p>
</section>
<section class="card status-card" id="status-section" aria-labelledby="status-heading">
<h3 id="status-heading">Current status</h3>
<p class="attention" id="attention-summary" hidden>
<span class="attention-mark" aria-hidden="true">!</span>
<span id="attention-text"></span>
</p>
<dl class="status-grid">
<div class="status-item">
<dt>Mode</dt>
<dd id="status-mode">Unknown</dd>
</div>
<div class="status-item">
<dt>Active work</dt>
<dd id="status-active">Unknown</dd>
</div>
<div class="status-item">
<dt>Needs attention</dt>
<dd id="status-attention">Unknown</dd>
</div>
<div class="status-item">
<dt>Progress</dt>
<dd id="status-progress">Unknown</dd>
</div>
</dl>
<div class="actions" id="lifecycle-actions" role="group" aria-label="Lifecycle actions"></div>
<p class="hint" id="lifecycle-hint" hidden></p>
</section>
<div class="tabs">
<div role="tablist" aria-label="Console views" id="tablist" class="tablist">
<button type="button" role="tab" id="tab-changes" class="tab" aria-controls="panel-changes"
aria-selected="true" tabindex="0">Changes</button>
<button type="button" role="tab" id="tab-worktrees" class="tab" aria-controls="panel-worktrees"
aria-selected="false" tabindex="-1">Worktrees</button>
<button type="button" role="tab" id="tab-logs" class="tab" aria-controls="panel-logs"
aria-selected="false" tabindex="-1">Logs</button>
</div>
<section role="tabpanel" id="panel-changes" class="tabpanel" aria-labelledby="tab-changes" tabindex="0">
<h3 class="visually-hidden">Changes</h3>
<p class="placeholder" id="changes-placeholder">Loading changes…</p>
<div id="changes-groups"></div>
</section>
<section role="tabpanel" id="panel-worktrees" class="tabpanel" aria-labelledby="tab-worktrees" tabindex="0" hidden>
<h3 class="visually-hidden">Worktrees</h3>
<p class="placeholder" id="worktrees-placeholder">Loading worktrees…</p>
<ul class="resource-list" id="worktrees-list"></ul>
</section>
<section role="tabpanel" id="panel-logs" class="tabpanel" aria-labelledby="tab-logs" tabindex="0" hidden>
<h3 class="visually-hidden">Logs</h3>
<div class="log-toolbar">
<div class="field field-inline">
<label for="log-level">Minimum level</label>
<select id="log-level">
<option value="all" selected>All</option>
<option value="info">Info and above</option>
<option value="warn">Warnings and errors</option>
<option value="error">Errors only</option>
</select>
</div>
<p class="hint" id="log-count">0 entries</p>
</div>
<ol class="log-list" id="log-list" translate="no"></ol>
<p class="placeholder" id="logs-placeholder">No log entries yet.</p>
</section>
</div>
<section class="card" id="notifications-section" aria-labelledby="notifications-heading">
<h3 id="notifications-heading">Notifications</h3>
<p class="placeholder" id="notifications-placeholder">No notifications.</p>
<ul class="notification-list" id="notification-list"></ul>
</section>
</main>
<p class="visually-hidden" id="live-polite" role="status" aria-live="polite"></p>
<p class="visually-hidden" id="live-assertive" role="alert" aria-live="assertive"></p>
<dialog id="confirm-dialog" class="confirm-dialog" aria-labelledby="confirm-title" aria-describedby="confirm-body">
<form method="dialog" id="confirm-form">
<h2 id="confirm-title">Confirm action</h2>
<p id="confirm-body"></p>
<p class="confirm-target" id="confirm-target" translate="no"></p>
<div class="dialog-actions">
<button type="button" class="btn btn-secondary" id="confirm-cancel" value="cancel">Cancel</button>
<button type="button" class="btn btn-danger" id="confirm-accept" value="confirm">Confirm</button>
</div>
</form>
</dialog>
</body>
</html>