@cat-factory/app 0.6.0

package/app/components/panels/StepRestartControl.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+// Shared "Restart pipeline from this step" control.
+//
+// The restart action is step-generic — it lives on the execution engine, not on any one
+// agent kind — but a pipeline step opens in several different windows: the generic prose
+// panel (AgentStepDetail) AND the dedicated result views (the tester report, the CI /
+// conflicts gate, the requirements review). The restart affordance was originally bolted
+// onto the prose panel alone, so clicking a step that routes to a dedicated window showed
+// no way to restart. Centralising it here keeps the two-click confirm + the gating
+// identical across every window, so the control is reachable from every step a human can
+// click into.
+//
+// Re-runs the pipeline from this step onward: the server resets this step + every later
+// step's iteration counters and re-drives a fresh run, preserving the earlier steps'
+// outputs as handoff context. Destructive (later steps' results are dropped), so it's a
+// two-click confirm. Renders nothing when there's no run behind the view (an off-path
+// open, e.g. the inspector's pre-start requirements review) or while THIS step is parked
+// on an unresolved approval gate (the approval rail owns that interaction).
+const props = defineProps<{
+  instanceId: string | null
+  stepIndex: number | null
+}>()
+const emit = defineEmits<{ restarted: [] }>()
+
+const execution = useExecutionStore()
+
+const instance = computed(() =>
+  props.instanceId ? execution.getInstance(props.instanceId) : undefined,
+)
+const step = computed(() =>
+  instance.value && props.stepIndex !== null
+    ? (instance.value.steps[props.stepIndex] ?? null)
+    : null,
+)
+const approvalPending = computed(() => step.value?.approval?.status === 'pending')
+const canRestart = computed(
+  () => !!instance.value && props.stepIndex !== null && !approvalPending.value,
+)
+
+const armed = ref(false)
+const restarting = ref(false)
+async function restart() {
+  if (!instance.value || props.stepIndex === null || restarting.value) return
+  restarting.value = true
+  try {
+    await execution.restartFromStep(instance.value.id, props.stepIndex)
+    emit('restarted')
+  } finally {
+    restarting.value = false
+    armed.value = false
+  }
+}
+</script>
+
+<template>
+  <template v-if="canRestart">
+    <UButton
+      v-if="!armed"
+      icon="i-lucide-rotate-ccw"
+      color="neutral"
+      variant="ghost"
+      size="sm"
+      title="Restart pipeline from this step"
+      @click="armed = true"
+    />
+    <template v-else>
+      <UButton
+        color="warning"
+        variant="soft"
+        size="sm"
+        icon="i-lucide-rotate-ccw"
+        :loading="restarting"
+        @click="restart"
+      >
+        Restart from here
+      </UButton>
+      <UButton
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        :disabled="restarting"
+        @click="armed = false"
+      >
+        Cancel
+      </UButton>
+    </template>
+  </template>
+</template>

package/app/components/panels/StepResultViewHost.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+// Universal dedicated-result-view host. An agent archetype can declare a `resultView`
+// id (see `~/utils/catalog`); when a step of that kind is opened, `ui.resultView` is set
+// and this host renders the matching registered window instead of the generic
+// `AgentStepDetail` prose panel. Adding a bespoke visualization for a new agent is just:
+//   1. declare `resultView: '<id>'` on its archetype, and
+//   2. register `'<id>': <Component>` below.
+// No caller changes — every board/inspector entry point already routes through
+// `ui` dispatch. Each registered window builds on `useResultView(viewId, { onOpen })`,
+// which owns the seam contract (open/blockId/close + Escape + load-on-open) so a new
+// window can't reintroduce the route-dependent empty-state bug by forgetting to fetch
+// on mount — declare an `onOpen` loader and it fires on every open.
+import { computed, type Component } from 'vue'
+import RequirementsReviewWindow from '~/components/requirements/RequirementsReviewWindow.vue'
+import ClarityReviewWindow from '~/components/clarity/ClarityReviewWindow.vue'
+import TestReportWindow from '~/components/testing/TestReportWindow.vue'
+import GateResultView from '~/components/gates/GateResultView.vue'
+import ConsensusSessionWindow from '~/components/consensus/ConsensusSessionWindow.vue'
+
+const ui = useUiStore()
+
+const STEP_RESULT_VIEWS: Record<string, Component> = {
+  'requirements-review': RequirementsReviewWindow,
+  'clarity-review': ClarityReviewWindow,
+  tester: TestReportWindow,
+  // Shared by both polling gates (`ci` + `conflicts`); the window branches on agentKind.
+  gate: GateResultView,
+  // Opened for any step that ran the consensus mechanism (routed in `ui.dispatchStepView`).
+  'consensus-session': ConsensusSessionWindow,
+}
+
+const active = computed<Component | null>(() => {
+  const view = ui.resultView?.view
+  return view ? (STEP_RESULT_VIEWS[view] ?? null) : null
+})
+</script>
+
+<template>
+  <component :is="active" v-if="active" />
+</template>

package/app/components/panels/StepTestReport.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { TestReport } from '~/types/domain'
+import type { TesterStepState } from '~/types/execution'
+
+// A tester step's latest structured report (what was tested, the per-area outcomes,
+// the concerns it raised and the greenlight verdict) plus the fixer-loop phase.
+defineProps<{
+  report: TestReport
+  phase: TesterStepState | null
+}>()
+
+const SEVERITY_COLOR: Record<string, string> = {
+  low: '#64748b',
+  medium: '#f59e0b',
+  high: '#f97316',
+  critical: '#ef4444',
+}
+const OUTCOME_COLOR: Record<string, string> = {
+  passed: '#22c55e',
+  failed: '#ef4444',
+  skipped: '#64748b',
+}
+</script>
+
+<template>
+  <section class="mt-4 scroll-mt-4">
+    <div class="mb-2 flex items-center gap-1.5 text-[11px]">
+      <UIcon name="i-lucide-flask-conical" class="h-3.5 w-3.5 text-slate-400" />
+      <span class="font-semibold uppercase tracking-wide text-slate-400"> Test report </span>
+      <UBadge :color="report.greenlight ? 'success' : 'warning'" variant="subtle" size="sm">
+        {{ report.greenlight ? 'Greenlit' : 'Needs fixes' }}
+      </UBadge>
+      <span v-if="phase && phase.attempts > 0" class="text-[11px] text-slate-500">
+        {{ phase.attempts }}/{{ phase.maxAttempts }} fix attempt(s)<span
+          v-if="phase.phase === 'fixing'"
+        >
+          · fixing…</span
+        >
+      </span>
+    </div>
+    <p v-if="report.summary" class="mb-3 text-[13px] leading-relaxed text-slate-300">
+      {{ report.summary }}
+    </p>
+
+    <div v-if="report.tested.length" class="mb-3">
+      <div class="mb-1 text-[11px] text-slate-500">Tested</div>
+      <ul class="space-y-0.5 text-[12px] text-slate-300">
+        <li v-for="(t, i) in report.tested" :key="i">• {{ t }}</li>
+      </ul>
+    </div>
+
+    <div v-if="report.outcomes.length" class="mb-3 space-y-1">
+      <div class="text-[11px] text-slate-500">Outcomes</div>
+      <div v-for="(o, i) in report.outcomes" :key="i" class="flex items-start gap-2 text-[12px]">
+        <span
+          class="mt-1 h-2 w-2 shrink-0 rounded-full"
+          :style="{ backgroundColor: OUTCOME_COLOR[o.status] ?? '#64748b' }"
+        />
+        <span class="text-slate-300"
+          >{{ o.name }}<span v-if="o.detail" class="text-slate-500"> — {{ o.detail }}</span></span
+        >
+      </div>
+    </div>
+
+    <div v-if="report.concerns.length" class="space-y-1">
+      <div class="text-[11px] text-slate-500">Concerns</div>
+      <div
+        v-for="(c, i) in report.concerns"
+        :key="i"
+        class="rounded border border-slate-700/60 p-2 text-[12px]"
+      >
+        <div class="flex items-center gap-1.5">
+          <span
+            class="rounded px-1 text-[10px] font-semibold uppercase text-white"
+            :style="{ backgroundColor: SEVERITY_COLOR[c.severity] ?? '#64748b' }"
+            >{{ c.severity }}</span
+          >
+          <span class="font-medium text-slate-200">{{ c.title }}</span>
+        </div>
+        <p v-if="c.detail" class="mt-1 text-slate-400">{{ c.detail }}</p>
+      </div>
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { Block } from '~/types/domain'
+import { STATUS_META } from '~/utils/catalog'
+
+const props = defineProps<{ block: Block }>()
+
+const board = useBoardStore()
+const ui = useUiStore()
+
+const isFrame = computed(() => (props.block.level ?? 'frame') === 'frame')
+const modules = computed(() => (isFrame.value ? board.modulesOf(props.block.id) : []))
+const tasks = computed(() =>
+  isFrame.value ? board.allTasksUnder(props.block.id) : board.tasksOf(props.block.id),
+)
+
+function addTask() {
+  ui.openAddTask(props.block.id)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- modules (services only) -->
+    <div v-if="modules.length">
+      <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        Modules ({{ modules.length }})
+      </div>
+      <ul class="space-y-1">
+        <li
+          v-for="m in modules"
+          :key="m.id"
+          class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 hover:bg-slate-800/60"
+          @click="ui.select(m.id)"
+        >
+          <UIcon name="i-lucide-package" class="h-3.5 w-3.5 text-violet-400" />
+          <span class="truncate text-xs text-slate-200">{{ m.title }}</span>
+          <span class="ml-auto text-[10px] text-slate-500"
+            >{{ board.tasksOf(m.id).length }} task(s)</span
+          >
+        </li>
+      </ul>
+    </div>
+
+    <div>
+      <div class="mb-1 flex items-center justify-between">
+        <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          {{ isFrame ? 'All tasks' : 'Tasks' }} ({{ tasks.length }})
+        </span>
+        <UButton size="xs" variant="soft" color="primary" icon="i-lucide-plus" @click="addTask">
+          Add task
+        </UButton>
+      </div>
+      <ul v-if="tasks.length" class="space-y-1">
+        <li
+          v-for="t in tasks"
+          :key="t.id"
+          class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 hover:bg-slate-800/60"
+          @click="ui.select(t.id)"
+        >
+          <span
+            class="h-2 w-2 shrink-0 rounded-full"
+            :style="{ backgroundColor: STATUS_META[t.status].color }"
+          />
+          <span class="truncate text-xs text-slate-200">{{ t.title }}</span>
+          <span class="ml-auto text-[10px] text-slate-500">{{ STATUS_META[t.status].label }}</span>
+        </li>
+      </ul>
+      <div v-else class="text-[11px] text-slate-500">No tasks yet — add one to start work.</div>
+    </div>
+    <p v-if="isFrame" class="text-[11px] text-slate-500">
+      Services are long-lived — they don't "complete". Work happens in their tasks &amp; modules.
+    </p>
+  </div>
+</template>

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

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+// Inspector section shown when the selected task block backs a recurring pipeline.
+// Lets the user edit the cadence, pause/resume, run now, and review the run history
+// (lazily loaded; retained ~1 week on the backend).
+import type { Block } from '~/types/domain'
+import type { Recurrence } from '~/types/recurring'
+
+const props = defineProps<{ block: Block }>()
+const recurring = useRecurringPipelinesStore()
+const pipelines = usePipelinesStore()
+const toast = useToast()
+
+const schedule = computed(() => recurring.byBlock(props.block.id))
+const runs = computed(() =>
+  schedule.value ? (recurring.runsBySchedule[schedule.value.id] ?? []) : [],
+)
+
+const editing = ref(false)
+const draft = ref<Recurrence | null>(null)
+const busy = ref(false)
+
+// Load history whenever a schedule is shown.
+watch(
+  () => schedule.value?.id,
+  (id) => {
+    if (id) recurring.loadRuns(id).catch(() => {})
+  },
+  { immediate: true },
+)
+
+const pipelineName = computed(
+  () => pipelines.getPipeline(schedule.value?.pipelineId ?? '')?.name ?? schedule.value?.pipelineId,
+)
+
+function describeCadence(r: Recurrence): string {
+  const every = r.intervalHours % 24 === 0 ? `${r.intervalHours / 24}d` : `${r.intervalHours}h`
+  const days =
+    r.weekdays.length === 0
+      ? 'any day'
+      : r.weekdays.map((d) => ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][d]).join(' ')
+  const window =
+    r.windowStartHour === null && r.windowEndHour === null
+      ? ''
+      : ` · ${String(r.windowStartHour ?? 0).padStart(2, '0')}:00–${String(r.windowEndHour ?? 24).padStart(2, '0')}:00`
+  return `Every ${every} · ${days}${window} · ${r.timezone}`
+}
+
+function startEdit() {
+  if (!schedule.value) return
+  draft.value = { ...schedule.value.recurrence }
+  editing.value = true
+}
+
+async function saveEdit() {
+  if (!schedule.value || !draft.value) return
+  busy.value = true
+  try {
+    await recurring.update(schedule.value.id, { recurrence: draft.value })
+    editing.value = false
+  } catch (e) {
+    toast.add({ title: 'Could not update schedule', description: errMsg(e), color: 'error' })
+  } finally {
+    busy.value = false
+  }
+}
+
+async function toggleEnabled() {
+  if (!schedule.value) return
+  busy.value = true
+  try {
+    await recurring.update(schedule.value.id, { enabled: !schedule.value.enabled })
+  } catch (e) {
+    toast.add({ title: 'Could not update schedule', description: errMsg(e), color: 'error' })
+  } finally {
+    busy.value = false
+  }
+}
+
+async function runNow() {
+  if (!schedule.value) return
+  busy.value = true
+  try {
+    await recurring.runNow(schedule.value.id)
+  } catch (e) {
+    toast.add({ title: 'Could not run now', description: errMsg(e), color: 'error' })
+  } finally {
+    busy.value = false
+  }
+}
+
+function errMsg(e: unknown) {
+  return e instanceof Error ? e.message : String(e)
+}
+
+const RUN_COLOR: Record<string, string> = {
+  running: 'text-amber-400',
+  done: 'text-emerald-400',
+  failed: 'text-rose-400',
+  skipped: 'text-slate-500',
+}
+function fmtTime(ms: number) {
+  return new Date(ms).toLocaleString()
+}
+</script>
+
+<template>
+  <div
+    v-if="schedule"
+    class="space-y-2 rounded-lg border border-indigo-900/50 bg-indigo-950/20 p-3"
+  >
+    <div class="flex items-center justify-between">
+      <span
+        class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-indigo-300"
+      >
+        <UIcon name="i-lucide-repeat" class="h-3.5 w-3.5" />
+        Recurring pipeline
+      </span>
+      <UBadge :color="schedule.enabled ? 'primary' : 'neutral'" variant="subtle" size="xs">
+        {{ schedule.enabled ? 'Active' : 'Paused' }}
+      </UBadge>
+    </div>
+
+    <p class="text-[11px] text-slate-400">
+      <span class="text-slate-300">{{ pipelineName }}</span>
+    </p>
+
+    <template v-if="!editing">
+      <p class="text-[11px] text-slate-400">{{ describeCadence(schedule.recurrence) }}</p>
+      <p class="text-[11px] text-slate-500">Next run: {{ fmtTime(schedule.nextRunAt) }}</p>
+      <div class="flex flex-wrap gap-1.5 pt-1">
+        <UButton size="xs" variant="soft" icon="i-lucide-play" :loading="busy" @click="runNow">
+          Run now
+        </UButton>
+        <UButton
+          size="xs"
+          variant="soft"
+          color="neutral"
+          :icon="schedule.enabled ? 'i-lucide-pause' : 'i-lucide-play'"
+          :loading="busy"
+          @click="toggleEnabled"
+        >
+          {{ schedule.enabled ? 'Pause' : 'Resume' }}
+        </UButton>
+        <UButton
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          icon="i-lucide-pencil"
+          @click="startEdit"
+        >
+          Edit cadence
+        </UButton>
+      </div>
+    </template>
+
+    <template v-else-if="draft">
+      <RecurringRecurrenceEditor v-model="draft" />
+      <div class="flex justify-end gap-1.5 pt-1">
+        <UButton size="xs" variant="ghost" color="neutral" @click="editing = false">Cancel</UButton>
+        <UButton size="xs" color="primary" :loading="busy" @click="saveEdit">Save</UButton>
+      </div>
+    </template>
+
+    <!-- run history -->
+    <div v-if="runs.length" class="space-y-1 border-t border-slate-800 pt-2">
+      <span class="text-[10px] font-semibold uppercase tracking-wide text-slate-500">
+        Recent runs
+      </span>
+      <div v-for="run in runs" :key="run.id" class="flex items-center gap-2 text-[11px]">
+        <span :class="RUN_COLOR[run.status] ?? 'text-slate-400'" class="w-14 shrink-0 capitalize">
+          {{ run.status }}
+        </span>
+        <span class="truncate text-slate-500">{{ fmtTime(run.startedAt) }}</span>
+        <span v-if="run.outcome" class="ml-auto truncate text-slate-500">{{ run.outcome }}</span>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { Block } from '~/types/domain'
+
+// Service-level best-practice fragments (frame blocks). These are the programming
+// standards/guidelines for the whole service; at run time their bodies are folded
+// into the prompt of every `code-aware` agent on tasks under this service. Drawn from
+// the universal fragment pool (built-in + deployment-registered), grouped by category.
+const props = defineProps<{ block: Block }>()
+
+const board = useBoardStore()
+const fragments = useFragmentsStore()
+
+onMounted(() => fragments.ensureLoaded())
+
+const selectedFragments = computed(() =>
+  (props.block.serviceFragmentIds ?? [])
+    .map((id) => fragments.getFragment(id))
+    .filter((f): f is NonNullable<typeof f> => !!f),
+)
+
+// Picker menu: every pool fragment not already selected, grouped by category.
+const fragmentMenu = computed(() => {
+  const selected = new Set(props.block.serviceFragmentIds ?? [])
+  const groups = new Map<string, { label: string; onSelect: () => void }[]>()
+  for (const f of fragments.fragments) {
+    if (selected.has(f.id)) continue
+    const items = groups.get(f.category) ?? []
+    items.push({ label: f.title, onSelect: () => addFragment(f.id) })
+    groups.set(f.category, items)
+  }
+  return [...groups.values()]
+})
+
+function addFragment(id: string) {
+  const list = props.block.serviceFragmentIds ? [...props.block.serviceFragmentIds] : []
+  if (!list.includes(id)) list.push(id)
+  board.updateBlock(props.block.id, { serviceFragmentIds: list })
+}
+
+function removeFragment(id: string) {
+  if (!props.block.serviceFragmentIds) return
+  board.updateBlock(props.block.id, {
+    serviceFragmentIds: props.block.serviceFragmentIds.filter((x) => x !== id),
+  })
+}
+</script>
+
+<template>
+  <div>
+    <div class="mb-1 flex items-center justify-between">
+      <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        Service best practices
+      </span>
+      <UDropdownMenu v-if="fragmentMenu.length" :items="fragmentMenu">
+        <UButton
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          icon="i-lucide-plus"
+          trailing-icon="i-lucide-chevron-down"
+        />
+      </UDropdownMenu>
+    </div>
+    <div v-if="selectedFragments.length" class="mb-1 flex flex-wrap gap-1">
+      <UBadge
+        v-for="f in selectedFragments"
+        :key="f.id"
+        color="primary"
+        variant="subtle"
+        size="sm"
+        class="cursor-pointer"
+        :title="f.summary"
+        @click="removeFragment(f.id)"
+      >
+        {{ f.title }}<UIcon name="i-lucide-x" class="ml-0.5 h-3 w-3" />
+      </UBadge>
+    </div>
+    <div v-else class="text-[11px] text-slate-500">
+      None — code-aware agents on this service follow their default guidance.
+    </div>
+  </div>
+</template>