goal_detail.html 43 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727
  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 (goal 41 T6): the state strip leads — the
  8. // one-glance verdict (status badge, the open-item line, the
  9. // primary lifecycle button) — then the anchor sub-nav, then the
  10. // Act|Consult two-column layout (spry .with-sidebar): the acting
  11. // surfaces (state, blocks/questions, plan review, completion
  12. // review, comments) on the left, the consulting ones (tasks with
  13. // the filter strip, initial brief, involved projects, rules,
  14. // narrative, runs) on the right, stacking Act-then-Consult under
  15. // the framework breakpoint. Below the fold the page keeps its
  16. // established surfaces: the agent's live progress feed, the
  17. // attention blocks (the goal agent's answerable questions/RFCs
  18. // and the completion review), the locked brief, the effective
  19. // rules, the approved plan (revision history behind the
  20. // expander), the supervision narrative (events at full weight,
  21. // comment events as footnotes), the comment thread with
  22. // selection-quoting, and the goal agent's runs. Every long-form
  23. // body (brief, plans, reports, blocks, comments, events) renders
  24. // as markdown via stm-markdown. The plan review collects REMARKS
  25. // through the shared initPlanReviews engine (main.html, plan 16
  26. // R3/arch 15): a per-block queue that renders at the bottom of
  27. // the plan, persists across pulse refreshes (the maps live
  28. // outside statum re-renders), rides the rejection numbered, and
  29. // clears on accept. The tasks card's filter lives client-side in
  30. // window.goalTaskFilter; clicking a strip button re-runs the
  31. // sealed refresh action, and the filter rides the re-render.
  32. if (window.statum) {
  33. (function () {
  34. 'use strict';
  35. window.goalTaskFilter = window.goalTaskFilter || null;
  36. window.goalFilterClass = function (status) {
  37. return window.goalTaskFilter === status ? 'goal-filter active'
  38. : 'goal-filter';
  39. };
  40. window.goalTaskVisible = function (task) {
  41. return window.goalTaskFilter == null
  42. || window.goalTaskFilter === false
  43. || window.goalTaskFilter === ''
  44. || window.goalTaskFilter === task.status;
  45. };
  46. window.goalSetFilter = function (status) {
  47. window.goalTaskFilter = window.goalTaskFilter === status ? null : status;
  48. refreshGoal('filter');
  49. };
  50. function refreshGoal(source) {
  51. var goal = statum.read('goal');
  52. if (!goal || !goal.refresh) return;
  53. statum.act(goal.refresh).catch(function (error) {
  54. console.warn('[goal] live refresh (' + source + ') failed:', error);
  55. });
  56. }
  57. statum.addStateListener('pulse', function () {
  58. refreshGoal('pulse');
  59. });
  60. document.addEventListener('visibilitychange', function () {
  61. if (document.visibilityState === 'visible') refreshGoal('focus');
  62. });
  63. // Goal 41 T6 (bet 2): the anchor sub-nav. Statum re-renders
  64. // replace the DOM, so the listener binds ONCE on document
  65. // and the highlight pass re-runs after every evaluate —
  66. // the same rebound pattern as the filter strip (the
  67. // seals survive because nothing page-scoped is captured).
  68. var SUBNAV = 'goal-subnav';
  69. var SECTIONS = 'goal-section';
  70. function goalHighlightSubnav() {
  71. var nav = document.getElementsByClassName(SUBNAV)[0];
  72. if (!nav) return;
  73. var links = nav.querySelectorAll('a[href^="#"]');
  74. var sections = document.getElementsByClassName(SECTIONS);
  75. if (!links.length || !sections.length) return;
  76. // Two columns share the viewport, so "the last section
  77. // that crossed the line" (the single-column rule) can
  78. // pick a consult-column card while the reader looks at
  79. // an act-column one. The section whose top sits
  80. // CLOSEST to the nav's bottom edge (just below it)
  81. // is the one the reader entered; ties go to the later
  82. // DOM node (the deeper scroll).
  83. var mark = nav.getBoundingClientRect().bottom + 24;
  84. var current = null;
  85. var best = Infinity;
  86. for (var i = 0; i < sections.length; i++) {
  87. var distance = sections[i].getBoundingClientRect().top - mark;
  88. if (distance > 0) continue; // still below the fold line
  89. if (-distance <= best) {
  90. best = -distance;
  91. current = sections[i].id;
  92. }
  93. }
  94. for (var j = 0; j < links.length; j++) {
  95. var active = links[j].getAttribute('href') === '#' + current;
  96. links[j].classList.toggle('active', active);
  97. if (active) links[j].setAttribute('aria-current', 'true');
  98. else links[j].removeAttribute('aria-current');
  99. }
  100. }
  101. document.addEventListener('click', function (event) {
  102. var link = event.target.closest
  103. && event.target.closest('.' + SUBNAV + ' a[href^="#"]');
  104. if (!link) return;
  105. var target = document.getElementById(
  106. link.getAttribute('href').slice(1));
  107. if (!target) return;
  108. event.preventDefault();
  109. target.scrollIntoView();
  110. // scrollIntoView respects the sticky nav only through
  111. // scroll-margin-top (app.css); the highlight lands on
  112. // the raf after the scroll settles.
  113. requestAnimationFrame(goalHighlightSubnav);
  114. });
  115. window.addEventListener('scroll', goalHighlightSubnav,
  116. { passive: true });
  117. window.addEventListener('resize', goalHighlightSubnav,
  118. { passive: true });
  119. statum.afterEvaluate(goalHighlightSubnav);
  120. if (window.initQuoteComments) {
  121. window.initQuoteComments({
  122. matches: function (node) {
  123. // The pending plan body feeds the REMARKS
  124. // popover instead (below) - everything else
  125. // long-form on the goal quote-comments.
  126. return node.closest && node.closest('.goal-body') != null
  127. && node.closest('[data-plan-body]') == null;
  128. },
  129. action: function () {
  130. var goal = statum.read('goal');
  131. return goal && goal.comment;
  132. }
  133. });
  134. }
  135. // The goal's plan-review remarks ride the SHARED
  136. // engine (main.html's initPlanReviews, plan 16 R3/arch
  137. // 15 - the duplicated ~180-line collect-remarks pattern
  138. // now lives once); only the block resolution is page
  139. // state.
  140. // Plan 16 S2: the block for a review container resolves
  141. // from the ACTUAL [data-plan-review] element - the pending
  142. // completion review renders as an attention block (NOT the
  143. // plan section), so goal.plan_pending_block alone never
  144. // resolves it; every open block plus the plan section's
  145. // row are all candidates.
  146. function resolveReviewBlock(id) {
  147. var goal = statum.read('goal');
  148. if (!goal) return null;
  149. var block = null;
  150. (goal.open_blocks || []).forEach(function (candidate) {
  151. if (String(candidate.id) === String(id)) block = candidate;
  152. });
  153. if (!block && goal.plan_pending_block
  154. && String(goal.plan_pending_block.id) === String(id)) {
  155. block = goal.plan_pending_block;
  156. }
  157. return block;
  158. }
  159. if (window.initPlanReviews) {
  160. window.initPlanReviews({
  161. resolveBlock: function (id) { return resolveReviewBlock(id); }
  162. });
  163. }
  164. // The brief card's in-place editor (task 12).
  165. if (window.initLongFormEditors) {
  166. window.initLongFormEditors();
  167. }
  168. })();
  169. }
  170. </script>
  171. </head>
  172. <body>
  173. <div class="page goal-page">
  174. <pstm-fragment name="breadcrumb" crumbs="goal.crumbs"/>
  175. <h2 stm-if="goal.exists"><span class="goal-icon">🎯</span> #<span stm-text="goal.id">id</span> —
  176. <span stm-text="goal.title">title</span></h2>
  177. <p stm-if="!goal.exists" class="text-muted">Goal not found.</p>
  178. <div stm-if="goal.exists">
  179. <!-- GOAL 41 T6 (quick win 7): the one-line STATE STRIP —
  180. the verdict without parsing the Status card: status
  181. badge, the open-item line ("2 questions waiting · plan
  182. revision 3 pending"), the PRIMARY lifecycle button
  183. (the one matching the current state; the full ladder
  184. keeps living on the Status card). Nothing else — the
  185. strip is one glance. -->
  186. <div class="goal-state-strip" data-goal-state-strip>
  187. <span stm-attribute.class="'badge badge-' + goal.status"
  188. stm-text="goal.display">status</span>
  189. <span class="goal-state-verdict">
  190. <span stm-if="goal.open_blocks.length == 0
  191. && (goal.plan_pending_block == null
  192. || goal.plan_pending_block == false)
  193. && !goal.completion_pending"
  194. class="text-muted">No open items — nothing waits on
  195. you.</span>
  196. <span stm-if="goal.plan_pending_block != null
  197. && goal.plan_pending_block != false">
  198. Plan revision #<span stm-text="goal.plan_pending_block.id">n</span>
  199. pending</span>
  200. <span stm-if="goal.completion_pending">Completion review
  201. pending</span>
  202. <span stm-if="goal.open_blocks.length == 1"
  203. stm-text="'1 ' + (goal.open_blocks[0].block_type == 'question'
  204. ? 'question' : goal.open_blocks[0].block_type)
  205. + ' waiting'">1 waiting</span>
  206. <span stm-if="goal.open_blocks.length > 1"
  207. stm-text="goal.open_blocks.length + ' items waiting'">n waiting</span>
  208. </span>
  209. <span class="goal-state-actions">
  210. <button type="button" class="btn-primary btn-sm"
  211. stm-if="goal.start != null" stm-action="goal.start">Start
  212. goal</button>
  213. <button type="button" class="btn-primary btn-sm"
  214. stm-if="goal.resume != null" stm-action="goal.resume">Resume</button>
  215. <button type="button" class="btn-primary btn-sm"
  216. stm-if="goal.retry_run != null" stm-action="goal.retry_run">Retry
  217. supervision</button>
  218. <button type="button" class="btn-primary btn-sm"
  219. stm-if="goal.pause != null" stm-action="goal.pause">Pause</button>
  220. <button type="button" class="btn-primary btn-sm"
  221. stm-if="goal.requeue_run != null" stm-action="goal.requeue_run"
  222. stm-confirm="Requeue the agent's run? The daemon restores its workspace context on the next dispatch.">Requeue
  223. to resume</button>
  224. <button type="button" class="btn-primary btn-sm"
  225. stm-if="goal.force_wake != null" stm-action="goal.force_wake"
  226. stm-confirm="Force-woke this goal's parked agent? It resumes immediately on its saddle - one wake per press.">Force
  227. wake</button>
  228. </span>
  229. </div>
  230. <!-- GOAL 41 T6 (bet 2): the anchor sub-nav — Status ·
  231. Blocks · Plan · Tasks · Brief · Narrative · Comments.
  232. Sticky under the topbar (app.css reads its height);
  233. the highlight listener lives in the page script
  234. (rebound through statum.afterEvaluate). -->
  235. <nav class="goal-subnav" aria-label="Sections" data-goal-subnav>
  236. <a href="#goal-sec-status">Status</a>
  237. <a href="#goal-sec-blocks">Blocks</a>
  238. <a href="#goal-sec-plan">Plan</a>
  239. <a href="#goal-sec-tasks">Tasks</a>
  240. <a href="#goal-sec-brief">Brief</a>
  241. <a href="#goal-sec-narrative">Narrative</a>
  242. <a href="#goal-sec-comments">Comments</a>
  243. </nav>
  244. <!-- GOAL 41 T6 (bet 1): Act|Consult — spry's
  245. .with-sidebar grid with the proportions flipped (the
  246. acting column is the wide one; app.css owns the
  247. columns + the sub-55rem stack). ACT carries the
  248. attention order the page already had: pending
  249. reviews lead (actions surface), then state, blocks,
  250. plan, comments. CONSULT carries the reference
  251. surfaces the reader jumps to. -->
  252. <div class="goal-columns with-sidebar" data-goal-columns>
  253. <div class="stack" data-goal-act>
  254. <!-- Status head (first in the ACT column, always):
  255. lifecycle badge, branch pair with the
  256. daemon-reported push-state chips, priority,
  257. timestamps, the assigned/parking agent saddle and
  258. the FULL lifecycle ladder — with run control parity
  259. (plan 14 B1): Retry supervision for a failed goal,
  260. Requeue-to-resume for a run stale/parked on a dead
  261. saddle, Cancel. NO notify-me toggle — goals notify
  262. unconditionally by design. Yeehaw stays on task
  263. rows only. The strip above carries the one-glance
  264. verdict; this card keeps the detail. -->
  265. <section class="card goal-head goal-section" id="goal-sec-status">
  266. <div class="card-head">
  267. <h3>Status</h3>
  268. </div>
  269. <p><span stm-attribute.class="'badge badge-' + goal.status" stm-text="goal.display">status</span>
  270. · goal branch <code stm-text="goal.branch_name">branch</code>
  271. <span class="text-muted">from</span> <code stm-text="goal.base_branch">base</code>
  272. <a stm-if="goal.compare_url.length > 0" stm-attribute.href="goal.compare_url"
  273. target="_blank" rel="noopener">· compare
  274. changes</a>
  275. · priority <strong stm-text="goal.priority">3</strong>
  276. <span stm-if="goal.agent_saddle.length > 0"> · agent saddle
  277. <strong stm-text="goal.agent_saddle">saddle</strong></span></p>
  278. <pstm-fragment name="goal-branches"
  279. note="&quot;(the daemon's /status report)&quot;"/>
  280. <p class="text-muted">Project:
  281. <a stm-attribute.href="'/projects/' + goal.project_id" stm-text="goal.project_name">project</a>
  282. · Created <span stm-text="goal.created_display">when</span>
  283. <span stm-if="goal.started_display.length > 0"> · Started
  284. <span stm-text="goal.started_display">when</span></span>
  285. <span stm-if="goal.completed_display.length > 0"> · Finished
  286. <span stm-text="goal.completed_display">when</span></span></p>
  287. <p>
  288. <button type="button" class="btn-primary" stm-if="goal.start != null"
  289. stm-action="goal.start">Start goal</button>
  290. <button type="button" stm-if="goal.pause != null"
  291. stm-action="goal.pause">Pause</button>
  292. <button type="button" stm-if="goal.resume != null"
  293. stm-action="goal.resume">Resume</button>
  294. <button type="button" class="btn-primary" stm-if="goal.retry_run != null"
  295. stm-action="goal.retry_run">Retry supervision</button>
  296. <button type="button" stm-if="goal.requeue_run != null"
  297. stm-action="goal.requeue_run"
  298. stm-confirm="Requeue the agent's run? The daemon restores its workspace context on the next dispatch.">Requeue to resume</button>
  299. <!-- Goal 4 task 1: Force wake — the parked-agent
  300. recovery for the no-pending-wake stall. -->
  301. <button type="button" stm-if="goal.force_wake != null"
  302. stm-action="goal.force_wake"
  303. stm-confirm="Force-woke this goal's parked agent? It resumes immediately on its saddle - one wake per press.">Force wake</button>
  304. <button type="button" class="danger" stm-if="goal.cancel != null"
  305. stm-action="goal.cancel"
  306. stm-confirm="Cancel this goal? Its tasks are cancelled with it.">Cancel goal</button>
  307. </p>
  308. <p class="text-muted" stm-if="goal.status == 'draft'">Starting locks the brief and
  309. hands the goal to its agent (an orchestrate-mode run task, priority 3).</p>
  310. <p class="text-muted" stm-if="goal.status == 'paused'">Paused — supervision frozen;
  311. task events queue and coalesce into the resume.</p>
  312. <!-- Plan 15 C4: the ONE muted activity line (the
  313. Current-activity card is gone) — what the run is
  314. doing right now, folded into the status head. -->
  315. <p class="text-muted" stm-if="goal.current_activity.length > 0"
  316. stm-text="goal.current_activity">activity</p>
  317. <p class="text-muted" stm-if="goal.saddle_health.length > 0"
  318. stm-text="goal.saddle_health">health</p>
  319. <!-- S5: the goal's aggregate LLM usage across its tasks
  320. (the run plus the workers) — empty renders nothing. -->
  321. <p class="text-muted" stm-if="goal.usage_line.length > 0"
  322. stm-text="goal.usage_line">LLM: 1,234 calls · 45.2M in / 1.1M out tok · 3h 12m</p>
  323. </section>
  324. <!-- The agent's live progress feed (task-page pattern):
  325. the newest line leads, its history behind the
  326. expander. Plan 15 C4: a CARD again (the goalui
  327. restyle regression — every section rides the same
  328. card rhythm). -->
  329. <section class="card">
  330. <h3>Agent progress</h3>
  331. <pstm-fragment name="progress-feed" entries="goal.progress"/>
  332. <p stm-if="goal.progress.length == 0" class="text-muted">No progress reports yet — the goal
  333. agent reports via <code>saddle progress-update</code>.</p>
  334. </section>
  335. <!-- ATTENTION (plan 14 B5 order; plan 15 C4): the goal
  336. agent's OPEN blocks lead — questions and RFCs with
  337. full markdown bodies and inline answer forms — and
  338. the historic answered ones fold behind the
  339. answered-blocks expander (the task page's pattern);
  340. the completion review follows when one awaits. -->
  341. <section class="card goal-section"
  342. stm-if="goal.open_blocks.length > 0 || goal.answered_blocks.length > 0"
  343. id="goal-sec-blocks">
  344. <h3>Goal agent blocks</h3>
  345. <div stm-for-block-in="goal.open_blocks" class="goal-block">
  346. <p><span stm-attribute.class="'badge badge-block-' + block.block_type"
  347. stm-text="block.block_type">kind</span>
  348. <strong stm-text="block.question">question</strong>
  349. <span class="text-muted" stm-text="block.created_display">when</span></p>
  350. <!-- The pending completion review renders in the rich
  351. review form (highlight-remarks queue shared with
  352. the plan review; push chips + compare above the
  353. report — chips are advisory, the push rule is
  354. enforced daemon-side at the agent's completion
  355. attempt). -->
  356. <div stm-if="block.is_completion_review"
  357. class="plan-review" data-plan-review
  358. stm-attribute.data-block-id="block.id">
  359. <pstm-fragment name="goal-branches"/>
  360. <pstm-fragment name="goal-compare"/>
  361. <div class="md rfc-body goal-body" data-plan-body
  362. stm-markdown="block.body">report</div>
  363. <div class="actions">
  364. <form stm-action="block.answer_action" class="cluster">
  365. <input type="hidden" name="verdict" value="accept">
  366. <button type="submit" class="btn-primary" data-plan-accept>Accept goal</button>
  367. </form>
  368. <button type="button" data-plan-toggle>Reject with feedback</button>
  369. </div>
  370. <div data-plan-feedback hidden>
  371. <p class="text-muted">Highlight report text to attach a remark to it — the queue
  372. rides the rejection numbered, then clears. Accepting ignores the queue.</p>
  373. <ul class="plan-comments" data-plan-remarks></ul>
  374. <textarea name="feedback" rows="2"
  375. placeholder="Additional feedback (optional)"></textarea>
  376. <button type="button" class="btn-primary" data-plan-submit>Submit feedback</button>
  377. </div>
  378. </div>
  379. <div stm-if="!block.is_completion_review">
  380. <div stm-if="block.show_body && block.body.length > 0"
  381. class="md rfc-body goal-body" stm-markdown="block.body">body</div>
  382. <pstm-fragment name="block-answer"/>
  383. <pstm-fragment name="block-reply"/>
  384. </div>
  385. </div>
  386. <details class="history-expander" stm-if="goal.answered_blocks.length > 0">
  387. <summary>Answered blocks (<span stm-text="goal.answered_blocks.length">0</span>)</summary>
  388. <div stm-for-block-in="goal.answered_blocks" class="goal-block">
  389. <p><span stm-attribute.class="'badge badge-block-' + block.block_type"
  390. stm-text="block.block_type">kind</span>
  391. <strong stm-text="block.question">question</strong>
  392. <span class="text-muted" stm-text="block.created_display">when</span></p>
  393. <div stm-if="block.show_body && block.body.length > 0"
  394. class="md rfc-body goal-body" stm-markdown="block.body">body</div>
  395. <blockquote stm-if="block.answered" class="term-comment-quote">
  396. <span stm-text="block.answered_by">who</span>:
  397. <span stm-text="block.answer">answer</span></blockquote>
  398. </div>
  399. </details>
  400. </section>
  401. <!-- Completion review card: the TERMINAL summary — shown
  402. once the goal is complete/failed, with the report and
  403. the compare link. While PENDING, the review lives in
  404. the attention blocks above (the rich review form). -->
  405. <section class="card goal-section" stm-if="goal.terminal && goal.completion_report.length > 0">
  406. <h3>Completion review</h3>
  407. <pstm-fragment name="goal-branches"/>
  408. <pstm-fragment name="goal-compare"/>
  409. <div class="md rfc-body goal-body" stm-markdown="goal.completion_report">report</div>
  410. </section>
  411. <!-- The plan (plan 15 C4): BETWEEN attention and tasks.
  412. While a plan review is open the pending submission
  413. renders EXPANDED with the remarks queue (plan 14 B2);
  414. otherwise the approved plan and the revision history
  415. (approved + rejected) sit behind a collapsed
  416. expander — the goal page leads with what needs a
  417. human, not with settled history. -->
  418. <section class="card goal-section" id="goal-sec-plan">
  419. <h3>Plan</h3>
  420. <div stm-if="goal.plan_pending_block != null && goal.plan_pending_block != false"
  421. class="plan-review" data-plan-review
  422. stm-attribute.data-block-id="goal.plan_pending_block.id">
  423. <h4>Plan submitted for review</h4>
  424. <div class="md rfc-body goal-body" data-plan-body
  425. stm-markdown="goal.plan_pending_block.body">revision</div>
  426. <div class="actions">
  427. <form stm-action="goal.plan_pending_block.answer_action" class="cluster">
  428. <input type="hidden" name="verdict" value="accept">
  429. <button type="submit" class="btn-primary" data-plan-accept>Approve plan</button>
  430. </form>
  431. <button type="button" data-plan-toggle>Reject with feedback</button>
  432. </div>
  433. <div data-plan-feedback hidden>
  434. <p class="text-muted">Highlight plan text to attach a remark to it — the queue
  435. rides the rejection numbered, then clears. Approving ignores the queue.</p>
  436. <ul class="plan-comments" data-plan-remarks></ul>
  437. <textarea name="feedback" rows="2"
  438. placeholder="Additional feedback (optional)"></textarea>
  439. <button type="button" class="btn-primary" data-plan-submit>Submit feedback</button>
  440. </div>
  441. </div>
  442. <details class="history-expander"
  443. stm-if="goal.plan_pending_block == null || goal.plan_pending_block == false">
  444. <summary>Approved plan &amp; revisions (<span
  445. stm-text="goal.plan_revisions.length">0</span>)</summary>
  446. <div stm-if="goal.plan.length > 0" class="md rfc-body goal-body" data-plan-body
  447. stm-markdown="goal.plan">plan</div>
  448. <p stm-if="goal.plan.length == 0" class="text-muted">No approved plan yet.</p>
  449. <div stm-for-revision-in="goal.plan_revisions" class="plan-revision">
  450. <p><span stm-attribute.class="'badge ' + (revision.approved ? 'badge-done' : (revision.answered ? 'badge-failed' : 'badge-plan'))"
  451. stm-text="revision.approved ? 'approved' : (revision.answered ? 'rejected' : 'pending')">verdict</span>
  452. <span class="text-muted">Revision #<span stm-text="revision.id">n</span> &mdash; <span stm-text="revision.created_display">when</span></span></p>
  453. <details>
  454. <summary>Submitted markdown</summary>
  455. <div class="md rfc-body" stm-markdown="revision.body">body</div>
  456. </details>
  457. <blockquote stm-if="revision.answered" class="term-comment-quote">
  458. <span stm-text="revision.answered_by">who</span>:
  459. <span stm-text="revision.answer">answer</span></blockquote>
  460. </div>
  461. </details>
  462. </section>
  463. <!-- Comments with selection-quoting (markdown bodies).
  464. Plan 15 C2: the thread IS the goal-run task's own
  465. task_comments — the agent's pushes and the human's
  466. composer land on the same rows; harness-authored
  467. bookkeeping renders as distinct muted system rows,
  468. never agent comment rows. The composer opens with
  469. the run (a draft goal has no thread to inject into). -->
  470. <section class="card goal-section" id="goal-sec-comments">
  471. <h3>Comments</h3>
  472. <!-- Plan 15 C4: timeless-comment footnote styling —
  473. the BODY leads; the author and time read as a
  474. muted footnote (status belongs in progress
  475. updates). System rows keep their labelled style. -->
  476. <div stm-for-comment-in="goal.comments"
  477. stm-attribute.class="'comment' + (comment.from_agent ? ' agent' : '') + (comment.is_system ? ' system' : '')">
  478. <div class="md" stm-markdown="comment.body">body</div>
  479. <blockquote stm-if="comment.quote.length > 0" stm-text="comment.quote">quote</blockquote>
  480. <p class="comment-meta">
  481. <strong stm-if="!comment.is_system" stm-text="comment.author">author</strong>
  482. <span stm-if="comment.is_system" class="system-label">system</span>
  483. <span class="text-muted" stm-text="comment.created_display">when</span>
  484. </p>
  485. </div>
  486. <p stm-if="goal.comments.length == 0" class="text-muted">No comments yet.</p>
  487. <p stm-if="goal.run_task_id == 0" class="text-muted">The goal agent has not started
  488. yet — comments open with its run.</p>
  489. <!-- Goal 8 task 4: the composer stays OPEN on terminal
  490. goals — a comment there re-opens the goal and
  491. re-offers its agent's run with the comment riding
  492. the resume (cancelled goals stay closed: their
  493. composer keeps the run gate alone). -->
  494. <form stm-if="goal.run_task_id > 0" stm-action="goal.comment">
  495. <div class="field"><label for="goal-comment-body">Add comment</label>
  496. <textarea id="goal-comment-body" name="body" rows="3"
  497. placeholder="A timeless note for a future reader — status belongs in progress updates (markdown)"></textarea></div>
  498. <p stm-if="goal.terminal && goal.status != 'cancelled'" class="text-muted">
  499. This goal is terminal — commenting re-opens it: the agent resumes
  500. with your comment and submits a fresh completion report.</p>
  501. <button type="submit" class="btn-primary">Comment</button>
  502. </form>
  503. <dialog id="quote-comment-dialog">
  504. <h3>Comment on selected text</h3>
  505. <blockquote id="quote-text" class="term-comment-quote"></blockquote>
  506. <form stm-action="goal.comment">
  507. <input type="hidden" name="quote">
  508. <input type="hidden" name="return_to">
  509. <textarea name="body" rows="4" placeholder="Your comment…"
  510. style="width:100%; margin:0.5em 0;"></textarea>
  511. <button type="submit" class="btn-primary">Send comment</button>
  512. <button type="button"
  513. onclick="document.getElementById('quote-comment-dialog').close()">Cancel</button>
  514. </form>
  515. </dialog>
  516. </section>
  517. </div><!-- /data-goal-act -->
  518. <div class="stack" data-goal-consult>
  519. <!-- Task status strip + the goal's task list (plan 14 B5:
  520. tasks above the brief; capability badges per row —
  521. no editing here; yeehaw on rows only). -->
  522. <section class="card goal-section" id="goal-sec-tasks">
  523. <h3>Tasks</h3>
  524. <p class="goal-strip">
  525. <button type="button" stm-attribute.class="window.goalFilterClass('draft')"
  526. onclick="window.goalSetFilter('draft')"
  527. stm-text="'draft ' + goal.draft_tasks">draft</button>
  528. <button type="button" stm-attribute.class="window.goalFilterClass('queued')"
  529. onclick="window.goalSetFilter('queued')"
  530. stm-text="'queued ' + goal.queued_tasks">queued</button>
  531. <button type="button" stm-attribute.class="window.goalFilterClass('working')"
  532. onclick="window.goalSetFilter('working')"
  533. stm-text="'running ' + goal.running_tasks">running</button>
  534. <button type="button" stm-attribute.class="window.goalFilterClass('done')"
  535. onclick="window.goalSetFilter('done')"
  536. stm-text="'done ' + goal.done_tasks">done</button>
  537. <button type="button" stm-attribute.class="window.goalFilterClass('failed')"
  538. onclick="window.goalSetFilter('failed')"
  539. stm-text="'failed ' + goal.failed_tasks">failed</button>
  540. <span class="text-muted">— click a status to filter</span>
  541. </p>
  542. <table>
  543. <thead><tr><th>#</th><th>Title</th><th>Status</th><th>Mode</th><th>Requires</th><th>Created by</th></tr></thead>
  544. <tbody>
  545. <tr stm-for-goal_task-in="goal.goal_tasks"
  546. stm-if="window.goalTaskVisible(goal_task)">
  547. <td stm-text="goal_task.id">id</td>
  548. <td><a stm-attribute.href="'/tasks/' + goal_task.id"
  549. stm-text="goal_task.title">title</a></td>
  550. <td><span stm-attribute.class="'badge badge-' + goal_task.status"
  551. stm-text="goal_task.display">status</span>
  552. </td>
  553. <td><span stm-attribute.class="'badge badge-mode-' + goal_task.mode"
  554. stm-text="goal_task.mode">mode</span></td>
  555. <td><span stm-for-capability-in="goal_task.capabilities">
  556. <span class="badge badge-capability"
  557. stm-text="capability">tag</span> </span></td>
  558. <td class="text-muted" stm-text="goal_task.creator">who</td>
  559. </tr>
  560. <tr stm-if="goal.goal_tasks.length == 0">
  561. <td colspan="6" class="text-muted">No tasks yet — the goal agent fans
  562. them out once the plan is approved.</td></tr>
  563. </tbody>
  564. </table>
  565. </section>
  566. <!-- The locked brief. Task 12: DRAFT goals swap the
  567. rendered markdown for an in-place editor
  568. (initLongFormEditors in main.html) carrying title,
  569. brief and priority — a draft goal has no other edit
  570. surface (this also unblocks the draft priority, which
  571. nothing else could change). Starting locks the brief:
  572. the editor's stm-if wrapper disappears with the
  573. update action and the card stays the plain read view. -->
  574. <section class="card goal-section" id="goal-sec-brief" data-long-form data-field="goal"
  575. data-lf-open="0">
  576. <h3>Initial brief
  577. <button type="button" class="btn-ghost" stm-if="goal.update != null"
  578. data-lf-toggle>Edit</button>
  579. <span class="text-muted" stm-if="goal.started_display.length > 0">(locked)</span></h3>
  580. <div data-lf-view>
  581. <div class="md rfc-body goal-body" data-brief-body stm-markdown="goal.brief">brief</div>
  582. </div>
  583. <div stm-if="goal.update != null">
  584. <form data-lf-edit hidden stm-action="goal.update">
  585. <div class="field"><label>Title</label>
  586. <input type="text" name="title" data-lf-src="goal.title"></div>
  587. <div class="field"><label>Brief (markdown)</label>
  588. <textarea name="brief" rows="8"
  589. data-lf-src="goal.brief">brief</textarea></div>
  590. <div class="field"><label>Priority (1–9)</label>
  591. <input type="number" name="priority" min="1" max="9"
  592. data-lf-src="goal.priority"></div>
  593. <button type="submit">Save</button>
  594. <button type="button" data-lf-toggle>Cancel</button>
  595. </form>
  596. </div>
  597. </section>
  598. <!-- Involved projects. -->
  599. <section class="card">
  600. <h3>Involved projects</h3>
  601. <p stm-if="goal.links.length > 0"><span stm-for-link-in="goal.links">
  602. <span stm-attribute.class="'badge badge-' + link.relationship"
  603. stm-text="link.name + ' (' + link.relationship + ')'">link</span>
  604. <button type="button" class="btn-ghost" stm-action="link.remove"
  605. stm-confirm="Remove this link?">&times;</button>
  606. <input type="hidden" name="link_id" stm-attribute.value="link.id">
  607. </span></p>
  608. <p stm-if="goal.links.length == 0" class="text-muted">Only the primary project.</p>
  609. <details stm-if="!goal.terminal">
  610. <summary>Link a project</summary>
  611. <form class="cluster" stm-action="goal.add_link">
  612. <select name="linked_project_id" required>
  613. <option stm-for-project-in="goal.project_options" stm-attribute.value="project.id"
  614. stm-text="project.name">project</option>
  615. </select>
  616. <select name="relationship">
  617. <option value="co-developed">co-developed</option>
  618. <option value="reference">reference</option>
  619. </select>
  620. <button type="submit">Link</button>
  621. </form>
  622. <form class="cluster" stm-action="goal.apply_stack"
  623. stm-if="goal.stack_options.length > 0" style="margin-top: 0.5em;">
  624. <label for="goal-stack">Apply stack</label>
  625. <select id="goal-stack" name="stack_id" required>
  626. <option stm-for-stack-in="goal.stack_options" stm-attribute.value="stack.id"
  627. stm-text="stack.name + ' (' + stack.member_count + ')'">stack</option>
  628. </select>
  629. <button type="submit">Apply</button>
  630. </form>
  631. </details>
  632. </section>
  633. <!-- Plan 14 B5: the goal's effective rules — they govern
  634. the agent and every worker it fans out. -->
  635. <section class="card">
  636. <h3>Rules</h3>
  637. <p class="text-muted">The effective set dispatched with this goal's work — task rules,
  638. the primary project's, then co-developed projects' in link order.</p>
  639. <div stm-for-rule-in="goal.rules" class="rule-card">
  640. <h4 stm-text="rule.name">name</h4>
  641. <div class="md" stm-markdown="rule.body">body</div>
  642. </div>
  643. <p stm-if="goal.rules.length == 0" class="text-muted">No rules apply to this goal.</p>
  644. </section>
  645. <!-- The supervision narrative (plan 14 B6): state events
  646. at full weight, comment events as .footnote — the
  647. feed reads as events-with-occasional-footnotes. -->
  648. <section class="card goal-section" id="goal-sec-narrative">
  649. <h3>Supervision narrative</h3>
  650. <p stm-if="goal.events.length == 0" class="text-muted">Nothing yet — start the goal.</p>
  651. <div stm-for-event-in="goal.events"
  652. stm-attribute.class="'goal-event' + (event.kind == 'comment' ? ' footnote' : '')">
  653. <span class="text-muted" stm-text="event.at_display">when</span>
  654. <span stm-attribute.class="'badge badge-goal-' + event.kind"
  655. stm-text="event.kind.replace('-', ' ')">kind</span>
  656. <!-- Comment events render as footnotes (plan 13 B4
  657. + 14 B6): the whole row is muted and smaller,
  658. the body-first text leading. -->
  659. <div class="md goal-event-text" stm-markdown="event.text">text</div>
  660. <a stm-if="event.task_id > 0"
  661. stm-attribute.href="'/tasks/' + event.task_id">task</a>
  662. </div>
  663. </section>
  664. <!-- Goal agent runs: every round with its host saddle; the
  665. event log links open in a new tab. -->
  666. <section class="card" stm-if="goal.runs.length > 0">
  667. <h3>Goal agent runs</h3>
  668. <p><a stm-attribute.href="'/tasks/' + goal.run_task_id + '/log'"
  669. target="_blank" rel="noopener">Event log</a>
  670. <span class="text-muted">— run task
  671. #<span stm-text="goal.run_task_id">id</span></span></p>
  672. <table>
  673. <thead><tr><th>Run</th><th>Saddle</th><th>Started</th><th>Ended</th><th>Outcome</th></tr></thead>
  674. <tbody>
  675. <tr stm-for-run-in="goal.runs">
  676. <td><a stm-attribute.href="run.terminal_url" target="_blank" rel="noopener"
  677. stm-text="'session ' + run.id">run</a></td>
  678. <td class="text-muted" stm-text="run.saddle_name">saddle</td>
  679. <td class="text-muted" stm-text="run.started_display">when</td>
  680. <td class="text-muted" stm-text="run.ended_display">when</td>
  681. <td><span stm-if="run.open" class="badge badge-working">open</span>
  682. <span stm-if="!run.open" stm-text="run.outcome">outcome</span></td>
  683. </tr>
  684. </tbody>
  685. </table>
  686. </section>
  687. </div><!-- /data-goal-consult -->
  688. </div><!-- /goal-columns -->
  689. </div>
  690. </div>
  691. </body>
  692. </html>