@cat-factory/app 0.147.7 → 0.149.0

package/app/components/board/AddTaskModal.vue

@@ -21,6 +21,9 @@ import type {
   TaskTypeFields,
 } from '~/types/domain'
 import { DOC_KINDS, DOC_KIND_FIELDS } from '~/types/domain'
+import { resolveComponentRegistry } from '@modular-vue/core'
+import { useReactiveSlots } from '@modular-vue/runtime'
+import type { AppSlots, ResultViewContribution } from '~/modular/slots'
 import ContextDocumentPicker from '~/components/documents/ContextDocumentPicker.vue'
 import ContextIssuePicker from '~/components/tasks/ContextIssuePicker.vue'
 import FragmentSelector from '~/components/fragments/FragmentSelector.vue'
@@ -131,6 +134,54 @@ const reviewFocus = ref('')
 const fragmentIds = ref<string[]>([])
 const isReview = computed(() => taskType.value === 'review')
 
+// Custom (deployment-registered) task types — the frontend-extension-mechanism slice B twin of
+// custom agent kinds. The task-types store merges CODE-shipped (`taskTypes` slot) + BACKEND
+// (snapshot `customTaskTypes`) into one catalog; the picker offers them alongside the built-ins.
+// A document repo only accepts document/spike (server-rejected otherwise), so custom types are
+// hidden there — mirroring the built-in `isDocRepo` filter.
+const taskTypesStore = useTaskTypesStore()
+const customTaskTypes = computed(() => (isDocRepo.value ? [] : taskTypesStore.customTaskTypes))
+const selectedCustomType = computed(() =>
+  customTaskTypes.value.find((tt) => tt.taskType === taskType.value),
+)
+// Descriptor-field values for a selected custom type (or a bespoke form panel's own bag), folded
+// into `taskTypeFields.custom` on submit. Cleared when the type changes / the modal reopens.
+const customFieldValues = ref<Record<string, string | number>>({})
+// A bespoke create-form section paired to the custom type's `formPanel` id via the
+// `taskTypeFormPanels` slot; shown INSTEAD of the descriptor fields. Unpaired ⇒ descriptor fields
+// (degrade, never crash) — the same pairing shape as the result-view windows.
+const appSlots = useReactiveSlots<AppSlots>()
+const formPanelRegistry = computed(() =>
+  resolveComponentRegistry((appSlots.value.taskTypeFormPanels ?? []) as ResultViewContribution[]),
+)
+const customFormPanel = computed(() => {
+  const id = selectedCustomType.value?.formPanel
+  return id ? (formPanelRegistry.value.get(id) ?? null) : null
+})
+// Whether every REQUIRED descriptor field of the selected custom type has a value. Only the
+// descriptor path is enforced up front — a bespoke `formPanel` owns its own validation, so we
+// don't block on it (nor can we read its required semantics). No custom type selected (or none
+// of its fields are required) ⇒ trivially satisfied. Folded into `canAdd` so the required marker
+// the form renders is actually honoured before submit.
+const customRequiredFieldsFilled = computed(() => {
+  const custom = selectedCustomType.value
+  if (!custom || customFormPanel.value) return true
+  return (custom.fields ?? []).every((field) => {
+    if (!field.required) return true
+    const raw = customFieldValues.value[field.key]
+    return raw !== undefined && String(raw).trim() !== ''
+  })
+})
+// The type picker: the built-in choices (i18n labels) + the custom types (their wire presentation).
+const typeChoices = computed<{ value: TaskTypeChoice; label: string; icon: string }[]>(() => [
+  ...TASK_TYPES.value,
+  ...customTaskTypes.value.map((tt) => ({
+    value: tt.taskType as TaskTypeChoice,
+    label: tt.presentation.label,
+    icon: tt.presentation.icon,
+  })),
+])
+
 // Parse the PR-reference input into the contract fields: a bare positive integer (optionally
 // `#`-prefixed) becomes `prNumber` (a PR on the service's linked repo); anything else is taken
 // as a full URL (`prUrl`). Returns undefined when blank or unparseable — the caller uses that
@@ -196,6 +247,33 @@ const DOC_FIELD_PLACEHOLDER_KEYS: Record<DocKindFieldKey, string> = {
 }
 const SEVERITIES = ['low', 'medium', 'high', 'critical'] as const
 
+// A CUSTOM (deployment-registered) task type: fold the collected values into the sparse
+// `taskTypeFields.custom` bag. A bespoke form panel owns the whole bag (taken verbatim); the
+// descriptor path reads only the declared fields, coercing a `number` descriptor's string input.
+function buildCustomTypeFields(): TaskTypeFields | undefined {
+  const custom = selectedCustomType.value
+  if (!custom) return undefined
+  const bag: Record<string, string | number> = {}
+  if (customFormPanel.value) {
+    for (const [key, value] of Object.entries(customFieldValues.value)) {
+      if (value !== undefined && value !== '') bag[key] = value
+    }
+  } else {
+    for (const field of custom.fields ?? []) {
+      const raw = customFieldValues.value[field.key]
+      if (raw === undefined || raw === '') continue
+      if (field.type === 'number') {
+        // Skip a non-numeric value rather than sending NaN (which serialises to null on the wire).
+        const n = Number(raw)
+        if (Number.isFinite(n)) bag[field.key] = n
+      } else {
+        bag[field.key] = raw
+      }
+    }
+  }
+  return Object.keys(bag).length ? { custom: bag } : undefined
+}
+
 function buildTypeFields(): TaskTypeFields | undefined {
   if (taskType.value === 'bug') {
     const f: TaskTypeFields = {}
@@ -238,7 +316,7 @@ function buildTypeFields(): TaskTypeFields | undefined {
     if (reviewFocus.value.trim()) f.reviewFocus = reviewFocus.value.trim()
     return Object.keys(f).length ? f : undefined
   }
-  return undefined
+  return buildCustomTypeFields()
 }
 
 // For a recurring task, the schedule attaches to the service frame: the container itself
@@ -346,7 +424,13 @@ const DEFAULT_PIPELINE_FOR_TYPE: Partial<Record<TaskTypeChoice, string>> = {
   review: 'pl_review',
 }
 watch(taskType, (next) => {
-  const preset = DEFAULT_PIPELINE_FOR_TYPE[next]
+  // A custom type owns a fresh field bag on every switch (its descriptors differ per type).
+  customFieldValues.value = {}
+  // Pre-select the type's default pipeline: a custom type's registered `defaultPipelineId`, else
+  // the built-in map. (For a custom type with no default, `BoardService` applies the registry
+  // default at creation, so leaving the picker unset is fine.)
+  const custom = customTaskTypes.value.find((tt) => tt.taskType === next)
+  const preset = custom?.defaultPipelineId ?? DEFAULT_PIPELINE_FOR_TYPE[next]
   if (!preset) return
   const match = pipelines.pipelines.find((p) => p.id === preset)
   if (match) pipelineId.value = match.id
@@ -502,6 +586,7 @@ watch(open, (isOpen) => {
   docOutlineHints.value = ''
   reviewPrRef.value = ''
   reviewFocus.value = ''
+  customFieldValues.value = {}
   // Pre-seed the best-practice fragments from the enclosing service's standards, so a new task
   // ships with its service's fragments already selected (and freely add/removable here). The task
   // OWNS this selection from creation — the engine folds exactly these, without re-unioning the
@@ -587,6 +672,8 @@ const canAdd = computed(() => {
     configValue(RALPH_VALIDATION_COMMAND_ID, '').trim().length === 0
   )
     return false
+  // A custom type's required descriptor fields must be filled (its form renders them as required).
+  if (!customRequiredFieldsFilled.value) return false
   return true
 })
 
@@ -667,12 +754,13 @@ async function add() {
         <UFormField :label="t('board.addTask.typeLabel')">
           <div class="flex flex-wrap gap-1">
             <UButton
-              v-for="ty in TASK_TYPES"
+              v-for="ty in typeChoices"
               :key="ty.value"
               :color="taskType === ty.value ? 'primary' : 'neutral'"
               :variant="taskType === ty.value ? 'soft' : 'ghost'"
               :icon="ty.icon"
               size="xs"
+              :data-testid="`task-type-${ty.value}`"
               @click="
                 () => {
                   taskType = ty.value
@@ -949,6 +1037,61 @@ async function add() {
             </UFormField>
           </div>
 
+          <!-- A CUSTOM (deployment-registered) task type: a bespoke create-form section when its
+               `formPanel` is paired to the `taskTypeFormPanels` slot, else the descriptor-driven
+               `fields` the type declares. None of the built-in `v-if` branches above match a
+               namespaced custom type, so this renders on its own. -->
+          <div v-if="selectedCustomType" class="space-y-3" data-testid="custom-task-fields">
+            <component
+              :is="customFormPanel"
+              v-if="customFormPanel"
+              :task-type="selectedCustomType"
+              :model-value="customFieldValues"
+              @update:model-value="customFieldValues = $event"
+            />
+            <template v-else>
+              <UFormField
+                v-for="field in selectedCustomType.fields ?? []"
+                :key="field.key"
+                :label="field.label"
+                :help="field.help"
+                :required="field.required"
+              >
+                <div v-if="field.type === 'select'" class="flex flex-wrap gap-1">
+                  <UButton
+                    v-for="opt in field.options ?? []"
+                    :key="opt.value"
+                    :color="customFieldValues[field.key] === opt.value ? 'primary' : 'neutral'"
+                    :variant="customFieldValues[field.key] === opt.value ? 'soft' : 'ghost'"
+                    size="xs"
+                    :data-testid="`custom-field-${field.key}-${opt.value}`"
+                    @click="() => (customFieldValues[field.key] = opt.value)"
+                  >
+                    {{ opt.label }}
+                  </UButton>
+                </div>
+                <UTextarea
+                  v-else-if="field.type === 'textarea'"
+                  v-model="customFieldValues[field.key]"
+                  :rows="2"
+                  :maxlength="field.maxLength"
+                  :placeholder="field.placeholder"
+                  :data-testid="`custom-field-${field.key}`"
+                  class="w-full"
+                />
+                <UInput
+                  v-else
+                  v-model="customFieldValues[field.key]"
+                  :type="field.type === 'number' ? 'number' : 'text'"
+                  :maxlength="field.maxLength"
+                  :placeholder="field.placeholder"
+                  :data-testid="`custom-field-${field.key}`"
+                  class="w-full"
+                />
+              </UFormField>
+            </template>
+          </div>
+
           <div class="grid grid-cols-2 gap-3">
             <UFormField :label="t('board.addTask.pipeline')">
               <PipelinePicker

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Block } from '~/types/domain'
-import { STATUS_META, MODULE_META } from '~/utils/catalog'
+import { STATUS_META, MODULE_META, taskTypeMeta } from '~/utils/catalog'
 import AgentFailureCard from '~/components/board/AgentFailureCard.vue'
 import TaskPipelineMini from './TaskPipelineMini.vue'
 
@@ -18,6 +18,22 @@ const { confirm } = useConfirm()
 
 const task = computed<Block | undefined>(() => board.getBlock(props.taskId))
 const statusMeta = computed(() => (task.value ? STATUS_META[task.value.status] : null))
+
+// A type badge for any NON-default task type — built-in (bug/document/spike/review/ralph) or a
+// deployment CUSTOM type (resolved through the `taskTypeMeta` read-model, which degrades an
+// unregistered namespaced type to the `feature` presentation, so a stale id never breaks the card).
+// `feature` is the implicit default and shows no badge to keep ordinary cards uncluttered. A
+// built-in type's label is an i18n key; a custom type's is a literal from its wire presentation.
+const typeBadge = computed(() => {
+  const tt = task.value?.taskType
+  if (!tt || tt === 'feature') return null
+  const meta = taskTypeMeta(tt)
+  return {
+    icon: meta.icon,
+    color: meta.color,
+    label: meta.labelKey ? t(meta.labelKey) : (meta.label ?? tt),
+  }
+})
 const selected = computed(() => ui.selectedBlockId === props.taskId)
 
 // Drag-to-connect: dragging from this card's handle onto another task makes THAT task
@@ -215,6 +231,18 @@ function selectTask() {
          on its own row rather than stealing horizontal space from the title. -->
     <div class="flex items-center gap-1.5">
       <span class="h-2 w-2 shrink-0 rounded-full" :style="{ backgroundColor: statusMeta.color }" />
+      <!-- Task-type badge (non-`feature` only): the type's icon, tinted with its accent, label on
+           hover. Renders a built-in OR a deployment-registered custom type via `taskTypeMeta`. -->
+      <span
+        v-if="typeBadge"
+        class="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded"
+        :style="{ color: typeBadge.color, backgroundColor: `${typeBadge.color}22` }"
+        :title="typeBadge.label"
+        :data-task-type-badge="task.taskType"
+        data-testid="task-type-badge"
+      >
+        <UIcon :name="typeBadge.icon" class="h-2.5 w-2.5" />
+      </span>
       <UIcon
         v-if="schedule"
         name="i-lucide-repeat"

package/app/components/fragments/FragmentLibraryManager.vue

@@ -135,6 +135,80 @@ const draftValid = computed(
   () => draft.value.title.trim() && draft.value.summary.trim() && draft.value.body.trim(),
 )
 
+// ---- auto-generate a title from the fragment's content (inline LLM call) ---
+// Shared by the create form and the inline editor; keyed so only the button that triggered it
+// spins. Generation needs a body (the title is derived from it); the summary rides along.
+const generatingTitleFor = ref<string | null>(null)
+async function autofillTitle(
+  key: string,
+  get: () => { body: string; summary?: string },
+  set: (title: string) => void,
+) {
+  const { body, summary } = get()
+  if (!body.trim() || generatingTitleFor.value) return
+  generatingTitleFor.value = key
+  try {
+    const title = await library.generateTitle({
+      body: body.trim(),
+      summary: summary?.trim() || undefined,
+    })
+    set(title)
+  } catch (e) {
+    notifyError(t('fragments.authored.titleGenFailed'), e)
+  } finally {
+    generatingTitleFor.value = null
+  }
+}
+
+// ---- edit an existing hand-authored fragment (title / summary / body / tags) ---
+const editDraft = ref<{
+  id: string
+  title: string
+  summary: string
+  body: string
+  tags: string
+} | null>(null)
+function startEdit(f: (typeof library.fragments)[number]) {
+  editDraft.value = {
+    id: f.id,
+    title: f.title,
+    summary: f.summary,
+    body: f.body,
+    tags: (f.tags ?? []).join(', '),
+  }
+}
+function cancelEdit() {
+  editDraft.value = null
+}
+const editValid = computed(
+  () =>
+    !!editDraft.value &&
+    !!editDraft.value.title.trim() &&
+    !!editDraft.value.summary.trim() &&
+    !!editDraft.value.body.trim(),
+)
+async function saveEdit() {
+  const d = editDraft.value
+  if (!d || !editValid.value) return
+  await withRow(`edit:${d.id}`, async () => {
+    try {
+      await library.update(d.id, {
+        title: d.title.trim(),
+        summary: d.summary.trim(),
+        body: d.body.trim(),
+        tags: d.tags
+          .split(',')
+          .map((t) => t.trim())
+          .filter(Boolean),
+      })
+      editDraft.value = null
+      toast.add({ title: t('fragments.toast.updated'), icon: 'i-lucide-check' })
+    } catch (e) {
+      notifyError(t('fragments.toast.updateFailed'), e)
+    }
+  })
+}
+
 async function createFragment() {
   if (!draftValid.value) return
   creating.value = true
@@ -522,26 +596,96 @@ async function unlinkSource(id: string) {
         <div
           v-for="f in library.fragments"
           :key="f.id"
-          class="flex items-start gap-2 rounded-md border border-slate-800 bg-slate-900/60 p-3"
+          class="rounded-md border border-slate-800 bg-slate-900/60 p-3"
         >
-          <div class="min-w-0">
-            <div class="flex items-center gap-2">
-              <span class="font-medium text-slate-100">{{ f.title }}</span>
-              <UBadge v-if="f.source" size="xs" color="info" variant="subtle">{{
-                t('fragments.authored.fromRepo')
-              }}</UBadge>
+          <!-- Inline editor (hand-authored fragments): title / summary / body / tags, with the
+               same auto-generate-title button as the create form. -->
+          <div v-if="editDraft && editDraft.id === f.id" class="flex flex-col gap-2">
+            <div class="flex gap-2">
+              <UInput
+                v-model="editDraft.title"
+                :placeholder="t('fragments.authored.titlePlaceholder')"
+                class="flex-1"
+              />
+              <UButton
+                icon="i-lucide-wand-2"
+                size="sm"
+                variant="outline"
+                :disabled="!editDraft.body.trim()"
+                :loading="generatingTitleFor === `edit:${f.id}`"
+                :title="t('fragments.authored.generateTitleHint')"
+                @click="
+                  autofillTitle(
+                    `edit:${f.id}`,
+                    () => ({ body: editDraft!.body, summary: editDraft!.summary }),
+                    (title) => {
+                      if (editDraft) editDraft.title = title
+                    },
+                  )
+                "
+              >
+                {{ t('fragments.authored.generateTitle') }}
+              </UButton>
+            </div>
+            <UInput
+              v-model="editDraft.summary"
+              :placeholder="t('fragments.authored.summaryPlaceholder')"
+            />
+            <UTextarea
+              v-model="editDraft.body"
+              :placeholder="t('fragments.authored.bodyPlaceholder')"
+              :rows="4"
+            />
+            <UInput
+              v-model="editDraft.tags"
+              :placeholder="t('fragments.authored.tagsPlaceholder')"
+            />
+            <div class="flex gap-2">
+              <UButton
+                size="sm"
+                :disabled="!editValid"
+                :loading="rowBusy(`edit:${f.id}`)"
+                @click="saveEdit"
+              >
+                {{ t('common.save') }}
+              </UButton>
+              <UButton size="sm" variant="ghost" color="neutral" @click="cancelEdit">
+                {{ t('common.cancel') }}
+              </UButton>
+            </div>
+          </div>
+          <!-- Row -->
+          <div v-else class="flex items-start gap-2">
+            <div class="min-w-0">
+              <div class="flex items-center gap-2">
+                <span class="font-medium text-slate-100">{{ f.title }}</span>
+                <UBadge v-if="f.source" size="xs" color="info" variant="subtle">{{
+                  t('fragments.authored.fromRepo')
+                }}</UBadge>
+              </div>
+              <p class="text-sm text-slate-400">{{ f.summary }}</p>
+            </div>
+            <div class="ms-auto flex gap-1">
+              <!-- Editing a repo-SOURCED fragment locally would be overwritten on the next sync,
+                   so only hand-authored fragments are editable here. -->
+              <UButton
+                v-if="!f.source"
+                icon="i-lucide-pencil"
+                size="xs"
+                variant="ghost"
+                :title="t('common.edit')"
+                @click="startEdit(f)"
+              />
+              <UButton
+                icon="i-lucide-trash-2"
+                size="xs"
+                color="error"
+                variant="ghost"
+                :loading="rowBusy(`remove:${f.id}`)"
+                @click="removeFragment(f.id)"
+              />
             </div>
-            <p class="text-sm text-slate-400">{{ f.summary }}</p>
           </div>
-          <UButton
-            icon="i-lucide-trash-2"
-            size="xs"
-            color="error"
-            variant="ghost"
-            class="ms-auto"
-            :loading="rowBusy(`remove:${f.id}`)"
-            @click="removeFragment(f.id)"
-          />
         </div>
         <p v-if="!library.fragments.length" class="text-sm text-slate-500">
           {{
@@ -554,7 +698,33 @@ async function unlinkSource(id: string) {
         <div class="rounded-md border border-slate-800 p-3">
           <p class="mb-2 text-sm font-medium">{{ t('fragments.authored.addTitle') }}</p>
           <div class="flex flex-col gap-2">
-            <UInput v-model="draft.title" :placeholder="t('fragments.authored.titlePlaceholder')" />
+            <div class="flex gap-2">
+              <UInput
+                v-model="draft.title"
+                :placeholder="t('fragments.authored.titlePlaceholder')"
+                class="flex-1"
+              />
+              <UButton
+                icon="i-lucide-wand-2"
+                size="sm"
+                variant="outline"
+                :disabled="!draft.body.trim()"
+                :loading="generatingTitleFor === 'create'"
+                :title="t('fragments.authored.generateTitleHint')"
+                data-testid="fragment-generate-title"
+                @click="
+                  autofillTitle(
+                    'create',
+                    () => ({ body: draft.body, summary: draft.summary }),
+                    (title) => {
+                      draft.title = title
+                    },
+                  )
+                "
+              >
+                {{ t('fragments.authored.generateTitle') }}
+              </UButton>
+            </div>
             <UInput
               v-model="draft.summary"
               :placeholder="t('fragments.authored.summaryPlaceholder')"

package/app/components/panels/AgentStepDetail.vue

@@ -483,6 +483,17 @@ async function copyOutput() {
                    it raised and the greenlight verdict; plus the fixer-loop phase -->
               <StepTestReport v-if="testReport" :report="testReport" :phase="testPhase" />
 
+              <!-- code/PR reviewer's best-practice adherence: per standard, a 1..10 rating of how
+                   well the change adheres + the issues it surfaced. Only on a review step. -->
+              <StepFragmentAdherence
+                v-if="step.fragmentAdherence?.length"
+                :items="step.fragmentAdherence"
+              />
+
+              <!-- container agent's effort self-assessment (how hard it was, what reduced its
+                   effectiveness, key obstacles). Only when the agent reported one. -->
+              <StepEffortReport v-if="step.effortReport" :report="step.effortReport" />
+
               <!-- edit-then-approve: a direct editor over the raw conclusions; the
                    edits become the approved proposal that flows to the next step -->
               <section v-if="editing" class="scroll-mt-4">

package/app/components/panels/StepEffortReport.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+// The container agent's effort self-assessment, surfaced in run details: how hard the work was
+// (1..10), what reduced its effectiveness, and the key obstacles it hit. Populated by the harness
+// from the agent's sentinel file and recorded on the step (`step.effortReport`). Rendered only when
+// present, so a run on an older harness image (or an agent that wrote none) shows nothing.
+import type { AgentEffortReport } from '~/types/execution'
+
+const props = defineProps<{ report: AgentEffortReport }>()
+const { t } = useI18n()
+
+// Clamp for the bar width; the schema already bounds 1..10 but be defensive against a stray value.
+const difficultyPct = computed(() =>
+  Math.min(100, Math.max(0, (props.report.difficulty / 10) * 100)),
+)
+// Colour the difficulty by band: easy (emerald) → moderate (amber) → hard (rose).
+const difficultyClass = computed(() =>
+  props.report.difficulty >= 8
+    ? 'bg-rose-400'
+    : props.report.difficulty >= 5
+      ? 'bg-amber-400'
+      : 'bg-emerald-400',
+)
+</script>
+
+<template>
+  <section
+    data-testid="step-effort-report"
+    class="scroll-mt-4 rounded-xl border border-slate-800 bg-slate-900/50 p-4"
+  >
+    <div
+      class="mb-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-400"
+    >
+      <UIcon name="i-lucide-gauge" class="h-3.5 w-3.5" />
+      <span>{{ t('panels.stepDetail.effort.heading') }}</span>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <span class="text-[12px] text-slate-300">{{ t('panels.stepDetail.effort.difficulty') }}</span>
+      <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-slate-700/60">
+        <div
+          class="h-full rounded-full"
+          :class="difficultyClass"
+          :style="{ width: `${difficultyPct}%` }"
+        />
+      </div>
+      <span data-testid="step-effort-difficulty" class="text-[12px] font-medium text-slate-200">
+        {{ t('panels.stepDetail.effort.outOfTen', { value: report.difficulty }) }}
+      </span>
+    </div>
+
+    <p
+      v-if="report.summary"
+      class="mt-2 whitespace-pre-wrap text-[13px] leading-relaxed text-slate-300"
+    >
+      {{ report.summary }}
+    </p>
+
+    <div v-if="report.reducedEffectiveness" class="mt-3">
+      <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+        {{ t('panels.stepDetail.effort.reduced') }}
+      </p>
+      <p class="mt-0.5 whitespace-pre-wrap text-[12px] text-slate-300">
+        {{ report.reducedEffectiveness }}
+      </p>
+    </div>
+
+    <div v-if="report.obstacles?.length" class="mt-3">
+      <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+        {{ t('panels.stepDetail.effort.obstacles') }}
+      </p>
+      <ul class="mt-0.5 space-y-1">
+        <li
+          v-for="(obstacle, i) in report.obstacles"
+          :key="i"
+          class="flex items-start gap-1.5 text-[12px] text-slate-300"
+        >
+          <UIcon
+            name="i-lucide-alert-triangle"
+            class="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-400/80"
+          />
+          <span>{{ obstacle }}</span>
+        </li>
+      </ul>
+    </div>
+  </section>
+</template>