clanker-saddle/src/pages/home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <pstm-uri>/</pstm-uri>
    <pstm-template>main</pstm-template>
    <script>
        // Live dashboard: the pulse subscription (see the entrypoint)
        // re-runs the sealed refresh action whenever task or saddle state
        // changes, so progress, blocks and review requests stream in.
        if (window.statum) {
            (function () {
                'use strict';
                statum.addStateListener('pulse', function () {
                    var dashboard = statum.read('dashboard');
                    if (dashboard && dashboard.refresh) {
                        statum.act(dashboard.refresh).catch(function () { });
                    }
                });
            })();
        }
    </script>
</head>
<body>
    <section>
        <h2>Dashboard</h2>
        <p stm-if="dashboard == null">Loading…</p>

        <div stm-if="dashboard != null">
            <div class="cards">
                <section class="card">
                    <h3>Queue</h3>
                    <p><strong stm-text="dashboard.ready_count">0</strong> ready to dispatch</p>
                    <p class="muted"><span stm-text="dashboard.queued_count">0</span> queued ·
                        <span stm-text="dashboard.active_count">0</span> active ·
                        <span stm-text="dashboard.blocked_count">0</span> blocked</p>
                    <p class="muted"><span stm-text="dashboard.done_count">0</span> done ·
                        <span stm-text="dashboard.failed_count">0</span> failed</p>
                </section>
                <section class="card">
                    <h3>Saddles</h3>
                    <p><strong stm-text="dashboard.idle_saddle_count">0</strong> idle</p>
                    <p><a href="/saddles">Manage saddles</a> · <a href="/tasks">Task queue</a></p>
                </section>
            </div>

            <h3 stm-if="dashboard.reviews.length > 0">Reviews pending</h3>
            <div stm-for-review-in="dashboard.reviews" class="review-banner">
                <h3>Review — <a stm-attribute.href="'/tasks/' + review.task_id" stm-text="review.task_title">task</a></h3>
                <div class="md" stm-markdown="review.summary">summary</div>
                <p><a stm-if="review.diff_url.length > 0" stm-attribute.href="review.diff_url"
                      target="_blank" rel="noopener">compare changes</a></p>
            </div>

            <h3 stm-if="dashboard.open_blocks.length > 0">Needs an answer</h3>
            <div class="cards" stm-if="dashboard.open_blocks.length > 0">
                <section class="card" stm-for-blockview-in="dashboard.open_blocks">
                    <p><span stm-attribute.class="'badge badge-' + blockview.block_type" stm-text="blockview.block_type">type</span>
                        <span class="muted" stm-text="blockview.created_display">when</span></p>
                    <p><strong stm-text="blockview.question">question</strong></p>
                    <p><a stm-attribute.href="'/tasks/' + blockview.task_id" stm-text="blockview.task_title">task</a></p>
                </section>
            </div>

            <h3 stm-if="dashboard.active_tasks.length > 0">Active tasks</h3>
            <table stm-if="dashboard.active_tasks.length > 0">
                <thead><tr><th>Task</th><th>Status</th><th>Branch</th><th>Latest progress</th></tr></thead>
                <tbody>
                    <tr stm-for-active-in="dashboard.active_tasks">
                        <td><a stm-attribute.href="'/tasks/' + active.id" stm-text="active.title">task</a></td>
                        <td><span stm-attribute.class="'badge badge-' + active.status" stm-text="active.status">status</span></td>
                        <td stm-text="active.task_branch">branch</td>
                        <td><strong stm-if="active.latest_progress.length > 0" stm-text="active.latest_progress">progress</strong>
                            <span class="muted" stm-if="active.latest_progress.length > 0" stm-text="active.progress_display">when</span>
                            <span class="muted" stm-if="active.latest_progress.length == 0">—</span></td>
                    </tr>
                </tbody>
            </table>

            <h3>Saddles</h3>
            <div class="cards">
                <section class="card" stm-for-saddle-in="dashboard.saddles">
                    <h3 stm-text="saddle.name">name</h3>
                    <p><span stm-attribute.class="'badge badge-' + saddle.status" stm-text="saddle.status">status</span>
                        <span class="muted" stm-text="saddle.host">host</span></p>
                    <p stm-if="saddle.current_task_id > 0">Working on
                        <a stm-attribute.href="'/tasks/' + saddle.current_task_id" stm-text="saddle.current_task_title">task</a></p>
                    <p stm-if="saddle.current_task_id == 0" class="muted">No current task</p>
                </section>
                <section class="card" stm-if="dashboard.saddles.length == 0">
                    <p class="muted">No saddles registered.</p>
                </section>
            </div>

            <h3>Recent activity</h3>
            <table>
                <thead><tr><th>When</th><th>Task</th><th>Activity</th></tr></thead>
                <tbody>
                    <tr stm-for-item-in="dashboard.activity">
                        <td stm-text="item.when_display">when</td>
                        <td><a stm-attribute.href="'/tasks/' + item.task_id" stm-text="item.task_title">task</a></td>
                        <td stm-text="item.text">activity</td>
                    </tr>
                    <tr stm-if="dashboard.activity.length == 0"><td colspan="3" class="muted">Nothing yet.</td></tr>
                </tbody>
            </table>
        </div>
    </section>
</body>
</html>