2026-09-13 10:46:28 +00:00
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
|
<title>kilocode-loop</title>
|
|
|
|
|
<link rel="stylesheet" href="/styles.css" />
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2026-09-13 16:29:03 +00:00
|
|
|
<header class="topbar" id="topbar">
|
2026-09-13 10:46:28 +00:00
|
|
|
<div class="brand">
|
|
|
|
|
<span class="logo">◐</span>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="title">kilocode-loop</div>
|
|
|
|
|
<div class="sub" id="run-meta">connecting…</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="spacer"></div>
|
2026-09-13 16:29:03 +00:00
|
|
|
<label
|
|
|
|
|
class="toggle"
|
|
|
|
|
id="toggle-shared"
|
|
|
|
|
title="Reuse one growing session across iterations (more context/tokens). Off = each iteration starts fresh with a curated handoff."
|
|
|
|
|
>
|
|
|
|
|
<input type="checkbox" id="chk-shared" />
|
|
|
|
|
<span>Use shared context between iterations</span>
|
|
|
|
|
</label>
|
2026-09-13 10:46:28 +00:00
|
|
|
<div class="status" id="status-pill">starting</div>
|
|
|
|
|
<div class="controls">
|
2026-09-13 16:29:03 +00:00
|
|
|
<button id="btn-new-run" class="hidden" title="Start another plan">New run</button>
|
|
|
|
|
<a id="btn-export" class="btn-link" href="#" title="Download the run report (markdown)">Report</a>
|
2026-09-13 10:46:28 +00:00
|
|
|
<button id="btn-pause" title="Pause before the next iteration (P)">Pause</button>
|
|
|
|
|
<button id="btn-abort" title="Stop after the current session finishes (X)">Abort after session</button>
|
|
|
|
|
<button id="btn-stop" class="danger" title="Kill the current session now (Q)">Stop now</button>
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
|
2026-09-13 16:29:03 +00:00
|
|
|
<section class="launcher hidden" id="launcher">
|
|
|
|
|
<div class="launcher-card">
|
|
|
|
|
<h2>Run a plan</h2>
|
|
|
|
|
<p class="muted">
|
|
|
|
|
Pick a goal or plan, set the verify command the loop must pass before a stage counts as done, then start.
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<label class="field">
|
|
|
|
|
<span>Plan</span>
|
|
|
|
|
<select id="goal-select"></select>
|
|
|
|
|
</label>
|
|
|
|
|
|
|
|
|
|
<div id="goal-meta" class="goal-meta muted"></div>
|
|
|
|
|
|
|
|
|
|
<div class="goal-actions">
|
|
|
|
|
<button id="btn-mark-all" title="Mark every stage of this plan as done (100%)">Mark 100%</button>
|
|
|
|
|
<button id="btn-clear-all" title="Clear the done state on every stage">Clear done</button>
|
|
|
|
|
<span class="spacer"></span>
|
|
|
|
|
<button id="btn-delete-goal" class="danger" title="Move this plan file to .kilocode-loop/trash/ (recoverable)">Delete plan</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="verify-global">
|
|
|
|
|
<label class="field grow">
|
|
|
|
|
<span>Default verify command (all stages)</span>
|
|
|
|
|
<input type="text" id="global-verify" placeholder="e.g. dotnet test w4c-workflows-api" />
|
|
|
|
|
</label>
|
|
|
|
|
<button id="btn-save-global-verify" title="Save to .kilocode-loop/config.json">Save</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="goal-stages" id="goal-stages"></div>
|
|
|
|
|
|
|
|
|
|
<label class="field prompt-extra">
|
|
|
|
|
<span>Custom instruction (optional)</span>
|
|
|
|
|
<textarea
|
|
|
|
|
id="opt-prompt-extra"
|
|
|
|
|
rows="2"
|
|
|
|
|
placeholder="Added to the top of every iteration prompt, e.g. Keep the diff focused on the current stage and run pnpm test before reporting done."
|
|
|
|
|
></textarea>
|
|
|
|
|
</label>
|
|
|
|
|
|
|
|
|
|
<div class="run-options">
|
|
|
|
|
<label class="field"><span>Iterations</span><input type="number" id="opt-iterations" min="1" value="5" /></label>
|
|
|
|
|
<label class="field"><span>Agent</span><input type="text" id="opt-agent" value="code-design" /></label>
|
|
|
|
|
<label class="field"><span>HITL</span>
|
|
|
|
|
<select id="opt-hitl">
|
|
|
|
|
<option value="on-question">on question</option>
|
|
|
|
|
<option value="always">always</option>
|
|
|
|
|
<option value="off">off</option>
|
|
|
|
|
</select>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="field checkbox"><input type="checkbox" id="opt-dryrun" /><span>Dry run</span></label>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="launcher-actions">
|
|
|
|
|
<button id="btn-goals-refresh" title="Re-scan goals/plans">Refresh</button>
|
|
|
|
|
<button id="btn-start" class="primary">Start run</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="launcher-error" class="launcher-error"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<div id="run-view">
|
2026-09-13 10:46:28 +00:00
|
|
|
<section class="stats" id="stats"></section>
|
|
|
|
|
|
2026-09-13 16:29:03 +00:00
|
|
|
<section class="stages-panel">
|
|
|
|
|
<h2>Stages <span class="hint" id="stages-hint">verification gate: a stage is only done when its verify command passes</span></h2>
|
|
|
|
|
<div id="stages" class="stages"></div>
|
|
|
|
|
</section>
|
|
|
|
|
|
2026-09-13 10:46:28 +00:00
|
|
|
<main>
|
|
|
|
|
<section class="panel timeline-panel">
|
|
|
|
|
<h2>Iterations <span class="hint" id="iter-hint"></span></h2>
|
|
|
|
|
<div id="iterations" class="iterations"></div>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="panel console-panel">
|
|
|
|
|
<h2>
|
|
|
|
|
Live session
|
|
|
|
|
<span class="hint">sections mark the current action · <b>X</b> abort after current · <b>P</b> pause · <b>Q</b> stop</span>
|
|
|
|
|
</h2>
|
|
|
|
|
<div id="log" class="log"></div>
|
|
|
|
|
</section>
|
|
|
|
|
</main>
|
2026-09-13 16:29:03 +00:00
|
|
|
</div>
|
2026-09-13 10:46:28 +00:00
|
|
|
|
|
|
|
|
<div class="modal hidden" id="modal">
|
|
|
|
|
<div class="modal-card">
|
|
|
|
|
<h3>Operator input required</h3>
|
|
|
|
|
<p class="muted" id="modal-sub"></p>
|
|
|
|
|
<div id="modal-questions"></div>
|
|
|
|
|
<div class="modal-actions">
|
|
|
|
|
<button id="btn-skip">Skip all</button>
|
|
|
|
|
<button id="btn-submit" class="primary">Submit</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="/app.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
