@cat-factory/app 0.179.0 → 0.181.0

package/README.md

@@ -148,7 +148,10 @@ example ships in [`deploy/frontend`](../../deploy/frontend) (the `acme:security`
 - **Context attachments** (`components/context`) — `ContextAttachmentFields`, the
   shared staged-attachment form used by both the add-task and create-initiative
   modals. Picks are held locally and import-and-linked once the block exists (see
-  `composables/useContextLinking`), because linking needs a block id.
+  `composables/useContextLinking`), because linking needs a block id. Both hosts
+  attach to the SAME per-block linkage, so the inspector's `TaskContextDocs` /
+  `TaskContextIssues` sections render for a task AND an initiative — an initiative's
+  attachments would otherwise be invisible the moment the create modal closed.
 - **Integrations** — modals/panels for `github` (the source-control panel, shared
   by every VCS provider), `vcs` (the GitLab personal-access-token connect),
   `bootstrap`, `documents`, `tasks`, `requirements` (review), `scenarios`

package/app/components/documents/TaskContextDocs.vue

@@ -4,8 +4,12 @@ import type { Block } from '~/types/domain'
 import ContextDocumentPicker from '~/components/documents/ContextDocumentPicker.vue'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 
-// Documents (from any source) attached to a task as agent context, shown inside
-// the InspectorPanel. Attaching uses the SAME inline picker as task creation
+// Documents (from any source) attached to a task OR an initiative as agent
+// context, shown inside the InspectorPanel. An initiative takes the same
+// attachments (the create-initiative modal stages them exactly as the add-task one
+// does) and its whole planning pipeline reads them, so it gets the same section —
+// only the prose differs, which is why the hint/empty copy is level-keyed below.
+// Attaching uses the SAME inline picker as task creation
 // (source selector + repo→file browse + free-text search + paste-by-reference —
 // ContextDocumentPicker), NOT the old dropdown that opened a second, page-level
 // "Import a page…" modal on top of the inspector. Stacked page-level modals don't
@@ -27,6 +31,18 @@ onMounted(() => {
 })
 
 const linked = computed(() => documents.docsForBlock(props.block.id))
+
+// Two STATIC literal keys per string, picked by level — the copy names what reads the
+// document (the agents implementing a task vs the pipeline that plans an initiative), which
+// is the whole point of the hint. Assembling one key from `block.level` would defeat the
+// typed message-key check for a two-member choice that gains nothing from being dynamic.
+const isInitiative = computed(() => props.block.level === 'initiative')
+const hint = computed(() =>
+  isInitiative.value ? t('documents.taskDocs.hintInitiative') : t('documents.taskDocs.hint'),
+)
+const emptyHint = computed(() =>
+  isInitiative.value ? t('documents.taskDocs.emptyInitiative') : t('documents.taskDocs.empty'),
+)
 // Already-linked docs, so the inline picker filters them out / never re-offers them.
 const chosenKeys = computed(() =>
   linked.value.map((d) =>
@@ -71,7 +87,7 @@ async function attach(item: PendingContext) {
   <InspectorSection
     v-if="documents.available"
     :title="t('documents.taskDocs.heading')"
-    :hint="t('documents.taskDocs.hint')"
+    :hint="hint"
     :count="linked.length"
   >
     <template #actions>
@@ -130,7 +146,7 @@ async function attach(item: PendingContext) {
       </a>
     </div>
     <p v-else class="text-[11px] text-slate-500">
-      {{ t('documents.taskDocs.empty') }}
+      {{ emptyHint }}
     </p>
   </InspectorSection>
 </template>

package/app/components/initiative/InitiativePlanningWindow.vue

@@ -10,40 +10,66 @@
 // (`ui.openInitiativePlanning`) or as the interviewer step's result view. Live `initiative`
 // stream events patch the store, so an open window follows the interview as it progresses.
 //
+// An interview runs over MULTIPLE ROUNDS and the entity keeps the settled ones, so the list is a
+// mix of what the human still owes an answer and what they already dealt with. It renders pending
+// first (`orderInterviewQuestions`) — see the `order` snapshot below for why that is recomputed per
+// round rather than live.
+//
 // CONTINUE/PROCEED ARE ASYNC. They only record the intent on the parked step and wake the durable
 // driver; the interviewer LLM then runs for as long as it takes, and the response carries the
 // PRE-resume entity. So the window must not key its body on the entity alone — that renders
 // identically before and after the click, which reads as the button having done nothing. The
 // phase below folds the planning RUN's status in, so the wait is visible and a failed pass says
 // so instead of leaving the human staring at questions they already submitted.
-import { computed, reactive, watch } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import ClarificationItem from '~/components/common/ClarificationItem.vue'
 import InterviewGateNotice from '~/components/common/InterviewGateNotice.vue'
-import { INITIATIVE_STATUS_LABEL_KEYS } from '~/utils/initiative'
+import {
+  INITIATIVE_STATUS_LABEL_KEYS,
+  isPendingQuestion,
+  orderInterviewQuestions,
+} from '~/utils/initiative'
 import { interviewGatePhase } from '~/utils/interviewGate'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
+import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 
 const board = useBoardStore()
 const initiatives = useInitiativesStore()
-const execution = useExecutionStore()
 const { t } = useI18n()
 
-const { open, blockId, close } = useResultView('initiative-planning', {
+const { open, blockId, instanceId, stepIndex, close } = useResultView('initiative-planning', {
   onOpen: ({ blockId }) => void initiatives.load(blockId),
 })
 
 const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))
 const initiative = computed(() => (blockId.value ? initiatives.forBlock(blockId.value) : null))
-const run = computed(() => (blockId.value ? execution.getByBlock(blockId.value) : undefined))
+
+/**
+ * The planning run + the interviewer step's run details, resolved through the shared seam so this
+ * window reports the same "which run is this / how did the model do" facts as every other agent
+ * window — including on the card/inspector entry point, which carries no step (see
+ * `useResultViewRunMeta`). `run` is the same instance the phase below reads.
+ */
+const {
+  instance: run,
+  step: metaStep,
+  instanceId: runId,
+  position,
+  totalSteps,
+  runFailed,
+  failureAt,
+} = useResultViewRunMeta('initiative-planning', {
+  blockId: () => blockId.value,
+  instanceId: () => instanceId.value,
+  stepIndex: () => stepIndex.value,
+})
 
 /** Every interview exchange, with a stable key for the list + draft map. */
 const questions = computed(() =>
   (initiative.value?.qa ?? []).map((q, i) => ({ ...q, key: q.id ?? `q-${i}` })),
 )
 /** Questions still needing an answer: not dismissed, and not yet answered (mirrors backend). */
-const pending = computed(() =>
-  questions.value.filter((q) => q.status !== 'dismissed' && !(q.answer ?? '').trim()),
-)
+const pending = computed(() => questions.value.filter(isPendingQuestion))
 
 // Per-question answer drafts, seeded from the entity and refreshed as new rounds arrive
 // without clobbering an answer the human is mid-edit on.
@@ -58,6 +84,28 @@ watch(
   { immediate: true },
 )
 
+/**
+ * Render order (pending first — see `orderInterviewQuestions`), re-snapshotted ONLY when the
+ * question SET changes, i.e. when a round lands. Deriving it live from the answers instead would
+ * yank a question out from under the human the moment they blurred its textarea and shuffle
+ * everything below it up, while they are reading down the list. Re-snapshotting per ROUND rather
+ * than per question is what keeps a window left open across rounds correct: a question answered in
+ * round one has to sink below round two's new ones, which a rank frozen at first sight never would.
+ */
+const order = ref<string[]>([])
+watch(
+  () => questions.value.map((q) => q.key).join('|'),
+  () => {
+    order.value = orderInterviewQuestions(questions.value).map((q) => q.key)
+  },
+  { immediate: true },
+)
+const orderedQuestions = computed(() => {
+  const rank = new Map(order.value.map((key, i) => [key, i]))
+  // A question the snapshot has not seen is by definition new, so it is pending and sorts first.
+  return [...questions.value].sort((a, b) => (rank.get(a.key) ?? -1) - (rank.get(b.key) ?? -1))
+})
+
 const resuming = computed(() => initiatives.resuming)
 
 /**
@@ -155,7 +203,7 @@ async function onDiscard() {
     icon-class="bg-indigo-500/15 text-indigo-300"
     :title="initiative?.title ?? block?.title ?? t('initiative.planning.title')"
     :subtitle="t('initiative.planning.subtitle')"
-    width="3xl"
+    width="4xl"
     testid="initiative-planning-window"
     @close="close"
   >
@@ -165,79 +213,104 @@ async function onDiscard() {
       </UBadge>
     </template>
 
-    <div class="min-h-0 flex-1 overflow-y-auto px-5 py-4">
-      <!-- No entity yet -->
-      <div
-        v-if="!initiative"
-        class="flex h-full flex-col items-center justify-center gap-2 text-center text-slate-400"
-      >
-        <UIcon name="i-lucide-messages-square" class="h-8 w-8 opacity-40" />
-        <p class="text-sm">{{ t('initiative.planning.empty') }}</p>
-      </div>
+    <div class="flex min-h-0 flex-1">
+      <div class="min-w-0 flex-1 overflow-y-auto px-5 py-4">
+        <!-- No entity yet -->
+        <div
+          v-if="!initiative"
+          class="flex h-full flex-col items-center justify-center gap-2 text-center text-slate-400"
+        >
+          <UIcon name="i-lucide-messages-square" class="h-8 w-8 opacity-40" />
+          <p class="text-sm">{{ t('initiative.planning.empty') }}</p>
+        </div>
 
-      <template v-else>
-        <p class="mb-4 text-[13px] leading-relaxed text-slate-300">
-          {{ t('initiative.planning.intro') }}
-        </p>
+        <template v-else>
+          <p class="mb-4 text-[13px] leading-relaxed text-slate-300">
+            {{ t('initiative.planning.intro') }}
+          </p>
 
-        <!-- A pass is running: the human is waiting on the planner. Without this the window is
-             byte-identical to the parked state and the submit reads as a no-op. -->
-        <InterviewGateNotice
-          v-if="phase === 'working'"
-          variant="working"
-          :title="t('initiative.planning.working')"
-          :hint="t('initiative.planning.workingHint')"
-          testid="initiative-planning-working"
-        />
+          <!-- A pass is running: the human is waiting on the planner. Without this the window is
+               byte-identical to the parked state and the submit reads as a no-op. -->
+          <InterviewGateNotice
+            v-if="phase === 'working'"
+            variant="working"
+            :title="t('initiative.planning.working')"
+            :hint="t('initiative.planning.workingHint')"
+            testid="initiative-planning-working"
+          />
 
-        <!-- The planning run stopped before the interview settled — a dead end otherwise. -->
-        <InterviewGateNotice
-          v-else-if="phase === 'failed'"
-          variant="failed"
-          :title="t('initiative.planning.failed')"
-          :hint="t('initiative.planning.failedHint')"
-          testid="initiative-planning-failed"
-        />
+          <!-- The planning run stopped before the interview settled — a dead end otherwise. -->
+          <InterviewGateNotice
+            v-else-if="phase === 'failed'"
+            variant="failed"
+            :title="t('initiative.planning.failed')"
+            :hint="t('initiative.planning.failedHint')"
+            testid="initiative-planning-failed"
+          />
 
-        <!-- Planning was never started, so there is nothing to answer YET (distinct from
-             converged, which means the planner already has what it needs). -->
-        <div
-          v-else-if="phase === 'idle' && questions.length === 0"
-          class="rounded-lg border border-slate-800 bg-slate-950/40 p-4 text-center text-[13px] text-slate-400"
-          data-testid="initiative-planning-idle"
-        >
-          {{ t('initiative.planning.idle') }}
-        </div>
+          <!-- Planning was never started, so there is nothing to answer YET (distinct from
+               converged, which means the planner already has what it needs). -->
+          <div
+            v-else-if="phase === 'idle' && questions.length === 0"
+            class="rounded-lg border border-slate-800 bg-slate-950/40 p-4 text-center text-[13px] text-slate-400"
+            data-testid="initiative-planning-idle"
+          >
+            {{ t('initiative.planning.idle') }}
+          </div>
 
-        <!-- Converged / no pending questions -->
-        <div
-          v-else-if="phase === 'converged' || questions.length === 0"
-          class="rounded-lg border border-slate-800 bg-slate-950/40 p-4 text-center text-[13px] text-slate-400"
-          data-testid="initiative-planning-converged"
-        >
-          {{ t('initiative.planning.converged') }}
-        </div>
+          <!-- Converged / no pending questions -->
+          <div
+            v-else-if="phase === 'converged' || questions.length === 0"
+            class="rounded-lg border border-slate-800 bg-slate-950/40 p-4 text-center text-[13px] text-slate-400"
+            data-testid="initiative-planning-converged"
+          >
+            {{ t('initiative.planning.converged') }}
+          </div>
 
-        <!-- Interview questions — the shared clarification surface (answer / not-relevant /
-                 recommend), reused with the requirements-review window. -->
-        <ul v-else class="space-y-4">
-          <li v-for="q in questions" :key="q.key" data-testid="initiative-planning-question">
-            <ClarificationItem
-              v-model:answer="drafts[q.key]"
-              :prompt="q.question"
-              :dismissed="q.status === 'dismissed'"
-              :recommendation="q.recommendation"
-              :recommending="!!q.id && initiatives.recommending.has(q.id)"
-              :answer-placeholder="t('initiative.planning.answerPlaceholder')"
-              @persist="persist(q)"
-              @dismiss="setStatus(q, 'dismissed')"
-              @reopen="setStatus(q, 'open')"
-              @recommend="recommend(q)"
-              @use-recommendation="useRecommendation(q)"
-            />
-          </li>
-        </ul>
-      </template>
+          <!-- Interview questions — the shared clarification surface (answer / not-relevant /
+                   recommend), reused with the requirements-review window. -->
+          <ul v-else class="space-y-4">
+            <li
+              v-for="q in orderedQuestions"
+              :key="q.key"
+              data-testid="initiative-planning-question"
+            >
+              <ClarificationItem
+                v-model:answer="drafts[q.key]"
+                :prompt="q.question"
+                :dismissed="q.status === 'dismissed'"
+                :recommendation="q.recommendation"
+                :recommending="!!q.id && initiatives.recommending.has(q.id)"
+                :answer-placeholder="t('initiative.planning.answerPlaceholder')"
+                @persist="persist(q)"
+                @dismiss="setStatus(q, 'dismissed')"
+                @reopen="setStatus(q, 'open')"
+                @recommend="recommend(q)"
+                @use-recommendation="useRecommendation(q)"
+              />
+            </li>
+          </ul>
+        </template>
+      </div>
+
+      <!-- Run details: the shared run-metadata + LLM model-activity block every agent window
+           carries (step position, live duration, model, run id, calls + token usage). Resolved
+           through `useResultViewRunMeta`, so it is present on the card / inspector entry point
+           too — where this window carries no step index of its own. -->
+      <aside
+        v-if="metaStep"
+        data-testid="initiative-planning-run-meta"
+        class="hidden w-60 shrink-0 flex-col gap-4 overflow-y-auto border-s border-slate-800 bg-slate-900/50 px-4 py-4 lg:flex"
+      >
+        <StepRunMeta
+          :step="metaStep"
+          :instance-id="runId"
+          :step-number="position"
+          :total-steps="totalSteps"
+          :run-failed="runFailed"
+          :failure-at="failureAt"
+        />
+      </aside>
     </div>
 
     <!-- Action rail. The submit/plan-now pair shows only while the run is actually parked on the