@cat-factory/app 0.195.0 → 0.195.2

package/app/components/board/nodes/BlockNode.vue

@@ -75,6 +75,21 @@ const FRAME_LABEL_KEYS: Record<BlockStatus, string> = {
   done: 'board.frame.status.done',
 }
 const statusLabel = computed(() => t(FRAME_LABEL_KEYS[frameStatus.value]))
+// The badge is a ROLLUP over the frame's children, not a status anybody set on the service, and
+// the label alone never says which child produced it — "Needs attention" names no task, and
+// "Live" reads as a health check rather than "caught up". So each status gets its own tooltip
+// naming what it is rolled up from. `pr_ready`/`done` are unreachable here (`frameStatus` caps
+// below `done`: a service is long-lived and never finishes) but the Record stays exhaustive over
+// `BlockStatus` for the same reason the label map does, and mirrors that map's aliasing.
+const FRAME_STATUS_HINT_KEYS: Record<BlockStatus, string> = {
+  planned: 'board.frame.statusHint.planned',
+  ready: 'board.frame.statusHint.ready',
+  in_progress: 'board.frame.statusHint.in_progress',
+  blocked: 'board.frame.statusHint.blocked',
+  pr_ready: 'board.frame.statusHint.pr_ready',
+  done: 'board.frame.statusHint.done',
+}
+const statusHint = computed(() => t(FRAME_STATUS_HINT_KEYS[frameStatus.value]))
 
 const selected = computed(() => ui.selectedBlockId === props.id)
 // Services are always expanded to their task canvas, at every zoom level: there is no
@@ -349,7 +364,7 @@ const ITEM_ICON: Record<string, string> = {
           </UBadge>
         </div>
         <div class="flex items-center justify-between">
-          <UBadge :color="statusMeta.chip as any" variant="subtle" size="sm">{{
+          <UBadge :color="statusMeta.chip as any" variant="subtle" size="sm" :title="statusHint">{{
             statusLabel
           }}</UBadge>
           <span class="text-[11px] text-slate-400">{{
@@ -474,9 +489,13 @@ const ITEM_ICON: Record<string, string> = {
               </div>
             </div>
             <div class="flex items-center gap-1">
-              <UBadge :color="statusMeta.chip as any" variant="subtle" size="sm">{{
-                statusLabel
-              }}</UBadge>
+              <UBadge
+                :color="statusMeta.chip as any"
+                variant="subtle"
+                size="sm"
+                :title="statusHint"
+                >{{ statusLabel }}</UBadge
+              >
               <!-- Board-authoring buttons (create task / from issue / recurring / initiative)
                    are `board.write` — hidden for a read-only viewer, who keeps the badge +
                    collapse toggle (view-only affordances). -->

package/app/components/initiative/InitiativePlanDecision.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+// The plan gate's DECISION half: the overall-feedback field plus the two commands that resolve the
+// park — accept the plan, or send it back to the planner.
+//
+// It is its own component because the gate has two surfaces: the full document review
+// (`InitiativePlanReview`, which owns the tracker window while a rendered plan is parked) and the
+// compact notice a gate with no rendered plan falls back to (`InitiativePlanNotice`). Both must
+// word the commands identically, gate them on the same RBAC fact, and refuse an empty send-back
+// the same way — so the state machine and its markup live here once rather than in each.
+//
+// Deliberately NOT offered: "approve with corrections". The plan was ingested into the
+// `initiatives` entity before this gate was raised, so the document is a VIEW of committed state —
+// an edit typed over it would reach nothing, and the engine refuses it outright
+// (`outputIsRendered` → 422). Requesting changes is the route for a correction, which is why an
+// anchored comment is worth having: it quotes the planner's own text back to it on the re-plan.
+import { computed, ref, watch } from 'vue'
+import type { RequestStepChangesInput } from '@cat-factory/contracts'
+
+const props = defineProps<{
+  /** The parked gate being resolved. */
+  approvalId: string
+  /** The run the gate belongs to, for the approve / request-changes commands. */
+  instanceId: string
+  /** Whether the viewer may resolve runs at all (RBAC); false renders the actions disabled. */
+  canExecute: boolean
+  /**
+   * The anchored per-block comments to send with a send-back, from the surface that offers
+   * commenting. Absent on the notice surface, which has no document to anchor to.
+   */
+  comments?: RequestStepChangesInput['comments']
+}>()
+
+/** A send-back succeeded: the surface drops its anchored drafts (the feedback is cleared here). */
+const emit = defineEmits<{ sent: [] }>()
+
+const execution = useExecutionStore()
+const { t } = useI18n()
+
+const feedback = ref('')
+const submitting = ref(false)
+
+/** Changes can only be requested with something to act on — an empty send would re-plan blind. */
+const canRequestChanges = computed(
+  () => !!feedback.value.trim() || (props.comments?.length ?? 0) > 0,
+)
+
+/** A fresh gate (a re-plan parked again) reviews the new plan clean, drafts dropped. */
+watch(
+  () => props.approvalId,
+  () => {
+    feedback.value = ''
+  },
+)
+
+/**
+ * Accept the plan: the run advances to the committer, which persists it and arms the execution
+ * loop. The window stays open — the review disappears with the approval (live) and the tracker it
+ * gives the window back to is where the plan then executes.
+ */
+async function approve() {
+  if (submitting.value || !props.canExecute) return
+  submitting.value = true
+  try {
+    await execution.approveStep(props.instanceId, props.approvalId)
+  } finally {
+    submitting.value = false
+  }
+}
+
+/** Send the plan back: the planner re-plans from the feedback + the anchored comments. */
+async function requestChanges() {
+  if (submitting.value || !canRequestChanges.value || !props.canExecute) return
+  submitting.value = true
+  try {
+    const ok = await execution.requestStepChanges(props.instanceId, props.approvalId, {
+      feedback: feedback.value.trim() || undefined,
+      comments: props.comments,
+    })
+    if (ok) {
+      feedback.value = ''
+      emit('sent')
+    }
+  } finally {
+    submitting.value = false
+  }
+}
+
+const disabledTitle = computed(() => (props.canExecute ? undefined : t('access.noRunExecute')))
+</script>
+
+<template>
+  <div>
+    <UTextarea
+      v-model="feedback"
+      data-testid="initiative-plan-feedback"
+      :rows="2"
+      autoresize
+      size="sm"
+      class="w-full"
+      :placeholder="t('initiative.planReview.feedbackPlaceholder')"
+    />
+    <div class="mt-2 flex flex-wrap items-center gap-2">
+      <UButton
+        color="primary"
+        size="xs"
+        icon="i-lucide-check"
+        data-testid="initiative-plan-approve"
+        :loading="submitting"
+        :disabled="!canExecute"
+        :title="disabledTitle"
+        @click="approve"
+      >
+        {{ t('initiative.planReview.approve') }}
+      </UButton>
+      <UButton
+        color="warning"
+        variant="soft"
+        size="xs"
+        icon="i-lucide-rotate-ccw"
+        data-testid="initiative-plan-send-back"
+        :loading="submitting"
+        :disabled="!canRequestChanges || !canExecute"
+        :title="
+          canExecute && !canRequestChanges
+            ? t('initiative.planReview.needsFeedback')
+            : disabledTitle
+        "
+        @click="requestChanges"
+      >
+        {{ t('initiative.planReview.sendBack') }}
+      </UButton>
+    </div>
+  </div>
+</template>

package/app/components/initiative/InitiativePlanNotice.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+// The plan gate with NO document to review: the compact rail that sits above the tracker's own
+// sections, states that there is nothing to navigate, and still resolves the park.
+//
+// It is NOT a legacy shim for gates parked before the engine rendered plans. `outputIsRendered` is a
+// fact about the STEP, and a plan gate can park without it today: the planner's post-completion
+// resolver authors the rendering only once it has INGESTED the plan, so a run that reaches the gate
+// without an ingest parks on the planner's transcript summary instead — a perfectly non-empty string
+// that `planReviewDocument` correctly reads as no document (dressing one sentence up under a table
+// of contents is the failure the whole review surface exists to end). Without this surface such a
+// gate would have no resolving surface at all, which is the exact bug the plan-review e2e spec was
+// written for.
+//
+// So it is deliberately NOT a takeover: unlike `InitiativePlanReview`, which replaces the tracker
+// because the document repeats it, this one wants the tracker underneath — there the sections ARE
+// the only rendering of the plan there is. Which is why it has to be TOLD whether they are actually
+// on screen: it renders above the entity branch, because a gate can be parked while the entity is
+// still loading, and pointing a reviewer at sections the window is not showing is worse than saying
+// nothing.
+import type { StepApproval } from '~/types/execution'
+import InitiativePlanDecision from '~/components/initiative/InitiativePlanDecision.vue'
+
+defineProps<{
+  /** The parked gate. */
+  approval: StepApproval
+  /** The run the gate belongs to, for the approve / request-changes commands. */
+  instanceId: string
+  /** Whether the viewer may resolve runs at all (RBAC); false renders the actions disabled. */
+  canExecute: boolean
+  /**
+   * Whether the tracker's own goal / phases / policy sections are rendered below this notice — i.e.
+   * whether the initiative entity has loaded. Only then may the notice point at them as the plan.
+   */
+  hasSections: boolean
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <section
+    class="mb-4 rounded-lg border border-amber-500/40 bg-amber-500/10 p-3.5"
+    data-testid="initiative-plan-notice"
+  >
+    <header 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>
+        <p class="mt-2 text-[12px] leading-relaxed text-amber-100/70">
+          {{ t('initiative.planReview.noDocument') }}
+          <template v-if="hasSections">
+            {{ t('initiative.planReview.noDocumentSections') }}
+          </template>
+        </p>
+      </div>
+    </header>
+    <InitiativePlanDecision
+      class="mt-3"
+      :approval-id="approval.id"
+      :instance-id="instanceId"
+      :can-execute="canExecute"
+    />
+  </section>
+</template>