goal_detail.html 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <pstm-uri>/goals/{goal_id}</pstm-uri>
  5. <pstm-template>main</pstm-template>
  6. <script>
  7. // The goal page: supervision surface of one goal — status head
  8. // with lifecycle actions, branch/push-state chips, the agent's
  9. // live progress feed and current activity, the locked brief, the
  10. // approved plan (revision history behind the expander), the
  11. // task status strip (its buttons filter the task list), the
  12. // supervision narrative, the comment thread with
  13. // selection-quoting, the completion review and the goal agent's
  14. // runs. Every long-form body (brief, plans, reports, blocks,
  15. // comments, events) renders as markdown via stm-markdown. The
  16. // status strip's filter lives client-side in
  17. // window.goalTaskFilter; clicking a strip button re-runs the
  18. // sealed refresh action, and the filter rides the re-render.
  19. if (window.statum) {
  20. (function () {
  21. 'use strict';
  22. window.goalTaskFilter = window.goalTaskFilter || null;
  23. window.goalFilterClass = function (status) {
  24. return window.goalTaskFilter === status ? 'goal-filter active'
  25. : 'goal-filter';
  26. };
  27. window.goalTaskVisible = function (task) {
  28. return window.goalTaskFilter == null
  29. || window.goalTaskFilter === false
  30. || window.goalTaskFilter === ''
  31. || window.goalTaskFilter === task.status;
  32. };
  33. window.goalSetFilter = function (status) {
  34. window.goalTaskFilter = window.goalTaskFilter === status ? null : status;
  35. refreshGoal('filter');
  36. };
  37. function refreshGoal(source) {
  38. var goal = statum.read('goal');
  39. if (!goal || !goal.refresh) return;
  40. statum.act(goal.refresh).catch(function (error) {
  41. console.warn('[goal] live refresh (' + source + ') failed:', error);
  42. });
  43. }
  44. statum.addStateListener('pulse', function () {
  45. refreshGoal('pulse');
  46. });
  47. document.addEventListener('visibilitychange', function () {
  48. if (document.visibilityState === 'visible') refreshGoal('focus');
  49. });
  50. if (window.initQuoteComments) {
  51. window.initQuoteComments({
  52. matches: function (node) {
  53. // The pending plan body feeds the REMARKS
  54. // popover instead (below) — everything else
  55. // long-form on the goal quote-comments.
  56. return node.closest && node.closest('.goal-body') != null
  57. && node.closest('[data-plan-body]') == null;
  58. },
  59. action: function () {
  60. var goal = statum.read('goal');
  61. return goal && goal.comment;
  62. }
  63. });
  64. }
  65. // Plan 14 B2: the plan-review remarks queue — the
  66. // task-page collect-remarks pattern (the feedbackByBlock
  67. // maps) ported to the goal's plan review. The queue lives
  68. // in these maps (keyed by goal block id) so statum
  69. // re-renders never lose it; the DOM list is rebuilt after
  70. // every render cycle.
  71. var remarksByBlock = {};
  72. var rejectOpenByBlock = {};
  73. var remarkPopover = null;
  74. statum.afterEvaluate(syncPlanRemarks);
  75. document.addEventListener('click', function (event) {
  76. if (!event.target.closest) return;
  77. var accept = event.target.closest('[data-plan-accept]');
  78. if (accept) {
  79. // Accept ignores/clears the queued remarks.
  80. var accepted = accept.closest('[data-plan-review]');
  81. if (accepted) {
  82. var acceptId = accepted.getAttribute('data-block-id');
  83. remarksByBlock[acceptId] = [];
  84. rejectOpenByBlock[acceptId] = false;
  85. }
  86. return;
  87. }
  88. var toggle = event.target.closest('[data-plan-toggle]');
  89. if (toggle) {
  90. hideRemarkPopover();
  91. var review = toggle.closest('[data-plan-review]');
  92. var id = review && review.getAttribute('data-block-id');
  93. if (id) rejectOpenByBlock[id] = !rejectOpenByBlock[id];
  94. syncPlanRemarks();
  95. return;
  96. }
  97. var submit = event.target.closest('[data-plan-submit]');
  98. if (submit) {
  99. submitPlanRemarks(submit.closest('[data-plan-review]'));
  100. return;
  101. }
  102. var remove = event.target.closest('[data-plan-remove]');
  103. if (remove) {
  104. var entry = remove.closest('[data-plan-remark-id]');
  105. var blockId = remove.closest('[data-plan-review]').getAttribute('data-block-id');
  106. var list = remarksByBlock[blockId] || [];
  107. var index = parseInt(entry.getAttribute('data-plan-remark-id'), 10);
  108. if (!isNaN(index) && list[index]) list.splice(index, 1);
  109. remarksByBlock[blockId] = list;
  110. syncPlanRemarks();
  111. }
  112. });
  113. document.addEventListener('mouseup', function (event) {
  114. if (!event.target.closest) return;
  115. if (remarkPopover && remarkPopover.contains(event.target)) return;
  116. var body = event.target.closest('[data-plan-body]');
  117. if (!body) {
  118. hideRemarkPopover();
  119. return;
  120. }
  121. var review = body.closest('[data-plan-review]');
  122. if (!review || review.getAttribute('data-plan-open') !== '1') return;
  123. var selection = window.getSelection();
  124. var text = selection ? String(selection.toString()).trim() : '';
  125. if (text.length === 0) {
  126. hideRemarkPopover();
  127. return;
  128. }
  129. showRemarkPopover(event.pageX, event.pageY, text, review);
  130. });
  131. document.addEventListener('mousedown', function (event) {
  132. if (remarkPopover && event.target.closest
  133. && event.target.closest('.plan-popover')) return;
  134. hideRemarkPopover();
  135. });
  136. function showRemarkPopover(x, y, quote, review) {
  137. hideRemarkPopover();
  138. remarkPopover = document.createElement('div');
  139. remarkPopover.className = 'plan-popover';
  140. remarkPopover.style.left = Math.min(x, window.innerWidth - 140) + 'px';
  141. remarkPopover.style.top = y + 'px';
  142. var quoted = document.createElement('blockquote');
  143. quoted.textContent = quote;
  144. remarkPopover.appendChild(quoted);
  145. var body = document.createElement('textarea');
  146. body.placeholder = 'Your remark on the selected plan text';
  147. remarkPopover.appendChild(body);
  148. var actions = document.createElement('div');
  149. actions.className = 'actions';
  150. var add = document.createElement('button');
  151. add.type = 'button';
  152. add.className = 'primary';
  153. add.textContent = 'Add remark';
  154. add.addEventListener('click', function () {
  155. if (body.value.trim().length === 0) return;
  156. var id = review.getAttribute('data-block-id');
  157. var list = remarksByBlock[id] || [];
  158. list.push({ quote: quote, body: body.value.trim() });
  159. remarksByBlock[id] = list;
  160. hideRemarkPopover();
  161. syncPlanRemarks();
  162. });
  163. var cancel = document.createElement('button');
  164. cancel.type = 'button';
  165. cancel.textContent = 'Cancel';
  166. cancel.addEventListener('click', hideRemarkPopover);
  167. actions.appendChild(add);
  168. actions.appendChild(cancel);
  169. remarkPopover.appendChild(actions);
  170. document.body.appendChild(remarkPopover);
  171. body.focus();
  172. }
  173. function hideRemarkPopover() {
  174. if (remarkPopover) {
  175. remarkPopover.remove();
  176. remarkPopover = null;
  177. }
  178. }
  179. function submitPlanRemarks(review) {
  180. if (!review) return;
  181. var id = review.getAttribute('data-block-id');
  182. var list = remarksByBlock[id] || [];
  183. if (list.length === 0) {
  184. if (window.showToast) window.showToast('Highlight some plan text and add a remark first', 'error');
  185. return;
  186. }
  187. var goal = statum.read('goal');
  188. var block = null;
  189. if (goal && goal.plan_pending_block
  190. && String(goal.plan_pending_block.id) === String(id)) {
  191. block = goal.plan_pending_block;
  192. }
  193. if (!block || !block.answer_action) return;
  194. // Every queued remark rides the rejection NUMBERED, in
  195. // queue order, each with its selection quote prefixed
  196. // like a comment; the wrapped answer IS the resume
  197. // notice the agent reads.
  198. var answer = 'Plan feedback received:';
  199. list.forEach(function (item, index) {
  200. answer += '\n\n';
  201. if (item.quote) {
  202. answer += '> ' + item.quote.replace(/\n/g, '\n> ') + '\n\n';
  203. }
  204. answer += (index + 1) + '. ' + item.body;
  205. });
  206. var extra = review.querySelector('[data-plan-feedback] textarea[name="feedback"]');
  207. if (extra && extra.value.trim().length > 0) {
  208. answer += '\n\n' + extra.value.trim();
  209. }
  210. remarksByBlock[id] = [];
  211. rejectOpenByBlock[id] = false;
  212. statum.act(block.answer_action, { answer: answer }).catch(function () { });
  213. }
  214. function syncPlanRemarks() {
  215. document.querySelectorAll('[data-plan-review]').forEach(function (review) {
  216. var id = review.getAttribute('data-block-id');
  217. var open = rejectOpenByBlock[id] ? '1' : '0';
  218. review.setAttribute('data-plan-open', open);
  219. var feedback = review.querySelector('[data-plan-feedback]');
  220. if (feedback) {
  221. if (rejectOpenByBlock[id]) feedback.removeAttribute('hidden');
  222. else feedback.setAttribute('hidden', '');
  223. }
  224. var list = review.querySelector('[data-plan-remarks]');
  225. if (!list) return;
  226. while (list.firstChild) list.removeChild(list.firstChild);
  227. (remarksByBlock[id] || []).forEach(function (item, index) {
  228. var entry = document.createElement('li');
  229. entry.setAttribute('data-plan-remark-id', String(index));
  230. if (item.quote) {
  231. var quoted = document.createElement('blockquote');
  232. quoted.textContent = item.quote;
  233. entry.appendChild(quoted);
  234. }
  235. var body = document.createElement('div');
  236. body.textContent = item.body;
  237. entry.appendChild(body);
  238. var remove = document.createElement('button');
  239. remove.type = 'button';
  240. remove.className = 'inline';
  241. remove.setAttribute('data-plan-remove', '');
  242. remove.textContent = 'Remove';
  243. entry.appendChild(remove);
  244. list.appendChild(entry);
  245. });
  246. });
  247. }
  248. })();
  249. }
  250. </script>
  251. </head>
  252. <body>
  253. <div class="page goal-page">
  254. <p><a href="/goals">&larr; Goals</a></p>
  255. <h2 stm-if="goal.exists"><span class="goal-icon">🎯</span> #<span stm-text="goal.id">id</span> —
  256. <span stm-text="goal.title">title</span></h2>
  257. <p stm-if="!goal.exists" class="muted">Goal not found.</p>
  258. <div stm-if="goal.exists">
  259. <!-- Status head: lifecycle badge, branch pair with the
  260. daemon-reported push-state chips, priority, the
  261. assigned agent saddle and the lifecycle actions. -->
  262. <section class="card goal-head">
  263. <div class="card-head">
  264. <h3>Status</h3>
  265. </div>
  266. <p><span stm-attribute.class="'badge badge-' + goal.status" stm-text="goal.display">status</span>
  267. · goal branch <code stm-text="goal.branch_name">branch</code>
  268. <span class="muted">from</span> <code stm-text="goal.base_branch">base</code>
  269. · priority <strong stm-text="goal.priority">3</strong>
  270. <span stm-if="goal.agent_saddle.length > 0"> · agent saddle
  271. <strong stm-text="goal.agent_saddle">saddle</strong></span></p>
  272. <p stm-if="goal.push_branches.length > 0">Goal branches:
  273. <span stm-for-branch-in="goal.push_branches">
  274. <code stm-text="branch.branch">b</code>
  275. <span stm-attribute.class="branch.pushed ? 'badge badge-done' : 'badge badge-failed'"
  276. stm-text="branch.pushed ? 'pushed' : 'unpushed'">state</span>
  277. </span>
  278. <span class="muted">(the daemon's /status report)</span></p>
  279. <p class="muted">Project:
  280. <a stm-attribute.href="'/projects/' + goal.project_id" stm-text="goal.project_name">project</a>
  281. · Created <span stm-text="goal.created_display">when</span>
  282. <span stm-if="goal.started_display.length > 0"> · Started
  283. <span stm-text="goal.started_display">when</span></span>
  284. <span stm-if="goal.completed_display.length > 0"> · Finished
  285. <span stm-text="goal.completed_display">when</span></span></p>
  286. <p>
  287. <button type="button" class="primary" stm-if="goal.start != null"
  288. stm-action="goal.start">Start goal</button>
  289. <button type="button" stm-if="goal.pause != null"
  290. stm-action="goal.pause">Pause</button>
  291. <button type="button" stm-if="goal.resume != null"
  292. stm-action="goal.resume">Resume</button>
  293. <button type="button" class="primary" stm-if="goal.retry_run != null"
  294. stm-action="goal.retry_run">Retry supervision</button>
  295. <button type="button" stm-if="goal.requeue_run != null"
  296. stm-action="goal.requeue_run"
  297. stm-confirm="Requeue the agent's run? The daemon restores its workspace context on the next dispatch.">Requeue to resume</button>
  298. <button type="button" class="danger" stm-if="goal.cancel != null"
  299. stm-action="goal.cancel"
  300. stm-confirm="Cancel this goal? Its tasks are cancelled with it.">Cancel goal</button>
  301. </p>
  302. <p class="muted" stm-if="goal.status == 'draft'">Starting locks the brief and
  303. hands the goal to its agent (an orchestrate-mode run task, priority 3).</p>
  304. <p class="muted" stm-if="goal.status == 'paused'">Paused — supervision frozen;
  305. task events queue and coalesce into the resume.</p>
  306. </section>
  307. <!-- The agent's live progress feed (task-page pattern):
  308. the newest line leads, its history behind the
  309. expander. -->
  310. <h3>Agent progress</h3>
  311. <div stm-if="goal.progress.length > 0">
  312. <p class="progress-latest" stm-text="goal.progress[0].summary">latest</p>
  313. <p class="muted" stm-text="'reported ' + goal.progress[0].when_display">when</p>
  314. <details class="history-expander" stm-if="goal.progress.length > 1">
  315. <summary>Show history (<span stm-text="goal.progress.length">0</span> updates)</summary>
  316. <ul class="progress-history">
  317. <li stm-for-item-in="goal.progress">
  318. <span class="muted" stm-text="item.when_display">when</span> —
  319. <span stm-text="item.summary">summary</span>
  320. </li>
  321. </ul>
  322. </details>
  323. </div>
  324. <p stm-if="goal.progress.length == 0" class="muted">No progress reports yet — the goal
  325. agent reports via <code>saddle progress-update</code>.</p>
  326. <!-- Current activity (task-page parity): what the agent's
  327. open round is doing right now, plus its saddle's
  328. health. -->
  329. <section class="card goal-activity" stm-if="goal.run_task_id > 0">
  330. <h3>Current activity</h3>
  331. <p stm-if="goal.current_command.length > 0">
  332. <span class="badge badge-working" stm-if="goal.current_command_running">running</span>
  333. <code stm-text="goal.current_command">command</code>
  334. <span class="muted" stm-text="goal.current_command_display">when</span></p>
  335. <p stm-if="goal.current_command.length == 0" class="muted">No recorded activity in
  336. the current round — the raw terminal carries the live stream.</p>
  337. <p stm-if="goal.saddle_health.length > 0" class="muted"
  338. stm-text="goal.saddle_health">health</p>
  339. </section>
  340. <!-- The locked brief. -->
  341. <section class="card">
  342. <h3>Initial brief
  343. <span class="muted" stm-if="goal.started_display.length > 0">(locked)</span></h3>
  344. <div class="md rfc-body goal-body" data-brief-body stm-markdown="goal.brief">brief</div>
  345. </section>
  346. <!-- Involved projects. -->
  347. <section class="card">
  348. <h3>Involved projects</h3>
  349. <p stm-if="goal.links.length > 0"><span stm-for-link-in="goal.links">
  350. <span stm-attribute.class="'badge badge-' + link.relationship"
  351. stm-text="link.name + ' (' + link.relationship + ')'">link</span>
  352. <button type="button" class="inline" stm-action="link.remove"
  353. stm-confirm="Remove this link?">&times;</button>
  354. </span></p>
  355. <p stm-if="goal.links.length == 0" class="muted">Only the primary project.</p>
  356. <details stm-if="!goal.terminal">
  357. <summary>Link a project</summary>
  358. <form class="inline" stm-action="goal.add_link">
  359. <select name="linked_project_id" required>
  360. <option stm-for-project-in="goal.project_options" stm-attribute.value="project.id"
  361. stm-text="project.name">project</option>
  362. </select>
  363. <select name="relationship">
  364. <option value="co-developed">co-developed</option>
  365. <option value="reference">reference</option>
  366. </select>
  367. <button type="submit">Link</button>
  368. </form>
  369. </details>
  370. </section>
  371. <!-- The plan: the approved markdown; the pending review;
  372. the revision history (approved + rejected) behind the
  373. expander, task-page pattern. -->
  374. <section class="card">
  375. <h3>Plan</h3>
  376. <div stm-if="goal.plan.length > 0" class="md rfc-body goal-body" data-plan-body
  377. stm-markdown="goal.plan">plan</div>
  378. <p stm-if="goal.plan.length == 0 && goal.plan_pending_block == null"
  379. class="muted">No approved plan yet.</p>
  380. <div stm-if="goal.plan_pending_block != null && goal.plan_pending_block != false" class="plan-review" data-plan-review
  381. stm-attribute.data-block-id="goal.plan_pending_block.id">
  382. <h4>Plan submitted for review</h4>
  383. <div class="md rfc-body goal-body" data-plan-body
  384. stm-markdown="goal.plan_pending_block.body">revision</div>
  385. <div class="actions">
  386. <form stm-action="goal.plan_pending_block.answer_action" class="inline">
  387. <input type="hidden" name="answer"
  388. value="Plan approved. Proceed with implementation.">
  389. <button type="submit" class="approve" data-plan-accept>Approve plan</button>
  390. </form>
  391. <button type="button" data-plan-toggle>Reject with feedback</button>
  392. </div>
  393. <div data-plan-feedback hidden>
  394. <p class="muted">Highlight plan text to attach a remark to it — the queue
  395. rides the rejection numbered, then clears. Approving ignores the queue.</p>
  396. <ul class="plan-comments" data-plan-remarks></ul>
  397. <textarea name="feedback" rows="2"
  398. placeholder="Additional feedback (optional)"></textarea>
  399. <button type="button" class="primary" data-plan-submit>Submit feedback</button>
  400. </div>
  401. </div>
  402. <details class="history-expander" stm-if="goal.plan_revisions.length > 0">
  403. <summary>Plan revisions &amp; feedback (<span
  404. stm-text="goal.plan_revisions.length">0</span>)</summary>
  405. <div stm-for-revision-in="goal.plan_revisions" class="plan-revision">
  406. <p><span stm-attribute.class="'badge ' + (revision.approved ? 'badge-done' : (revision.answered ? 'badge-failed' : 'badge-plan'))"
  407. stm-text="revision.approved ? 'approved' : (revision.answered ? 'rejected' : 'pending')">verdict</span>
  408. <span class="muted" stm-text="'Revision #' + revision.id + ' — ' + revision.created_display">when</span></p>
  409. <details>
  410. <summary>Submitted markdown</summary>
  411. <div class="md rfc-body" stm-markdown="revision.body">body</div>
  412. </details>
  413. <blockquote stm-if="revision.answered" class="term-comment-quote">
  414. <span stm-text="revision.answered_by">who</span>:
  415. <span stm-text="revision.answer">answer</span></blockquote>
  416. </div>
  417. </details>
  418. </section>
  419. <!-- Completion review: the report, compare link. -->
  420. <section class="card" stm-if="goal.completion_pending">
  421. <h3>Completion review</h3>
  422. <p stm-if="goal.push_branches.length > 0">Goal branches:
  423. <span stm-for-branch-in="goal.push_branches">
  424. <code stm-text="branch.branch">b</code>
  425. <span stm-attribute.class="branch.pushed ? 'badge badge-done' : 'badge badge-failed'"
  426. stm-text="branch.pushed ? 'pushed' : 'unpushed'">state</span>
  427. </span></p>
  428. <p><a stm-if="goal.compare_url.length > 0" stm-attribute.href="goal.compare_url"
  429. target="_blank" rel="noopener">Compare changes</a></p>
  430. <div class="md rfc-body goal-body" stm-markdown="goal.completion_report">report</div>
  431. <form stm-action="goal.completion_pending_block.answer_action" class="inline">
  432. <input type="hidden" name="answer"
  433. value="Review approved. Continue with the task.">
  434. <button type="submit" class="approve">Accept goal</button>
  435. </form>
  436. <details>
  437. <summary>Request changes</summary>
  438. <form stm-action="goal.completion_pending_block.answer_action">
  439. <div class="form-row">
  440. <textarea name="answer" rows="4" required
  441. placeholder="What remains to be done?"></textarea></div>
  442. <button type="submit" class="reject">Send feedback</button>
  443. </form>
  444. </details>
  445. </section>
  446. <!-- Task status strip + the goal's task list. -->
  447. <section class="card">
  448. <h3>Tasks</h3>
  449. <p class="goal-strip">
  450. <button type="button" stm-attribute.class="window.goalFilterClass('draft')"
  451. onclick="window.goalSetFilter('draft')"
  452. stm-text="'draft ' + goal.draft_tasks">draft</button>
  453. <button type="button" stm-attribute.class="window.goalFilterClass('queued')"
  454. onclick="window.goalSetFilter('queued')"
  455. stm-text="'queued ' + goal.queued_tasks">queued</button>
  456. <button type="button" stm-attribute.class="window.goalFilterClass('working')"
  457. onclick="window.goalSetFilter('working')"
  458. stm-text="'running ' + goal.running_tasks">running</button>
  459. <button type="button" stm-attribute.class="window.goalFilterClass('done')"
  460. onclick="window.goalSetFilter('done')"
  461. stm-text="'done ' + goal.done_tasks">done</button>
  462. <button type="button" stm-attribute.class="window.goalFilterClass('failed')"
  463. onclick="window.goalSetFilter('failed')"
  464. stm-text="'failed ' + goal.failed_tasks">failed</button>
  465. <span class="muted">— click a status to filter</span>
  466. </p>
  467. <table>
  468. <thead><tr><th>#</th><th>Title</th><th>Status</th><th>Mode</th><th>Created by</th></tr></thead>
  469. <tbody>
  470. <tr stm-for-goal_task-in="goal.goal_tasks"
  471. stm-if="window.goalTaskVisible(goal_task)">
  472. <td stm-text="goal_task.id">id</td>
  473. <td><a stm-attribute.href="'/tasks/' + goal_task.id"
  474. stm-text="goal_task.title">title</a></td>
  475. <td><span stm-attribute.class="'badge badge-' + goal_task.status"
  476. stm-text="goal_task.display">status</span>
  477. <span class="badge badge-yeehaw" stm-if="goal_task.yeehaw">🤠</span></td>
  478. <td><span stm-attribute.class="'badge badge-mode-' + goal_task.mode"
  479. stm-text="goal_task.mode">mode</span></td>
  480. <td class="muted" stm-text="goal_task.creator">who</td>
  481. </tr>
  482. <tr stm-if="goal.goal_tasks.length == 0">
  483. <td colspan="5" class="muted">No tasks yet — the goal agent fans
  484. them out once the plan is approved.</td></tr>
  485. </tbody>
  486. </table>
  487. </section>
  488. <!-- The supervision narrative: one chronological feed of
  489. the goal agent's life (markdown bodies — reports land
  490. here whole). -->
  491. <section class="card">
  492. <h3>Supervision narrative</h3>
  493. <p stm-if="goal.events.length == 0" class="muted">Nothing yet — start the goal.</p>
  494. <div stm-for-event-in="goal.events" class="goal-event">
  495. <span class="muted" stm-text="event.at_display">when</span>
  496. <span stm-attribute.class="'badge badge-goal-' + event.kind"
  497. stm-text="event.kind.replace('-', ' ')">kind</span>
  498. <!-- Comment events render as footnotes (plan 13 B4):
  499. the body leads, muted and smaller. -->
  500. <div stm-attribute.class="'md goal-event-text' + (event.kind == 'comment' ? ' footnote' : '')"
  501. stm-markdown="event.text">text</div>
  502. <a stm-if="event.task_id > 0"
  503. stm-attribute.href="'/tasks/' + event.task_id">task</a>
  504. </div>
  505. </section>
  506. <!-- Comments with selection-quoting (markdown bodies). -->
  507. <section class="card">
  508. <h3>Comments</h3>
  509. <div stm-for-comment-in="goal.comments"
  510. stm-attribute.class="'comment' + (comment.from_agent ? ' agent' : '')">
  511. <strong stm-text="comment.author">author</strong>
  512. <span class="muted" stm-text="comment.created_display">when</span>
  513. <div class="md" stm-markdown="comment.body">body</div>
  514. <blockquote stm-if="comment.quote.length > 0" stm-text="comment.quote">quote</blockquote>
  515. </div>
  516. <p stm-if="goal.comments.length == 0" class="muted">No comments yet.</p>
  517. <form stm-action="goal.comment">
  518. <div class="form-row"><label for="goal-comment-body">Add comment</label>
  519. <textarea id="goal-comment-body" name="body" rows="3"
  520. placeholder="A comment for the goal agent (markdown)"></textarea></div>
  521. <button type="submit" class="primary">Comment</button>
  522. </form>
  523. <dialog id="quote-comment-dialog">
  524. <h3>Comment on selected text</h3>
  525. <blockquote id="quote-text" class="term-comment-quote"></blockquote>
  526. <form stm-action="goal.comment">
  527. <input type="hidden" name="quote">
  528. <input type="hidden" name="return_to">
  529. <textarea name="body" rows="4" placeholder="Your comment…"
  530. style="width:100%; margin:0.5em 0;"></textarea>
  531. <button type="submit" class="primary">Send comment</button>
  532. <button type="button"
  533. onclick="document.getElementById('quote-comment-dialog').close()">Cancel</button>
  534. </form>
  535. </dialog>
  536. </section>
  537. <!-- The goal agent's blocks (questions/RFCs) with full
  538. markdown bodies and their inline answer forms. -->
  539. <section class="card" stm-if="goal.blocks.length > 0">
  540. <h3>Goal agent blocks</h3>
  541. <div stm-for-block-in="goal.blocks" class="goal-block">
  542. <div stm-if="!block.is_plan_review && !block.is_completion_review">
  543. <p><span stm-attribute.class="'badge badge-block-' + block.block_type"
  544. stm-text="block.block_type">kind</span>
  545. <strong stm-text="block.question">question</strong>
  546. <span class="muted" stm-text="block.created_display">when</span></p>
  547. <div stm-if="block.show_body && block.body.length > 0"
  548. class="md rfc-body goal-body" stm-markdown="block.body">body</div>
  549. <blockquote stm-if="block.answered" class="term-comment-quote">
  550. <span stm-text="block.answered_by">who</span>:
  551. <span stm-text="block.answer">answer</span></blockquote>
  552. <form stm-if="!block.answered" stm-action="block.answer_action">
  553. <div stm-if="block.options.length > 0" class="form-row">
  554. <label>Options</label>
  555. <select name="option">
  556. <option stm-for-option-in="block.options" stm-attribute.value="option"
  557. stm-text="option">opt</option>
  558. </select></div>
  559. <div class="form-row">
  560. <textarea name="answer" rows="2"
  561. placeholder="Reply (or pick an option)"></textarea></div>
  562. <button type="submit" class="primary">Answer</button>
  563. </form>
  564. </div>
  565. </div>
  566. </section>
  567. <!-- Goal agent runs: every round with its host saddle; the
  568. terminal links open in a new tab (the session picker
  569. lives on the terminal page). -->
  570. <section class="card" stm-if="goal.runs.length > 0">
  571. <h3>Goal agent runs</h3>
  572. <p><a stm-attribute.href="'/tasks/' + goal.run_task_id + '/terminal'"
  573. target="_blank" rel="noopener">Terminal
  574. (session picker)</a> <span class="muted">— run task
  575. #<span stm-text="goal.run_task_id">id</span></span></p>
  576. <table>
  577. <thead><tr><th>Run</th><th>Saddle</th><th>Started</th><th>Ended</th><th>Outcome</th></tr></thead>
  578. <tbody>
  579. <tr stm-for-run-in="goal.runs">
  580. <td><a stm-attribute.href="run.terminal_url" target="_blank" rel="noopener"
  581. stm-text="'session ' + run.id">run</a></td>
  582. <td class="muted" stm-text="run.saddle_name">saddle</td>
  583. <td class="muted" stm-text="run.started_display">when</td>
  584. <td class="muted" stm-text="run.ended_display">when</td>
  585. <td><span stm-if="run.open" class="badge badge-working">open</span>
  586. <span stm-if="!run.open" stm-text="run.outcome">outcome</span></td>
  587. </tr>
  588. </tbody>
  589. </table>
  590. </section>
  591. </div>
  592. </div>
  593. </body>
  594. </html>