@cat-factory/app 0.185.0 → 0.186.0

package/app/components/initiative/InitiativeTrackerWindow.vue

@@ -12,7 +12,7 @@
 // step's park routes (its archetype declares this result view), so the approve /
 // request-changes rail has to live here or the gate has no resolving surface at all —
 // which is exactly how an approved-only-over-REST plan gate shipped.
-import { computed, reactive, ref, watch } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import type { InitiativeFollowUp, InitiativeItem } from '~/types/domain'
 import { useInitiativePlanning } from '~/composables/useInitiativePlanning'
 import {
@@ -26,10 +26,10 @@ import {
 } from '~/utils/initiative'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
+import InitiativePlanReview from '~/components/initiative/InitiativePlanReview.vue'
 
 const board = useBoardStore()
 const initiatives = useInitiativesStore()
-const execution = useExecutionStore()
 const access = useWorkspaceAccess()
 const { t } = useI18n()
 const toast = useToast()
@@ -106,52 +106,6 @@ async function checkpointControl(action: 'resume' | 'cancel') {
 // human parked on the gate actually uses. So the rail appears on every route into the window.
 const { planApproval } = useInitiativePlanning(() => blockId.value ?? '')
 
-/** Draft feedback for "request changes" (the planner re-runs with it), and the rail's in-flight
- *  state. Reset when a different initiative opens so a draft can't follow the window. */
-const planFeedback = ref('')
-const requestingChanges = ref(false)
-const resolvingPlan = ref(false)
-watch(blockId, () => {
-  planFeedback.value = ''
-  requestingChanges.value = false
-})
-
-const canRequestChanges = computed(() => planFeedback.value.trim().length > 0)
-
-/**
- * Accept the drafted plan: the run advances to the committer, which persists the initiative and
- * arms the execution loop. The window deliberately stays OPEN — the rail disappears with the
- * approval (live), and the tracker is where the plan then starts executing.
- */
-async function approvePlan() {
-  const parked = planApproval.value
-  if (!parked || resolvingPlan.value) return
-  resolvingPlan.value = true
-  try {
-    await execution.approveStep(parked.instanceId, parked.approval.id)
-  } finally {
-    resolvingPlan.value = false
-  }
-}
-
-/** Send the plan back to the planner with what to change; it re-plans and parks again. */
-async function submitPlanChanges() {
-  const parked = planApproval.value
-  if (!parked || resolvingPlan.value || !canRequestChanges.value) return
-  resolvingPlan.value = true
-  try {
-    const ok = await execution.requestStepChanges(parked.instanceId, parked.approval.id, {
-      feedback: planFeedback.value.trim(),
-    })
-    if (ok) {
-      planFeedback.value = ''
-      requestingChanges.value = false
-    }
-  } finally {
-    resolvingPlan.value = false
-  }
-}
-
 const policyRules = computed(() => initiative.value?.policy?.rules ?? [])
 function ruleAxes(rule: { minComplexity?: number; minRisk?: number; minImpact?: number }): string {
   const axes = [
@@ -294,85 +248,17 @@ async function savePolicy() {
         </div>
 
         <template v-else>
-          <!-- The planner's human gate: the plan below is drafted but NOT yet committed. This
-               is the only surface that can resolve it (the generic approval panel is never
-               reached — the planner's archetype routes its park to this window), so approve /
-               request changes live here, beside the plan they judge. -->
-          <section
+          <!-- The planner's human gate. This window is where the park ROUTES (the planner's
+               archetype declares this result view), so it is the only surface that can resolve
+               it — and the plan it judges is rendered as a navigable document with per-block
+               commenting, the same tools the step reader gives the architect's prose. -->
+          <InitiativePlanReview
             v-if="planApproval"
-            class="mb-4 rounded-lg border border-amber-500/40 bg-amber-500/10 p-3.5"
-            data-testid="initiative-plan-review"
-          >
-            <div class="flex items-start gap-2.5">
-              <UIcon
-                name="i-lucide-clipboard-check"
-                class="mt-0.5 h-4 w-4 shrink-0 text-amber-300"
-              />
-              <div class="min-w-0 flex-1">
-                <h3 class="text-[13px] font-semibold text-amber-200">
-                  {{ t('initiative.planReview.title') }}
-                </h3>
-                <p class="mt-0.5 text-[12px] leading-relaxed text-amber-100/80">
-                  {{ t('initiative.planReview.body') }}
-                </p>
-                <div v-if="!requestingChanges" class="mt-2.5 flex flex-wrap gap-2">
-                  <button
-                    class="rounded bg-indigo-600 px-2.5 py-1 text-[11px] font-medium text-white hover:bg-indigo-500 disabled:opacity-50"
-                    :disabled="resolvingPlan || !access.canExecuteRuns.value"
-                    :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
-                    data-testid="initiative-plan-approve"
-                    @click="approvePlan"
-                  >
-                    {{ t('initiative.planReview.approve') }}
-                  </button>
-                  <button
-                    class="rounded border border-amber-400/50 px-2.5 py-1 text-[11px] font-medium text-amber-200 hover:bg-amber-500/10 disabled:opacity-50"
-                    :disabled="resolvingPlan || !access.canExecuteRuns.value"
-                    :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
-                    data-testid="initiative-plan-request-changes"
-                    @click="requestingChanges = true"
-                  >
-                    {{ t('initiative.planReview.requestChanges') }}
-                  </button>
-                </div>
-                <!-- Request-changes composer: the feedback is what the planner re-plans FROM,
-                     so it is required — an empty send would re-run the planner with nothing
-                     to act on and park again on the same plan. -->
-                <div v-else class="mt-2.5">
-                  <UTextarea
-                    v-model="planFeedback"
-                    :rows="3"
-                    autoresize
-                    size="sm"
-                    class="w-full"
-                    data-testid="initiative-plan-feedback"
-                    :placeholder="t('initiative.planReview.feedbackPlaceholder')"
-                  />
-                  <div class="mt-2 flex flex-wrap gap-2">
-                    <button
-                      class="rounded bg-amber-500 px-2.5 py-1 text-[11px] font-medium text-slate-950 hover:bg-amber-400 disabled:opacity-50"
-                      :disabled="
-                        resolvingPlan || !canRequestChanges || !access.canExecuteRuns.value
-                      "
-                      :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
-                      data-testid="initiative-plan-send-back"
-                      @click="submitPlanChanges"
-                    >
-                      {{ t('initiative.planReview.sendBack') }}
-                    </button>
-                    <button
-                      class="rounded border border-slate-600 px-2.5 py-1 text-[11px] font-medium text-slate-300 hover:bg-slate-800 disabled:opacity-50"
-                      :disabled="resolvingPlan"
-                      data-testid="initiative-plan-cancel-changes"
-                      @click="requestingChanges = false"
-                    >
-                      {{ t('common.cancel') }}
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </section>
+            :approval="planApproval.approval"
+            :instance-id="planApproval.instanceId"
+            :can-execute="access.canExecuteRuns.value"
+            :output-is-rendered="planApproval.outputIsRendered"
+          />
 
           <!-- Paused at a phase checkpoint (D2): a completed checkpoint phase is awaiting
                    review before the next phase spawns. Read the phase's artifacts/PRs below,

package/app/components/panels/AgentStepDetail.vue

@@ -148,6 +148,14 @@ const {
 
 const approvalPending = computed(() => step.value?.approval?.status === 'pending')
 const approvalId = computed(() => step.value?.approval?.id ?? null)
+// Whether "approve with corrections" applies. A step whose output is a deterministic
+// RENDERING of an artifact it already produced (the initiative plan, the spec doc, the
+// blueprint tree — `step.outputIsRendered`, set by the engine's `reviewableArtifactOutput`
+// seam) has no editable proposal: the artifact was ingested into domain state before the gate
+// was raised, so an edit typed over the rendering would never reach it. The backend refuses
+// such an edit; hiding the affordance is what stops a reviewer typing corrections into a
+// dead end. Their route is "request changes", which re-runs the producer with the correction.
+const proposalEditable = computed(() => step.value?.outputIsRendered !== true)
 // A companion step parked at its automatic-rework cap: instead of the generic
 // approve/request-changes/reject rail, it shows the shared iteration-cap prompt
 // (one more round / proceed / stop & reset), resolved through its own endpoint.
@@ -261,6 +269,7 @@ async function copyOutput() {
         <!-- ToC sidebar (only meaningful when there are prose headings) -->
         <aside
           v-if="outline.hasToc"
+          data-testid="step-detail-toc"
           class="hidden w-72 shrink-0 flex-col border-e border-slate-800 bg-slate-900/60 md:flex"
         >
           <div class="border-b border-slate-800 px-4 py-3">
@@ -646,6 +655,7 @@ async function copyOutput() {
               <!-- composer for the block the human just clicked -->
               <div
                 v-if="draftTarget"
+                data-testid="step-review-composer"
                 class="rounded-lg border border-indigo-500/40 bg-indigo-500/5 p-3"
               >
                 <div class="mb-1 text-[10px] uppercase tracking-wide text-indigo-300">
@@ -656,6 +666,7 @@ async function copyOutput() {
                   >{{ draftTarget.quotedSource }}</pre>
                 <UTextarea
                   v-model="draftBody"
+                  data-testid="step-review-comment-body"
                   :rows="3"
                   autoresize
                   size="sm"
@@ -669,6 +680,7 @@ async function copyOutput() {
                   <UButton
                     color="primary"
                     size="xs"
+                    data-testid="step-review-comment-add"
                     :disabled="!draftBody.trim()"
                     @click="addDraftComment"
                   >
@@ -681,6 +693,7 @@ async function copyOutput() {
               <div
                 v-for="(c, idx) in reviewComments"
                 :key="idx"
+                data-testid="step-review-comment"
                 class="rounded-lg border border-slate-800 bg-slate-900/50 p-3"
               >
                 <div class="mb-1 flex items-start justify-between gap-2">
@@ -709,6 +722,7 @@ async function copyOutput() {
                 </label>
                 <UTextarea
                   v-model="feedback"
+                  data-testid="step-review-feedback"
                   :rows="3"
                   autoresize
                   size="sm"
@@ -763,6 +777,7 @@ async function copyOutput() {
               {{ t('panels.stepDetail.approveAndProceed') }}
             </UButton>
             <UButton
+              v-if="proposalEditable"
               color="primary"
               variant="soft"
               size="sm"
@@ -773,6 +788,9 @@ async function copyOutput() {
             >
               {{ t('panels.stepDetail.approveWithCorrections') }}
             </UButton>
+            <p v-else class="text-[10px] text-slate-500" data-testid="step-rendered-output-note">
+              {{ t('panels.stepDetail.renderedOutputNote') }}
+            </p>
 
             <!-- destructive: a two-step inline confirm instead of a native dialog -->
             <div
@@ -812,6 +830,7 @@ async function copyOutput() {
                 size="sm"
                 icon="i-lucide-rotate-ccw"
                 class="flex-1"
+                data-testid="step-request-changes"
                 :disabled="!canRequestChanges"
                 :loading="submitting"
                 @click="requestChanges"
@@ -849,126 +868,4 @@ async function copyOutput() {
 .reader-fade-leave-to {
   opacity: 0;
 }
-
-/* Approval mode: each source-mapped block becomes a comment target — a hover
-   highlight + a "+" gutter affordance, GitHub-review style. */
-.reader-prose.review-mode :deep([data-src-start]) {
-  position: relative;
-  cursor: pointer;
-  border-radius: 0.375rem;
-  transition: background 0.12s ease;
-}
-.reader-prose.review-mode :deep([data-src-start]:hover) {
-  background: rgb(99 102 241 / 0.08);
-  box-shadow: inset 2px 0 0 rgb(99 102 241 / 0.5);
-}
-.reader-prose.review-mode :deep([data-src-start])::before {
-  content: '+';
-  position: absolute;
-  left: -1.4rem;
-  top: 0.1rem;
-  display: none;
-  height: 1.1rem;
-  width: 1.1rem;
-  align-items: center;
-  justify-content: center;
-  border-radius: 0.25rem;
-  background: rgb(99 102 241);
-  color: white;
-  font-size: 0.8rem;
-  line-height: 1;
-}
-.reader-prose.review-mode :deep([data-src-start]:hover)::before {
-  display: flex;
-}
-/* Persistent markers: amber for a block that already has a comment, indigo for
-   the block whose composer is currently open. */
-.reader-prose :deep(.cf-commented) {
-  background: rgb(234 179 8 / 0.1);
-  box-shadow: inset 2px 0 0 rgb(234 179 8 / 0.6);
-}
-.reader-prose :deep(.cf-selected) {
-  background: rgb(99 102 241 / 0.12);
-  box-shadow: inset 2px 0 0 rgb(99 102 241 / 0.8);
-}
-
-/* Styling for the markdown HTML injected via v-html (out of scoped reach without
-   :deep), kept close to the inspector's existing prose styling. */
-.reader-prose :deep(p) {
-  margin: 0.5rem 0;
-}
-.reader-prose :deep(ul),
-.reader-prose :deep(ol) {
-  margin: 0.5rem 0;
-  padding-left: 1.25rem;
-}
-.reader-prose :deep(ul) {
-  list-style: disc;
-}
-.reader-prose :deep(ol) {
-  list-style: decimal;
-}
-.reader-prose :deep(li) {
-  margin: 0.2rem 0;
-}
-.reader-prose :deep(strong) {
-  font-weight: 600;
-  color: rgb(226 232 240);
-}
-.reader-prose :deep(em) {
-  font-style: italic;
-}
-.reader-prose :deep(code) {
-  border-radius: 0.25rem;
-  background: rgb(30 41 59 / 0.8);
-  padding: 0.1rem 0.3rem;
-  font-family: ui-monospace, monospace;
-  font-size: 0.85em;
-  color: rgb(199 210 254);
-}
-.reader-prose :deep(pre) {
-  margin: 0.6rem 0;
-  overflow: auto;
-  border-radius: 0.5rem;
-  background: rgb(2 6 23 / 0.6);
-  padding: 0.75rem 0.9rem;
-}
-.reader-prose :deep(pre code) {
-  background: transparent;
-  padding: 0;
-  color: rgb(203 213 225);
-}
-.reader-prose :deep(blockquote) {
-  margin: 0.6rem 0;
-  border-left: 3px solid rgb(99 102 241 / 0.5);
-  padding-left: 0.75rem;
-  color: rgb(148 163 184);
-}
-.reader-prose :deep(table) {
-  margin: 0.6rem 0;
-  border-collapse: collapse;
-  font-size: 0.95em;
-}
-.reader-prose :deep(th),
-.reader-prose :deep(td) {
-  border: 1px solid rgb(51 65 85);
-  padding: 0.3rem 0.6rem;
-}
-.reader-prose :deep(th) {
-  background: rgb(30 41 59 / 0.6);
-  font-weight: 600;
-}
-.reader-prose :deep(hr) {
-  margin: 1rem 0;
-  border: none;
-  border-top: 1px solid rgb(51 65 85);
-}
-.reader-prose :deep(h1),
-.reader-prose :deep(h2),
-.reader-prose :deep(h3),
-.reader-prose :deep(h4) {
-  margin: 0.6rem 0 0.3rem;
-  font-weight: 600;
-  color: rgb(226 232 240);
-}
 </style>

package/app/components/panels/inspector/TaskReviewTarget.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+// The pull request a `review` task is reviewing — its SUBJECT, not its output. Distinct from the
+// Execution panel's "Pull request", which links the PR a run PRODUCED: a review task produces no
+// PR at all, so without this the one thing identifying the task was buried in the folded
+// description text with nothing to click.
+//
+// Reads the task's own fields, so it is there from creation — before any run — and stays there
+// after one. The backend confirms the PR against the provider at create time and records that
+// provider's own link (`prUrl`), which is what makes a plain read enough here; a task created
+// while no VCS was connected keeps only the number, and then the reference reads as text rather
+// than pretending to be a link.
+import { computed } from 'vue'
+import type { Block } from '~/types/domain'
+import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
+
+const props = defineProps<{ block: Block }>()
+const { t } = useI18n()
+
+const isReview = computed(() => props.block.taskType === 'review')
+const fields = computed(() => props.block.taskTypeFields ?? null)
+const url = computed(() => fields.value?.prUrl?.trim() || '')
+const focus = computed(() => fields.value?.reviewFocus?.trim() || '')
+
+/** `#123` when the number is known, else the raw link — never an empty affordance. */
+const label = computed(() => {
+  const number = fields.value?.prNumber
+  return number ? t('inspector.reviewTarget.prNumber', { number }) : url.value
+})
+
+/** Nothing to show when the task carries no reference at all (nothing to link or name). */
+const hasTarget = computed(() => Boolean(label.value))
+</script>
+
+<template>
+  <InspectorSection
+    v-if="isReview && hasTarget"
+    :title="t('inspector.reviewTarget.title')"
+    :hint="t('inspector.reviewTarget.hint')"
+    icon="i-lucide-git-pull-request-arrow"
+    default-open
+  >
+    <UButton
+      v-if="url"
+      :to="url"
+      target="_blank"
+      rel="noopener"
+      external
+      color="neutral"
+      variant="soft"
+      size="sm"
+      icon="i-lucide-git-pull-request"
+      trailing-icon="i-lucide-external-link"
+      block
+      data-testid="inspector-review-target-link"
+    >
+      <span class="w-full truncate text-start" :title="url">{{ label }}</span>
+    </UButton>
+    <p
+      v-else
+      class="rounded-lg border border-slate-800 bg-slate-900/40 p-2.5 text-xs text-slate-300"
+      data-testid="inspector-review-target-link"
+    >
+      {{ label }}
+    </p>
+    <p v-if="focus" class="text-xs leading-relaxed text-slate-500">
+      {{ t('inspector.reviewTarget.focus', { focus }) }}
+    </p>
+  </InspectorSection>
+</template>

package/app/components/requirements/RequirementsReviewWindow.vue

@@ -1228,41 +1228,8 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
 .pl-5\.5 {
   padding-left: 1.375rem;
 }
-/* Minimal CommonMark styling for the incorporated requirements reader (mirrors the
-   prose review window's reader-prose). */
-.reader-prose :deep(p) {
-  margin: 0.4rem 0;
-}
-.reader-prose :deep(ul),
-.reader-prose :deep(ol) {
-  margin: 0.4rem 0;
-  padding-left: 1.25rem;
-  list-style: revert;
-}
-.reader-prose :deep(li) {
-  margin: 0.2rem 0;
-}
-.reader-prose :deep(strong) {
-  color: rgb(226 232 240);
-  font-weight: 600;
-}
-.reader-prose :deep(code) {
-  border-radius: 0.25rem;
-  background: rgb(2 6 23 / 0.6);
-  padding: 0.05rem 0.3rem;
-  font-size: 0.85em;
-}
-.reader-prose :deep(pre) {
-  margin: 0.5rem 0;
-  overflow-x: auto;
-  border-radius: 0.5rem;
-  background: rgb(2 6 23 / 0.6);
-  padding: 0.75rem;
-}
-.reader-prose :deep(blockquote) {
-  margin: 0.5rem 0;
-  border-left: 2px solid rgb(51 65 85);
-  padding-left: 0.75rem;
-  color: rgb(148 163 184);
-}
+/* The rendered-markdown presentation is the SHARED global `.reader-prose` sheet
+   (`assets/css/prose.css`), not a local copy: this reader shows the same agent-authored
+   markdown the step reader does, and a per-window duplicate is how the review surfaces
+   drift apart one property at a time. */
 </style>

package/app/composables/useProseComments.ts

@@ -0,0 +1,126 @@
+import { computed, nextTick, ref, watch } from 'vue'
+import { sliceSource } from '~/utils/agentOutput'
+
+/** A draft per-block review comment, anchored to a source line range of the reviewed markdown. */
+export interface ProseComment {
+  srcStart: number
+  srcEnd: number
+  quotedSource: string
+  body: string
+}
+
+/**
+ * GitHub-style per-block commenting over a rendered markdown document — the anchoring half of a
+ * prose review, with no opinion about WHAT is being reviewed or how the review is submitted.
+ *
+ * Extracted from `useStepApproval` (which now builds on it) so a second surface can offer the
+ * same affordance: the initiative tracker's plan-approval rail reviews the planner's drafted plan,
+ * which the engine renders as markdown onto the gate's proposal. Both therefore anchor comments
+ * identically — a comment quotes the exact source lines of the block it targets, so a "request
+ * changes" re-run can hand the agent back its OWN text rather than a re-rendered approximation.
+ *
+ * The anchors are the `data-src-start`/`data-src-end` attributes `parseOutputOutline` stamps on
+ * every top-level block, so this works over any document that reader renders.
+ *
+ * @param output the raw markdown being reviewed (comments quote out of it by line range)
+ * @param root the element containing the rendered blocks, for the highlight sync
+ * @param enabled whether clicking a block should start a comment (review mode is on)
+ */
+export function useProseComments(opts: {
+  output: () => string
+  root: () => HTMLElement | null
+  enabled: () => boolean
+}) {
+  const comments = ref<ProseComment[]>([])
+  const draftTarget = ref<{ srcStart: number; srcEnd: number; quotedSource: string } | null>(null)
+  const draftBody = ref('')
+
+  const blockKey = (c: { srcStart: number; srcEnd: number }) => `${c.srcStart}:${c.srcEnd}`
+
+  /** Toggle the highlight classes on commented / selected blocks within the rendered document. */
+  function syncHighlights() {
+    const root = opts.root()
+    if (!root) return
+    const commented = new Set(comments.value.map(blockKey))
+    const selected = draftTarget.value ? blockKey(draftTarget.value) : null
+    for (const el of Array.from(root.querySelectorAll('[data-src-start]'))) {
+      const key = `${el.getAttribute('data-src-start')}:${el.getAttribute('data-src-end')}`
+      el.classList.toggle('cf-commented', commented.has(key))
+      el.classList.toggle('cf-selected', key === selected)
+    }
+  }
+
+  /** Click a rendered block to start commenting on it (links keep working). */
+  function onProseClick(e: MouseEvent) {
+    if (!opts.enabled()) return
+    const target = e.target as HTMLElement
+    if (target.closest('a')) return
+    const blockEl = target.closest('[data-src-start]') as HTMLElement | null
+    if (!blockEl) return
+    const srcStart = Number(blockEl.getAttribute('data-src-start'))
+    const srcEnd = Number(blockEl.getAttribute('data-src-end'))
+    if (Number.isNaN(srcStart) || Number.isNaN(srcEnd)) return
+    draftTarget.value = {
+      srcStart,
+      srcEnd,
+      quotedSource: sliceSource(opts.output(), srcStart, srcEnd),
+    }
+    draftBody.value = ''
+    void nextTick(syncHighlights)
+  }
+
+  function addDraftComment() {
+    if (!draftTarget.value || !draftBody.value.trim()) return
+    comments.value.push({ ...draftTarget.value, body: draftBody.value.trim() })
+    draftTarget.value = null
+    draftBody.value = ''
+    void nextTick(syncHighlights)
+  }
+  function cancelDraft() {
+    draftTarget.value = null
+    draftBody.value = ''
+    void nextTick(syncHighlights)
+  }
+  function removeComment(idx: number) {
+    comments.value.splice(idx, 1)
+    void nextTick(syncHighlights)
+  }
+
+  /** Drop every draft — a different document (or a different subject) is being reviewed. */
+  function reset() {
+    comments.value = []
+    draftTarget.value = null
+    draftBody.value = ''
+    void nextTick(syncHighlights)
+  }
+
+  /** The wire shape `requestStepChanges` takes, or undefined when nothing was anchored. */
+  const wireComments = computed(() =>
+    comments.value.length
+      ? comments.value.map((c) => ({
+          quotedSource: c.quotedSource,
+          srcStart: c.srcStart,
+          srcEnd: c.srcEnd,
+          body: c.body,
+        }))
+      : undefined,
+  )
+
+  // Keep the in-document highlights in sync as the document renders or the drafts change.
+  watch([opts.enabled, opts.output, comments, draftTarget], () => void nextTick(syncHighlights), {
+    deep: true,
+  })
+
+  return {
+    comments,
+    wireComments,
+    draftTarget,
+    draftBody,
+    syncHighlights,
+    onProseClick,
+    addDraftComment,
+    cancelDraft,
+    removeComment,
+    reset,
+  }
+}