@cat-factory/app 0.151.0 → 0.152.0

package/app/components/panels/ResultWindowShell.vue

@@ -17,9 +17,14 @@
 // The pick-one SELECTION of which window is active stays exactly the slice-2
 // `resolveComponentRegistry` in `StepResultViewHost.vue` — this shell only owns the
 // per-window chrome + behaviour, so windows convert one at a time behind it.
-import { computed } from 'vue'
+//
+// It also owns the one trailing section every step-backed window shows: the agent's effort
+// self-assessment (see the footer block below), so a window never renders it itself.
+import { computed, ref } from 'vue'
 import { useModalBehavior } from '@modular-vue/core'
 import StepRestartControl from '~/components/panels/StepRestartControl.vue'
+import StepEffortReport from '~/components/panels/StepEffortReport.vue'
+import { effortBand, effortHint } from '~/utils/effort'
 
 /** A pipeline step reference — passed by step-result windows to surface the shared
  *  "restart from here" control. `StepRestartControl` self-hides for an off-path open
@@ -72,6 +77,32 @@ const { dialogRef } = useModalBehavior({
   onClose: requestClose,
 })
 
+// The active step's effort self-assessment (how hard the work was, what reduced its
+// effectiveness, the obstacles it hit), rendered as a collapsible footer under EVERY window.
+// Resolved from the result-view seam itself rather than a per-window prop: the host mounts
+// exactly one window — the active `ui.resultView` — so a window can't opt out, forget to pass
+// it, or drift in where it puts it. An off-path open (a block-keyed window with no step) and a
+// step whose agent wrote no report both resolve to null, and the footer disappears.
+const ui = useUiStore()
+const execution = useExecutionStore()
+const effortReport = computed(() => {
+  const view = ui.resultView
+  if (!view || view.instanceId === null || view.stepIndex === null) return null
+  return execution.getInstance(view.instanceId)?.steps[view.stepIndex]?.effortReport ?? null
+})
+// Collapsed by default — the windows own the vertical space, and the row already carries the
+// difficulty plus the gist of what held the agent back.
+const effortOpen = ref(false)
+const hint = computed(() => (effortReport.value ? effortHint(effortReport.value) : null))
+const CHIP_CLASS = {
+  easy: 'bg-emerald-500/15 text-emerald-300',
+  moderate: 'bg-amber-500/15 text-amber-300',
+  hard: 'bg-rose-500/15 text-rose-300',
+} as const
+const chipClass = computed(() =>
+  effortReport.value ? CHIP_CLASS[effortBand(effortReport.value.difficulty)] : '',
+)
+
 const WIDTH: Record<'3xl' | '4xl' | '5xl', string> = {
   '3xl': 'max-w-3xl',
   '4xl': 'max-w-4xl',
@@ -135,6 +166,44 @@ const panelClass = computed(() => [
         </header>
         <!-- The window body. -->
         <slot />
+
+        <!-- Shared trailing section: the container agent's effort self-assessment, under the
+             window's own detail. Collapsed to a one-line row (difficulty + what held it back)
+             so it can't crowd a window out; expands in place. -->
+        <section
+          v-if="effortReport"
+          class="shrink-0 border-t border-slate-800 bg-slate-900/60"
+          data-testid="result-window-effort"
+        >
+          <button
+            type="button"
+            class="flex w-full items-center gap-2 px-5 py-2 text-start hover:bg-slate-800/40"
+            :aria-expanded="effortOpen"
+            data-testid="result-window-effort-toggle"
+            @click="effortOpen = !effortOpen"
+          >
+            <UIcon name="i-lucide-gauge" class="h-3.5 w-3.5 shrink-0 text-slate-400" />
+            <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+              {{ t('panels.stepDetail.effort.heading') }}
+            </span>
+            <span
+              class="shrink-0 rounded px-1.5 py-0.5 text-[11px] font-medium tabular-nums"
+              :class="chipClass"
+            >
+              {{ t('panels.stepDetail.effort.outOfTen', { value: effortReport.difficulty }) }}
+            </span>
+            <span v-if="hint" class="min-w-0 flex-1 truncate text-[12px] text-slate-400">
+              {{ hint }}
+            </span>
+            <UIcon
+              :name="effortOpen ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'"
+              class="ms-auto h-3.5 w-3.5 shrink-0 text-slate-500"
+            />
+          </button>
+          <div v-if="effortOpen" class="max-h-56 overflow-y-auto px-5 pb-3">
+            <StepEffortReport :report="effortReport" variant="flat" />
+          </div>
+        </section>
       </div>
     </div>
   </Teleport>

package/app/components/panels/StepEffortReport.vue

@@ -3,9 +3,18 @@
 // (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.
+//
+// Two callers, one renderer: the generic step-detail panel drops it in as a `card` (its own
+// heading + border, sitting among the other detail sections), and `ResultWindowShell`'s
+// collapsible footer embeds it `flat` — the disclosure row is already the heading there, so a
+// second one plus a nested border would just be chrome inside chrome.
 import type { AgentEffortReport } from '~/types/execution'
+import { effortBand } from '~/utils/effort'
 
-const props = defineProps<{ report: AgentEffortReport }>()
+const props = withDefaults(
+  defineProps<{ report: AgentEffortReport; variant?: 'card' | 'flat' }>(),
+  { variant: 'card' },
+)
 const { t } = useI18n()
 
 // Clamp for the bar width; the schema already bounds 1..10 but be defensive against a stray value.
@@ -13,21 +22,19 @@ 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',
-)
+const BAR_CLASS = { easy: 'bg-emerald-400', moderate: 'bg-amber-400', hard: 'bg-rose-400' } as const
+const difficultyClass = computed(() => BAR_CLASS[effortBand(props.report.difficulty)])
 </script>
 
 <template>
   <section
     data-testid="step-effort-report"
-    class="scroll-mt-4 rounded-xl border border-slate-800 bg-slate-900/50 p-4"
+    :class="
+      variant === 'card' ? 'scroll-mt-4 rounded-xl border border-slate-800 bg-slate-900/50 p-4' : ''
+    "
   >
     <div
+      v-if="variant === 'card'"
       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" />

package/app/utils/effort.spec.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest'
+import { effortBand, effortHint } from './effort'
+
+describe('effortBand', () => {
+  it('bands the 1..10 self-rating at the shared thresholds', () => {
+    expect(effortBand(1)).toBe('easy')
+    expect(effortBand(4)).toBe('easy')
+    expect(effortBand(5)).toBe('moderate')
+    expect(effortBand(7)).toBe('moderate')
+    expect(effortBand(8)).toBe('hard')
+    expect(effortBand(10)).toBe('hard')
+  })
+})
+
+describe('effortHint', () => {
+  it('prefers what held the agent back over the work summary', () => {
+    expect(
+      effortHint({
+        difficulty: 7,
+        summary: 'Refactored the parser.',
+        reducedEffectiveness: 'Flaky test tooling.',
+      }),
+    ).toBe('Flaky test tooling.')
+  })
+
+  it('falls back to the summary, then to nothing', () => {
+    expect(effortHint({ difficulty: 3, summary: 'Straightforward.' })).toBe('Straightforward.')
+    expect(effortHint({ difficulty: 3 })).toBeNull()
+  })
+})

package/app/utils/effort.ts

@@ -0,0 +1,29 @@
+import type { AgentEffortReport } from '~/types/execution'
+
+/**
+ * Presentation helpers for a container agent's effort self-assessment
+ * (`PipelineStep.effortReport` — how hard the work was, what reduced its effectiveness,
+ * the obstacles it hit). Shared by the two surfaces that render it: the full card in the
+ * generic step-detail panel (`StepEffortReport.vue`) and the collapsible footer every
+ * dedicated result window gets from `ResultWindowShell.vue`. The band thresholds live
+ * here so the two can't drift into disagreeing about what counts as a hard run.
+ */
+
+/** The difficulty band a 1..10 self-rating falls into. */
+export type EffortBand = 'easy' | 'moderate' | 'hard'
+
+/** Band a report's difficulty: 1-4 easy, 5-7 moderate, 8-10 hard. */
+export function effortBand(difficulty: number): EffortBand {
+  if (difficulty >= 8) return 'hard'
+  if (difficulty >= 5) return 'moderate'
+  return 'easy'
+}
+
+/**
+ * The one-line gist for a collapsed footer row: what held the agent back, else its
+ * summary of the work. Null when the agent rated the run but wrote no prose, so the
+ * row falls back to the difficulty chip alone.
+ */
+export function effortHint(report: AgentEffortReport): string | null {
+  return report.reducedEffectiveness ?? report.summary ?? null
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.151.0",
+  "version": "0.152.0",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",
@@ -40,7 +40,7 @@
     "valibot": "^1.4.2",
     "vue": "3.5.40",
     "wretch": "^3.0.9",
-    "@cat-factory/contracts": "0.159.0"
+    "@cat-factory/contracts": "0.160.0"
   },
   "devDependencies": {
     "@toad-contracts/testing": "0.3.2",