task_detail.html 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <pstm-uri>/tasks/{task_id}</pstm-uri>
  5. <pstm-template>main</pstm-template>
  6. <script>
  7. // Live updates: the page subscribes to the global pulse (see the
  8. // entrypoint); whenever task or saddle state changes anywhere in
  9. // the app, the sealed refresh action rehydrates the task slot —
  10. // no fixed-interval polling. RFC bodies get the shared
  11. // text-highlight -> comment popover (see main.html). Design-task
  12. // plan reviews collect inline comments on the plan and submit them
  13. // as the block answer.
  14. if (window.statum) {
  15. (function () {
  16. 'use strict';
  17. function refreshTask(source) {
  18. var task = statum.read('task');
  19. if (!task || !task.refresh) return;
  20. statum.act(task.refresh).catch(function (error) {
  21. // Never silently: a failed refresh means the page is
  22. // drifting from the server (e.g. the realtime channel
  23. // starved by the browser's per-origin SSE cap).
  24. console.warn('[task] live refresh (' + source + ') failed:', error);
  25. });
  26. }
  27. statum.addStateListener('pulse', function () {
  28. refreshTask('pulse');
  29. });
  30. // Belt and braces for SSE starvation: browsers cap ~6
  31. // connections per origin over HTTP/1.1, and every open
  32. // terminal tab holds a /terminal-stream EventSource — when
  33. // the budget is exhausted the pulse channel is silently
  34. // starved. Refreshing on focus recovers without a manual
  35. // reload.
  36. document.addEventListener('visibilitychange', function () {
  37. if (document.visibilityState === 'visible') refreshTask('focus');
  38. });
  39. if (window.initQuoteComments) {
  40. window.initQuoteComments({
  41. matches: function (node) {
  42. return node.closest && node.closest('.rfc-body') != null
  43. && node.closest('[data-plan-body]') == null;
  44. },
  45. action: function () {
  46. var task = statum.read('task');
  47. return task && task.comment;
  48. }
  49. });
  50. }
  51. // Plan-review feedback: collected comments live in these maps
  52. // (keyed by block id) so statum re-renders never lose them;
  53. // the DOM list is rebuilt after every render cycle.
  54. var feedbackByBlock = {};
  55. var modeByBlock = {};
  56. var planPopover = null;
  57. statum.afterEvaluate(syncPlanFeedback);
  58. document.addEventListener('click', function (event) {
  59. if (!event.target.closest) return;
  60. var toggle = event.target.closest('[data-plan-toggle]');
  61. if (toggle) {
  62. hidePlanPopover();
  63. var review = toggle.closest('[data-plan-review]');
  64. var id = review && review.getAttribute('data-block-id');
  65. if (id) modeByBlock[id] = !modeByBlock[id];
  66. syncPlanFeedback();
  67. return;
  68. }
  69. var submit = event.target.closest('[data-plan-submit]');
  70. if (submit) {
  71. submitPlanFeedback(submit.closest('[data-plan-review]'));
  72. return;
  73. }
  74. var remove = event.target.closest('[data-plan-remove]');
  75. if (remove) {
  76. var entry = remove.closest('[data-plan-comment-id]');
  77. var blockId = remove.closest('[data-plan-review]').getAttribute('data-block-id');
  78. var list = feedbackByBlock[blockId] || [];
  79. var index = parseInt(entry.getAttribute('data-plan-comment-id'), 10);
  80. if (!isNaN(index) && list[index]) list.splice(index, 1);
  81. feedbackByBlock[blockId] = list;
  82. syncPlanFeedback();
  83. }
  84. });
  85. document.addEventListener('mouseup', function (event) {
  86. if (!event.target.closest) return;
  87. if (planPopover && planPopover.contains(event.target)) return;
  88. var body = event.target.closest('[data-plan-body]');
  89. if (!body) {
  90. hidePlanPopover();
  91. return;
  92. }
  93. var review = body.closest('[data-plan-review]');
  94. if (!review || review.getAttribute('data-plan-open') !== '1') return;
  95. var selection = window.getSelection();
  96. var text = selection ? String(selection.toString()).trim() : '';
  97. if (text.length === 0) {
  98. hidePlanPopover();
  99. return;
  100. }
  101. showPlanPopover(event.pageX, event.pageY, text, review);
  102. });
  103. document.addEventListener('mousedown', function (event) {
  104. if (planPopover && event.target.closest && event.target.closest('.plan-popover')) return;
  105. hidePlanPopover();
  106. });
  107. function showPlanPopover(x, y, quote, review) {
  108. hidePlanPopover();
  109. planPopover = document.createElement('div');
  110. planPopover.className = 'plan-popover';
  111. planPopover.style.left = Math.min(x, window.innerWidth - 140) + 'px';
  112. planPopover.style.top = y + 'px';
  113. var quoted = document.createElement('blockquote');
  114. quoted.textContent = quote;
  115. planPopover.appendChild(quoted);
  116. var body = document.createElement('textarea');
  117. body.placeholder = 'Your comment on the selected plan text';
  118. planPopover.appendChild(body);
  119. var actions = document.createElement('div');
  120. actions.className = 'actions';
  121. var add = document.createElement('button');
  122. add.type = 'button';
  123. add.className = 'primary';
  124. add.textContent = 'Add comment';
  125. add.addEventListener('click', function () {
  126. if (body.value.trim().length === 0) return;
  127. var id = review.getAttribute('data-block-id');
  128. var list = feedbackByBlock[id] || [];
  129. list.push({ quote: quote, body: body.value.trim() });
  130. feedbackByBlock[id] = list;
  131. hidePlanPopover();
  132. syncPlanFeedback();
  133. });
  134. var cancel = document.createElement('button');
  135. cancel.type = 'button';
  136. cancel.textContent = 'Cancel';
  137. cancel.addEventListener('click', hidePlanPopover);
  138. actions.appendChild(add);
  139. actions.appendChild(cancel);
  140. planPopover.appendChild(actions);
  141. document.body.appendChild(planPopover);
  142. body.focus();
  143. }
  144. function hidePlanPopover() {
  145. if (planPopover) {
  146. planPopover.remove();
  147. planPopover = null;
  148. }
  149. }
  150. function submitPlanFeedback(review) {
  151. if (!review) return;
  152. var id = review.getAttribute('data-block-id');
  153. var list = feedbackByBlock[id] || [];
  154. if (list.length === 0) {
  155. if (window.showToast) window.showToast('Highlight some plan text and add a comment first', 'error');
  156. return;
  157. }
  158. var task = statum.read('task');
  159. var block = null;
  160. (task && task.blocks || []).forEach(function (candidate) {
  161. if (String(candidate.id) === String(id)) block = candidate;
  162. });
  163. if (!block || !block.answer_action) return;
  164. var answer = list.map(function (item) {
  165. return item.quote
  166. ? '> ' + item.quote.replace(/\n/g, '\n> ') + '\n\n' + item.body
  167. : item.body;
  168. }).join('\n\n');
  169. // Free-text feedback rides the `feedback` field so the
  170. // action wraps it in the stable verdict wording (the
  171. // answer IS the resume_notice the daemon reads).
  172. var extra = review.querySelector('[data-plan-feedback] textarea[name="feedback"]');
  173. if (extra && extra.value.trim().length > 0) {
  174. answer += '\n\n' + extra.value.trim();
  175. }
  176. feedbackByBlock[id] = [];
  177. modeByBlock[id] = false;
  178. statum.act(block.answer_action, { feedback: answer }).catch(function () { });
  179. }
  180. function syncPlanFeedback() {
  181. document.querySelectorAll('[data-plan-review]').forEach(function (review) {
  182. var id = review.getAttribute('data-block-id');
  183. var open = modeByBlock[id] ? '1' : '0';
  184. review.setAttribute('data-plan-open', open);
  185. var feedback = review.querySelector('[data-plan-feedback]');
  186. if (feedback) {
  187. if (modeByBlock[id]) feedback.removeAttribute('hidden');
  188. else feedback.setAttribute('hidden', '');
  189. }
  190. var list = review.querySelector('[data-plan-comments]');
  191. if (!list) return;
  192. while (list.firstChild) list.removeChild(list.firstChild);
  193. (feedbackByBlock[id] || []).forEach(function (item, index) {
  194. var entry = document.createElement('li');
  195. entry.setAttribute('data-plan-comment-id', String(index));
  196. if (item.quote) {
  197. var quoted = document.createElement('blockquote');
  198. quoted.textContent = item.quote;
  199. entry.appendChild(quoted);
  200. }
  201. var body = document.createElement('div');
  202. body.textContent = item.body;
  203. entry.appendChild(body);
  204. var remove = document.createElement('button');
  205. remove.type = 'button';
  206. remove.className = 'inline';
  207. remove.setAttribute('data-plan-remove', '');
  208. remove.textContent = 'Remove';
  209. entry.appendChild(remove);
  210. list.appendChild(entry);
  211. });
  212. });
  213. }
  214. })();
  215. }
  216. </script>
  217. </head>
  218. <body>
  219. <section>
  220. <h2 stm-if="task != null && task.exists">#<span stm-text="task.id">id</span> —
  221. <span stm-text="task.title">title</span></h2>
  222. <p stm-if="task != null && !task.exists" class="muted">Task not found.</p>
  223. <div stm-if="task != null && task.exists">
  224. <p><a href="/tasks">All tasks</a> · project
  225. <a stm-attribute.href="'/projects/' + task.project_id" stm-text="task.project_name">project</a>
  226. <span stm-if="task.enqueue_after_task_id > 0"> · auto-enqueues after
  227. <a stm-attribute.href="'/tasks/' + task.enqueue_after_task_id"
  228. stm-text="'#' + task.enqueue_after_task_id">after</a></span></p>
  229. <!-- Progress feed ABOVE the status card (plan 11 task D):
  230. the agent's newest line leads the page, its history
  231. behind the "Show history" expander. -->
  232. <h3>Progress</h3>
  233. <div stm-if="task.progress.length > 0">
  234. <p class="progress-latest" stm-text="task.progress[0].summary">latest</p>
  235. <p class="muted" stm-text="'reported ' + task.progress[0].when_display">when</p>
  236. <details class="history-expander" stm-if="task.progress.length > 1">
  237. <summary>Show history (<span stm-text="task.progress.length">0</span> updates)</summary>
  238. <ul class="progress-history">
  239. <li stm-for-item-in="task.progress">
  240. <span class="muted" stm-text="item.when_display">when</span> —
  241. <span stm-text="item.summary">summary</span>
  242. </li>
  243. </ul>
  244. </details>
  245. </div>
  246. <p stm-if="task.progress.length == 0" class="muted">No progress reports yet — the agent reports via
  247. <code>saddle progress-update</code>.</p>
  248. <!-- Agent celebrations (`saddle yeehaw <message>`): the task's
  249. newest entries as one festive card — distinct 🤠 styling,
  250. the message + when, capped at the last 3 with a "+N more"
  251. hint. Absent entirely while the task has none. -->
  252. <section class="card yeehaw-card" stm-if="task.yeehaw">
  253. <h3>🤠 Yeehaw!</h3>
  254. <ul class="yeehaw-list">
  255. <li stm-for-yeehaw-in="task.yeehaws">
  256. <span class="yeehaw-message" stm-text="yeehaw.message">message</span>
  257. <span class="muted" stm-text="yeehaw.when_display">when</span>
  258. </li>
  259. </ul>
  260. <p class="muted" stm-if="task.yeehaw_more > 0">+<span stm-text="task.yeehaw_more">0</span>
  261. more yeehaw<span stm-text="task.yeehaw_more == 1 ? '' : 's'"></span> on the
  262. <a stm-attribute.href="'/tasks/' + task.id + '/terminal'"
  263. target="_blank" rel="noopener">terminal log</a></p>
  264. </section>
  265. <!-- Status + description side by side in a 50/50 grid (plan
  266. 11 task D), collapsing to stacked
  267. status-then-description on small screens. The
  268. lifecycle buttons ride the status card (plan 11): new
  269. tasks are drafts — Enqueue and Delete in draft (delete
  270. guarded by dependents), Cancel in non-draft
  271. non-terminal; completion is agent-only. -->
  272. <div class="grid-2">
  273. <section class="card status-head">
  274. <h3>Status <span class="badge badge-yeehaw status-corner" stm-if="task.yeehaw"
  275. title="The agent celebrated this task (saddle yeehaw)">🤠</span></h3>
  276. <p><span stm-attribute.class="'badge badge-' + task.status" stm-text="task.display">status</span>
  277. <span stm-attribute.class="'badge badge-mode-' + task.mode" stm-text="task.mode">mode</span>
  278. · priority <strong stm-text="task.priority">5</strong></p>
  279. <p class="muted" stm-if="task.enqueue_after_task_id > 0">Auto-enqueues after
  280. <a stm-attribute.href="'/tasks/' + task.enqueue_after_task_id"
  281. stm-text="'#' + task.enqueue_after_task_id + ' ' + task.enqueue_after_title">after</a></p>
  282. <p class="muted">Created <span stm-text="task.created_display">when</span></p>
  283. <p class="muted" stm-if="task.started_display.length > 0">Started <span stm-text="task.started_display">when</span></p>
  284. <p class="muted" stm-if="task.completed_display.length > 0">Completed <span stm-text="task.completed_display">when</span></p>
  285. <p stm-if="task.task_branch.length > 0">Branch: <strong stm-text="task.task_branch">branch</strong>
  286. <span class="muted" stm-if="task.branch_from.length > 0"> from <span stm-text="task.branch_from">base</span></span></p>
  287. <p stm-if="task.working_branch.length > 0" class="muted">Working branch: <span stm-text="task.working_branch">branch</span></p>
  288. <p stm-if="task.status == 'suspended'" class="muted">Parked (`saddle suspend`) —
  289. the goal agent resumes on its goal's task events, with the
  290. batched status report riding the resume.</p>
  291. <form class="inline">
  292. <input type="hidden" name="task_id" stm-attribute.value="task.id">
  293. <button type="button" stm-if="task.draft" class="primary"
  294. stm-action="task.enqueue">Enqueue task</button>
  295. <button type="button" stm-if="task.draft"
  296. stm-action="task.delete"
  297. stm-confirm="Delete this draft task? This cannot be undone.">Delete</button>
  298. <button type="button" stm-if="task.status == 'failed'" class="primary"
  299. stm-action="task.retry">Retry task</button>
  300. <button type="button" stm-if="task.resume_available"
  301. stm-action="task.resume"
  302. stm-confirm="Requeue this task? The daemon restores its workspace context on the next dispatch.">Requeue to resume</button>
  303. <button type="button" stm-if="!task.draft && !task.terminal"
  304. stm-action="task.cancel" stm-confirm="Cancel this task?">Cancel task</button>
  305. </form>
  306. <form class="inline">
  307. <input type="hidden" name="task_id" stm-attribute.value="task.id">
  308. <button type="button" stm-action="task.toggle_notify"
  309. stm-text="task.notify_me ? 'Don&#39;t notify me' : 'Notify me'">Notify me</button>
  310. <span class="muted">— this task&#39;s first start, failure and completion
  311. (questions and reviews always notify subscribed users)</span>
  312. </form>
  313. </section>
  314. <!-- Plan 12: the goal reference — a goal task or the
  315. goal agent's own run links back to its goal. -->
  316. <section class="card" stm-if="task.goal_id > 0">
  317. <h3>Goal</h3>
  318. <p><span stm-attribute.class="'badge badge-' + task.goal_status"
  319. stm-text="task.goal_status.replace('_', ' ')">status</span>
  320. <a stm-attribute.href="'/goals/' + task.goal_id" stm-text="task.goal_title">goal</a></p>
  321. <p class="muted">Goal branch <code stm-text="task.goal_branch">branch</code>
  322. <span stm-if="task.is_goal_run">— this task IS the goal agent's run
  323. (orchestrate mode; the goal page owns its lifecycle)</span>
  324. <span stm-if="!task.is_goal_run">— this task runs under the goal agent's
  325. supervision on an ephemeral branch</span></p>
  326. </section>
  327. <!-- Plan 12: the mandate — the plan-11 "Description"
  328. card, framed as the binding work order. -->
  329. <section class="card">
  330. <h3>Mandate</h3>
  331. <div stm-if="task.description.length > 0" class="md" stm-markdown="task.description">description</div>
  332. <p class="muted" stm-if="task.description.length == 0">No mandate.</p>
  333. </section>
  334. </div>
  335. <!-- The heredoc completion report (`cat << 'EOF' | saddle
  336. done`): terminal tasks render tasks.summary as
  337. markdown (XSS-safe via stm-markdown) in this
  338. full-width card directly below the status/description
  339. grid — "Completion report" when done, "Failure
  340. summary" when failed; an empty summary renders no
  341. card. -->
  342. <section class="card completion-report"
  343. stm-if="task.terminal && task.summary.length > 0">
  344. <h3 stm-text="task.report_title">Completion report</h3>
  345. <div class="md" stm-markdown="task.summary">summary</div>
  346. </section>
  347. <!-- The edit expander sits UNDER the "Show history" expander
  348. (plan 11 task D): draft tasks edit every field except
  349. status; non-draft non-terminal tasks edit priority
  350. only; terminal tasks edit nothing. The description
  351. arrives pre-filled whenever it is editable. -->
  352. <details class="edit-expander" stm-if="task.editable_all || task.editable_priority">
  353. <summary><strong>Edit task</strong>
  354. <span class="muted" stm-if="task.editable_all">— every field except status while in draft</span>
  355. <span class="muted" stm-if="!task.editable_all && task.editable_priority">— priority only once work has begun</span></summary>
  356. <form stm-action="task.update" stm-if="task.editable_all">
  357. <input type="hidden" name="task_id" stm-attribute.value="task.id">
  358. <div class="form-row"><label>Title</label>
  359. <input type="text" name="title" stm-attribute.value="task.title"></div>
  360. <div class="form-row"><label>Mandate</label>
  361. <textarea name="description" rows="4" stm-attribute.value="task.description"></textarea></div>
  362. <div class="form-row" stm-if="!task.is_goal_run"><label>Mode</label>
  363. <select name="mode" stm-attribute.value="task.mode">
  364. <option value="implement">implement — build the change on a task branch</option>
  365. <option value="investigate">investigate — explore and report, no code changes</option>
  366. <option value="review">review — read and critique existing work</option>
  367. <option value="test">test — write and run tests</option>
  368. </select></div>
  369. <div class="form-row" stm-if="task.creator == 'human' && !task.is_goal_run"><label>Auto-enqueue after
  370. <span class="muted">(enqueues itself when the predecessor is done; none clears it)</span></label>
  371. <select name="enqueue_after_task_id">
  372. <option value="">none</option>
  373. <option stm-for-option-in="task.enqueue_after_options" stm-attribute.value="option.id"
  374. stm-text="'#' + option.id + ' ' + option.title">task</option>
  375. </select></div>
  376. <div class="form-row"><label>Priority (1–9)</label>
  377. <input type="number" name="priority" min="1" max="9" stm-attribute.value="task.priority"></div>
  378. <div class="form-row"><label>Task branch</label>
  379. <input type="text" name="task_branch" stm-attribute.value="task.task_branch" placeholder="task/<id>-<slug>"></div>
  380. <div class="form-row"><label>Branch from</label>
  381. <input type="text" name="branch_from" stm-attribute.value="task.branch_from"></div>
  382. <button type="submit">Save</button>
  383. </form>
  384. <form stm-action="task.update" stm-if="!task.editable_all && task.editable_priority">
  385. <input type="hidden" name="task_id" stm-attribute.value="task.id">
  386. <div class="form-row"><label>Priority (1–9)</label>
  387. <input type="number" name="priority" min="1" max="9" stm-attribute.value="task.priority"></div>
  388. <button type="submit">Save</button>
  389. </form>
  390. </details>
  391. <!-- Current blocks render in full (plan 11 task D);
  392. answered ones fold behind the history expander. -->
  393. <h3>Blocks <span class="muted" stm-if="task.open_blocks.length > 0">(<span stm-text="task.open_blocks.length">0</span> open)</span></h3>
  394. <div stm-for-block-in="task.open_blocks" stm-key="block.id"
  395. stm-attribute.class="'block-card ' + block.block_type + (block.answered ? ' answered' : '')">
  396. <div stm-if="!block.answered && block.block_type == 'review'" class="review-banner">
  397. <h3>Review requested</h3>
  398. <div class="md" stm-markdown="block.body.length > 0 ? block.body : block.question">summary</div>
  399. <p>Branch <strong stm-text="task.task_branch">branch</strong>
  400. <a stm-if="task.review_diff_url.length > 0" stm-attribute.href="task.review_diff_url"
  401. target="_blank" rel="noopener">· compare changes</a></p>
  402. <div class="actions">
  403. <form stm-action="block.answer_action" class="inline">
  404. <input type="hidden" name="answer" value="Review approved. Continue with the task.">
  405. <button type="submit" class="approve">Approve</button>
  406. </form>
  407. <form stm-action="block.answer_action" class="inline">
  408. <textarea name="feedback" rows="2" placeholder="What should change?"></textarea>
  409. <button type="submit" class="reject">Request changes</button>
  410. </form>
  411. </div>
  412. </div>
  413. <div stm-if="!block.answered && block.is_plan_review" class="plan-review"
  414. data-plan-review stm-attribute.data-block-id="block.id">
  415. <div class="md rfc-body" stm-markdown="block.body" data-plan-body>plan</div>
  416. <div class="actions">
  417. <form stm-action="block.answer_action" class="inline">
  418. <input type="hidden" name="answer" value="Plan approved. Proceed with implementation.">
  419. <button type="submit" class="approve">Accept plan</button>
  420. </form>
  421. <button type="button" data-plan-toggle>Reject with feedback</button>
  422. </div>
  423. <div data-plan-feedback hidden>
  424. <p class="muted">Highlight plan text to attach a comment to it, then submit everything
  425. as feedback — the agent revises the plan and asks again.</p>
  426. <ul class="plan-comments" data-plan-comments></ul>
  427. <textarea name="feedback" rows="2" placeholder="Additional feedback (optional)"></textarea>
  428. <button type="button" class="primary" data-plan-submit>Submit feedback</button>
  429. </div>
  430. </div>
  431. <p><span stm-attribute.class="'badge badge-' + block.block_type" stm-text="block.block_type">type</span>
  432. <span class="muted" stm-text="block.created_display">when</span></p>
  433. <div stm-if="block.show_body && block.body.length > 0" class="md rfc-body"
  434. stm-markdown="block.body">body</div>
  435. <div stm-if="block.answered">
  436. <p>Answer: <strong stm-text="block.answer">answer</strong>
  437. <span class="muted" stm-text="block.answered_display">when</span>
  438. <span class="badge" stm-if="block.answered_by == 'auto'">auto</span></p>
  439. </div>
  440. <form stm-if="!block.answered && block.block_type == 'question'" stm-action="block.answer_action">
  441. <div class="options">
  442. <label stm-for-option-in="block.options" stm-key="option" class="option-card">
  443. <input type="radio" name="option" stm-attribute.value="option">
  444. <span stm-text="option">option</span>
  445. </label>
  446. <label>
  447. <input type="radio" name="option" value="__other__">
  448. <span>Other:</span>
  449. <textarea name="other" rows="2"></textarea>
  450. </label>
  451. </div>
  452. <button type="submit" class="primary">Answer</button>
  453. </form>
  454. <form stm-if="!block.answered && block.block_type != 'question' && block.block_type != 'review' && !block.is_plan_review"
  455. stm-action="block.answer_action" class="inline">
  456. <textarea name="answer" rows="3" placeholder="Your reply (delivered to the agent)"></textarea>
  457. <button type="submit" class="primary">Reply</button>
  458. </form>
  459. </div>
  460. <p stm-if="task.open_blocks.length == 0 && task.answered_blocks.length == 0" class="muted">No blocks — the agent has no open questions.</p>
  461. <!-- Historical (answered) blocks behind an expander, the
  462. current ones in full above (plan 11 task D). -->
  463. <details class="blocks-history" stm-if="task.answered_blocks.length > 0">
  464. <summary>Answered blocks (<span stm-text="task.answered_blocks.length">0</span>)</summary>
  465. <div stm-for-block-in="task.answered_blocks" stm-key="block.id"
  466. stm-attribute.class="'block-card answered ' + block.block_type">
  467. <p><span stm-attribute.class="'badge badge-' + block.block_type" stm-text="block.block_type">type</span>
  468. <span stm-text="block.question">question</span>
  469. <span class="muted" stm-text="block.created_display">when</span></p>
  470. <div stm-if="block.show_body && block.body.length > 0" class="md rfc-body"
  471. stm-markdown="block.body">body</div>
  472. <p>Answer: <strong stm-text="block.answer">answer</strong>
  473. <span class="muted" stm-text="block.answered_display">when</span>
  474. <span class="badge" stm-if="block.answered_by == 'auto'">auto</span></p>
  475. </div>
  476. </details>
  477. <h3>Comments</h3>
  478. <div stm-for-comment-in="task.comments" stm-attribute.class="'comment' + (comment.from_agent ? ' agent' : '')">
  479. <strong stm-text="comment.author">author</strong>
  480. <span class="muted" stm-text="comment.when_display">when</span>
  481. <div stm-text="comment.body">body</div>
  482. <blockquote stm-if="comment.quote.length > 0" stm-text="comment.quote">quote</blockquote>
  483. </div>
  484. <p stm-if="task.comments.length == 0" class="muted">No comments yet.</p>
  485. <form stm-action="task.comment">
  486. <input type="hidden" name="task_id" stm-attribute.value="task.id">
  487. <div class="form-row"><label for="comment-body">Add comment</label>
  488. <textarea id="comment-body" name="body" rows="3" placeholder="A comment for the agent"></textarea></div>
  489. <button type="submit" class="primary">Comment</button>
  490. </form>
  491. <!-- The highlight-to-comment popover (main.html) fills and opens
  492. this dialog; it went missing in a template rework, which broke
  493. quoting on RFC bodies. -->
  494. <dialog id="quote-comment-dialog">
  495. <h3>Comment on selected text</h3>
  496. <blockquote id="quote-text" class="term-comment-quote"></blockquote>
  497. <form stm-action="task.comment">
  498. <input type="hidden" name="task_id" stm-attribute.value="task.id">
  499. <input type="hidden" name="quote">
  500. <input type="hidden" name="return_to">
  501. <textarea name="body" rows="4" placeholder="Your comment…" style="width:100%; margin:0.5em 0;"></textarea>
  502. <button type="submit" class="primary">Send comment</button>
  503. <button type="button" onclick="document.getElementById('quote-comment-dialog').close()">Cancel</button>
  504. </form>
  505. </dialog>
  506. <h3>Rules</h3>
  507. <p class="muted">Task rules lead the effective set dispatched with this task.</p>
  508. <div stm-for-rule-in="task.rules" stm-key="rule.link_id" class="card">
  509. <h3 stm-text="rule.name">name</h3>
  510. <div class="md" stm-markdown="rule.body">body</div>
  511. <form class="inline">
  512. <button type="button" stm-action="rule.detach" stm-confirm="Detach this rule?">Detach</button>
  513. </form>
  514. </div>
  515. <p stm-if="task.rules.length == 0" class="muted">No task-specific rules.</p>
  516. <form class="inline" stm-action="task.attach_rule" stm-if="task.rule_options.length > 0">
  517. <label for="task-rule-target">Attach rule</label>
  518. <select id="task-rule-target" name="rule_id" required>
  519. <option stm-for-option-in="task.rule_options" stm-attribute.value="option.id"
  520. stm-text="option.name">rule</option>
  521. </select>
  522. <button type="submit">Attach</button>
  523. </form>
  524. <h3>Required capabilities</h3>
  525. <p class="muted">The dispatcher only assigns this task to a saddle carrying all of these tags.</p>
  526. <p stm-if="task.capabilities.length > 0">
  527. <span stm-for-capability-in="task.capabilities" stm-key="capability.link_id">
  528. <span class="badge"><span stm-text="capability.name">tag</span>
  529. <button type="button" class="inline chip-remove"
  530. stm-action="capability.detach" stm-confirm="Remove this requirement?">×</button></span>
  531. </span>
  532. </p>
  533. <p stm-if="task.capabilities.length == 0" class="muted">No requirements — any idle saddle may run it.</p>
  534. <form class="inline" stm-action="task.attach_capability" stm-if="task.capability_options.length > 0">
  535. <label for="task-capability-target">Require capability</label>
  536. <select id="task-capability-target" name="capability_id" required>
  537. <option stm-for-option-in="task.capability_options" stm-attribute.value="option.id"
  538. stm-text="option.name">capability</option>
  539. </select>
  540. <button type="submit">Require</button>
  541. </form>
  542. <h3>Sessions</h3>
  543. <p stm-if="task.saddle_health.length > 0" class="muted"
  544. stm-text="task.saddle_health">saddle health</p>
  545. <table>
  546. <thead><tr><th>#</th><th>Saddle</th><th>Started</th><th>Ended</th><th>Outcome</th><th></th></tr></thead>
  547. <tbody>
  548. <tr stm-for-session-in="task.sessions">
  549. <td stm-text="session.id">id</td>
  550. <td stm-text="session.saddle_name">saddle</td>
  551. <td stm-text="session.started_display">started</td>
  552. <td stm-text="session.ended_display">ended</td>
  553. <td stm-if="session.open"><span class="badge badge-working">open</span></td>
  554. <td stm-if="!session.open" stm-text="session.outcome">outcome</td>
  555. <td><a stm-attribute.href="'/tasks/' + task.id + '/terminal?session_id=' + session.id"
  556. target="_blank" rel="noopener">Terminal</a></td>
  557. </tr>
  558. <tr stm-if="task.sessions.length == 0"><td colspan="6" class="muted">No sessions yet.</td></tr>
  559. </tbody>
  560. </table>
  561. </div>
  562. </section>
  563. </body>
  564. </html>