@cat-factory/app 0.192.0 → 0.194.0

package/app/components/board/AddTaskModal.vue

@@ -387,13 +387,15 @@ const fragmentPool = computed(() => fragments.forBlockType(frame.value?.type ??
 
 // Hide UI-testing pipelines (`tester-ui` / `visual-confirmation`) when the target frame has no
 // UI to exercise — they'd be refused server-side (see utils/pipeline + the backend gate). Also
-// hide `'recurring'`-only pipelines (a one-off task start of one is refused at run start) and,
-// for a `document` / `review` task, every pipeline whose purpose doesn't match (a doc task authors
-// a doc, a review task reviews a PR — only document / review pipelines are relevant, per the
-// `purpose` classifier). Re-filters as the chosen task type changes.
+// hide `'recurring'`-only pipelines (a one-off task start of one is refused at run start) and every
+// pipeline whose purpose doesn't match the chosen task type (a doc task authors a doc, a review task
+// reviews a PR, and a `feature`/`bug` task ships code — so it is offered build + research only, not
+// the doc/review/planning presets). `blockLevel: 'task'` is passed literally because this modal only
+// ever creates a task leaf, which also drops the three planning presets the backend would refuse.
+// Re-filters as the chosen task type changes.
 const selectablePipelines = computed(() =>
   pipelines.pipelines.filter((p) =>
-    pipelineAllowedForManualStart(p, frame.value, board.blocks, taskType.value),
+    pipelineAllowedForManualStart(p, frame.value, board.blocks, taskType.value, 'task'),
   ),
 )
 // Some task types want their type-default pipeline surfaced in the modal up front, so picking the

package/app/components/board/RecurringPipelineModal.vue

@@ -74,9 +74,15 @@ const selectedPipeline = computed(() => pipelines.getPipeline(pipelineId.value))
 
 // Infer the template from the picked pipeline so the backend seeds the right block
 // description (and so we know to show the tracker config).
+//
+// Only the pipelines whose SHAPE is specific to one kind of recurring work can be inferred this
+// way. `dep-update` no longer can: its pipeline was retired in the catalog collapse (it was the
+// ordinary build tail under a recurring name), so a dependency-update schedule now runs an ordinary
+// build rung — which is also what every generic schedule runs, so inferring the template from it
+// would mislabel all of them. The template itself survives for an explicit API caller; see
+// `scheduleTemplateSchema`.
 const template = computed<ScheduleTemplate>(() => {
   if (pipelineId.value === 'pl_tech_debt') return 'tech-debt'
-  if (pipelineId.value === 'pl_dep_update') return 'dep-update'
   if (pipelineId.value === 'pl_bug_triage') return 'bug-triage'
   return 'custom'
 })
@@ -99,11 +105,10 @@ watch(open, (isOpen) => {
   if (!isOpen) return
   name.value = ''
   description.value = ''
-  // Default to the Dependency-updates pipeline if present, else the first.
-  pipelineId.value =
-    pipelines.pipelines.find((p) => p.id === 'pl_dep_update')?.id ??
-    pipelines.pipelines[0]?.id ??
-    ''
+  // Default to the first schedulable pipeline, which is the ladder's own default rung. There is no
+  // longer a canned recurring build preset to prefer — the dependency-update pipeline was the
+  // ordinary build tail under another name — so the default build is the honest starting point.
+  pipelineId.value = selectablePipelines.value[0]?.id ?? pipelines.pipelines[0]?.id ?? ''
   recurrence.value = defaultRecurrence()
   onDemand.value = false
   saving.value = false

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

@@ -5,10 +5,10 @@ import DecisionBadge from './DecisionBadge.vue'
 import DraggableTask from './DraggableTask.vue'
 import InitiativeCard from './InitiativeCard.vue'
 import ModuleFrame from './ModuleFrame.vue'
+import ResizeGrips from './ResizeGrips.vue'
 import AgentFailureCard from '~/components/board/AgentFailureCard.vue'
 import AgentStopButton from '~/components/board/AgentStopButton.vue'
 import { useBlockDrag } from '~/composables/useBlockDrag'
-import { useFrameResize } from '~/composables/useFrameResize'
 import { useFrameStacking } from '~/composables/useFrameStacking'
 import { useViewport } from '~/composables/useViewport'
 
@@ -148,14 +148,6 @@ function onFrameHandle(e: PointerEvent) {
 // (see useFrameStacking + BoardCanvas's frameZIndex).
 const { enter: enterFrame, leave: leaveFrame } = useFrameStacking()
 
-// Miro-style frame resizing: drag the right / bottom edges or the corner. Handles
-// live on the expanded card's drop zone (see template); the composable clamps to
-// the frame's content extent and persists the size on release.
-const { startResize } = useFrameResize()
-function onResize(e: PointerEvent, edge: 'e' | 's' | 'se') {
-  if (block.value) startResize(block.value, e, edge)
-}
-
 function addTask() {
   ui.expandFrame(props.id)
   ui.openAddTask(props.id)
@@ -385,7 +377,7 @@ const ITEM_ICON: Record<string, string> = {
     <!-- ===================== EXPANDED: 2D canvas of tasks + modules ===================== -->
     <div
       v-else
-      class="overflow-visible rounded-2xl border bg-slate-900/95 shadow-2xl backdrop-blur"
+      class="relative overflow-visible rounded-2xl border bg-slate-900/95 shadow-2xl backdrop-blur"
       :class="[selected ? 'border-white' : 'border-slate-700', pulseClass]"
     >
       <div class="h-1.5 w-full rounded-t-2xl" :style="{ backgroundColor: accent }" />
@@ -563,16 +555,23 @@ const ITEM_ICON: Record<string, string> = {
             </div>
           </div>
 
-          <div class="flex items-center gap-2 text-[10px] uppercase tracking-wide text-slate-500">
-            <span>{{
-              t('board.frame.implemented', { merged: mergedTasks, total: taskCount })
+          <!-- Composition line. It deliberately does NOT carry a done/total tally: the
+               per-task status is already on every card in the canvas below, so the
+               frame-level "N/M implemented" was a second, coarser answer to a question
+               the canvas answers precisely — and the one people misread, since it counts
+               every task ever added to the service rather than the work in flight. What
+               stays is what the canvas can't show at a glance. -->
+          <div
+            v-if="modules.length || prTasks"
+            class="flex items-center gap-2 text-[10px] uppercase tracking-wide text-slate-500"
+          >
+            <span v-if="modules.length">{{
+              t('board.frame.moduleCount', { count: modules.length }, modules.length)
+            }}</span>
+            <span v-if="modules.length && prTasks" aria-hidden="true">·</span>
+            <span v-if="prTasks" class="text-emerald-400">{{
+              t('board.frame.prReadyCount', { count: prTasks })
             }}</span>
-            <span v-if="modules.length"
-              >· {{ t('board.frame.moduleCount', { count: modules.length }, modules.length) }}</span
-            >
-            <span v-if="prTasks" class="text-emerald-400"
-              >· {{ t('board.frame.prReadyCount', { count: prTasks }) }}</span
-            >
           </div>
         </div>
 
@@ -594,35 +593,18 @@ const ITEM_ICON: Record<string, string> = {
           >
             <UIcon name="i-lucide-plus" class="h-3.5 w-3.5" /> {{ t('board.frame.addFirstTask') }}
           </button>
-
-          <!-- resize handles (drag the borders to resize the service, Miro-style).
-               `nopan` (alongside `nodrag`) so the pane doesn't pan while resizing —
-               same reason as the header handle above. These stay PHYSICAL
-               (`right-0`, not `end-0`): the resize math in useFrameResize grows the
-               right/bottom edge from an unmirrored clientX/clientY delta, so a
-               logical (RTL-flipped) grip would render on the opposite edge from the
-               one the drag actually moves. -->
-          <div
-            class="nodrag nopan absolute right-0 top-0 h-full w-2 cursor-ew-resize touch-none hover:bg-sky-400/20 pointer-coarse:w-4"
-            :title="t('board.frame.dragToResize')"
-            @pointerdown="onResize($event, 'e')"
-          />
-          <div
-            class="nodrag nopan absolute bottom-0 left-0 h-2 w-full cursor-ns-resize touch-none hover:bg-sky-400/20 pointer-coarse:h-4"
-            :title="t('board.frame.dragToResize')"
-            @pointerdown="onResize($event, 's')"
-          />
-          <div
-            class="nodrag nopan absolute bottom-0 right-0 h-4 w-4 cursor-nwse-resize touch-none pointer-coarse:h-11 pointer-coarse:w-11"
-            :title="t('board.frame.dragToResize')"
-            @pointerdown="onResize($event, 'se')"
-          >
-            <span
-              class="absolute bottom-1 right-1 h-2 w-2 rounded-sm border-b-2 border-r-2 border-slate-500"
-            />
-          </div>
         </div>
       </div>
+
+      <!-- Every border and corner of the CARD is a resize grip (see ResizeGrips: the geometry,
+           the hit bands, and why a north/west drag translates the contents). They used to sit on
+           the inner drop zone's edge, 16px of padding inside the visible border and flush against
+           the content, where two thin strips read as scrollbars rather than as the frame's border.
+
+           The grips are PHYSICAL (`right-0`, not `end-0`): the resize math derives the box from an
+           unmirrored clientX/clientY delta, so a logical (RTL-flipped) grip would render on the
+           opposite border from the one the drag actually moves. -->
+      <ResizeGrips :block="block" tone="frame" />
     </div>
   </div>
 </template>

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import DraggableTask from './DraggableTask.vue'
+import ResizeGrips from './ResizeGrips.vue'
 import { MODULE_META } from '~/utils/catalog'
 import { useBlockDrag } from '~/composables/useBlockDrag'
-import { useFrameResize } from '~/composables/useFrameResize'
 
 const props = defineProps<{ moduleId: string }>()
 const board = useBoardStore()
@@ -25,14 +25,6 @@ const { draggingId, startDrag } = useBlockDrag()
 function onHandle(e: PointerEvent) {
   if (mod.value) startDrag(mod.value, e)
 }
-
-// Miro-style resizing, same as a service frame: drag the right / bottom edges or
-// the corner. The composable clamps to the module's content extent and persists
-// the size on release.
-const { startResize } = useFrameResize()
-function onResize(e: PointerEvent, edge: 'e' | 's' | 'se') {
-  if (mod.value) startResize(mod.value, e, edge)
-}
 </script>
 
 <template>
@@ -74,29 +66,8 @@ function onResize(e: PointerEvent, edge: 'e' | 's' | 'se') {
       <DraggableTask v-for="t in tasks" :key="t.id" :task-id="t.id" />
     </div>
 
-    <!-- resize handles (drag the borders to resize the module, Miro-style).
-         `nopan` (with `nodrag`) so resizing doesn't pan the pane. Kept PHYSICAL
-         (`right-0`, not `end-0`) for the same reason as the service-frame grips in
-         BlockNode: the resize delta is unmirrored, so a logical grip would sit on
-         the opposite edge from the one the drag moves. -->
-    <div
-      class="nodrag nopan absolute right-0 top-0 h-full w-2 cursor-ew-resize touch-none hover:bg-violet-400/20 pointer-coarse:w-4"
-      :title="t('board.frame.dragToResize')"
-      @pointerdown="onResize($event, 'e')"
-    />
-    <div
-      class="nodrag nopan absolute bottom-0 left-0 h-2 w-full cursor-ns-resize touch-none hover:bg-violet-400/20 pointer-coarse:h-4"
-      :title="t('board.frame.dragToResize')"
-      @pointerdown="onResize($event, 's')"
-    />
-    <div
-      class="nodrag nopan absolute bottom-0 right-0 h-4 w-4 cursor-nwse-resize touch-none pointer-coarse:h-11 pointer-coarse:w-11"
-      :title="t('board.frame.dragToResize')"
-      @pointerdown="onResize($event, 'se')"
-    >
-      <span
-        class="absolute bottom-1 right-1 h-2 w-2 rounded-sm border-b-2 border-r-2 border-violet-400/60"
-      />
-    </div>
+    <!-- Every border and corner of the module box is a resize grip, the same component (and so
+         the same hit bands + content-preserving north/west behaviour) the service frame uses. -->
+    <ResizeGrips :block="mod" tone="module" />
   </div>
 </template>

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

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import type { Block } from '~/types/domain'
+import { RESIZE_EDGES, type ResizeEdge, useFrameResize } from '~/composables/useFrameResize'
+
+// The eight border/corner grips of a resizable container (a service frame or a module), shared so
+// the two node components can't drift in hit area, geometry, or which borders exist.
+//
+// Each grip STRADDLES the border it moves — half outside the box, half inside — giving a 12px hit
+// band on a fine pointer (24px on a coarse one) while the DRAWN affordance stays a 2px bar on the
+// border itself. The grips used to live on the frame's inner drop zone, 16px inside the visible
+// border and flush against the content, where two thin strips read as scrollbars rather than as
+// the box's edge.
+//
+// Corners are rendered LAST so they win the overlap with both of their edges. `RESIZE_EDGES` is
+// ordered accordingly (edges first), and the whole set comes from the composable, so adding a
+// direction is one entry there rather than markup here.
+const props = defineProps<{
+  /** The container being resized. Its position/size are what the drag writes. */
+  block: Block
+  /** Which palette to draw in — a frame's grips are sky, a module's violet. */
+  tone: 'frame' | 'module'
+}>()
+
+const access = useWorkspaceAccess()
+const { resizingId, startResize } = useFrameResize()
+const resizing = computed(() => resizingId.value === props.block.id)
+
+// Which grip the pointer rests on, and which one it grabbed. The lit bar is a CHILD of the grip's
+// hit band, so a plain `hover:` utility on the bar is wrong (the pointer is over the band, not the
+// 2px bar); tracking it in state instead of a `group-hover/<name>:` variant means ONE predicate
+// lights the border whether the pointer is resting on it or dragging it. The drag reads `dragEdge`
+// rather than `hoverEdge` on purpose: the pointer routinely leaves the band mid-drag, and the
+// border it is moving must stay lit until the drag ends.
+const hoverEdge = ref<ResizeEdge | null>(null)
+const dragEdge = ref<ResizeEdge | null>(null)
+const lit = (edge: ResizeEdge) =>
+  resizing.value ? dragEdge.value === edge : hoverEdge.value === edge
+
+function onPointerDown(e: PointerEvent, edge: ResizeEdge) {
+  dragEdge.value = edge
+  startResize(props.block, e, edge)
+}
+
+// Tailwind needs literal class names, so the geometry is a static table rather than interpolated
+// strings. `box` positions the hit band (straddling, widened for a coarse pointer); `mark` draws
+// the lit affordance — a bar along an edge, an L at a corner, each anchored ON the border by
+// matching the box's own negative offset.
+interface GripStyle {
+  box: string
+  mark: string
+  /** Corners keep a faint mark at rest, so the gesture is discoverable without a hover. */
+  idle?: boolean
+}
+const GRIPS: Record<ResizeEdge, GripStyle> = {
+  n: {
+    box: '-top-1.5 left-0 h-3 w-full cursor-ns-resize pointer-coarse:-top-3 pointer-coarse:h-6',
+    mark: 'inset-x-3 top-1/2 h-0.5 -translate-y-1/2 rounded-full',
+  },
+  s: {
+    box: '-bottom-1.5 left-0 h-3 w-full cursor-ns-resize pointer-coarse:-bottom-3 pointer-coarse:h-6',
+    mark: 'inset-x-3 top-1/2 h-0.5 -translate-y-1/2 rounded-full',
+  },
+  e: {
+    box: '-right-1.5 top-0 h-full w-3 cursor-ew-resize pointer-coarse:-right-3 pointer-coarse:w-6',
+    mark: 'inset-y-3 left-1/2 w-0.5 -translate-x-1/2 rounded-full',
+  },
+  w: {
+    box: '-left-1.5 top-0 h-full w-3 cursor-ew-resize pointer-coarse:-left-3 pointer-coarse:w-6',
+    mark: 'inset-y-3 left-1/2 w-0.5 -translate-x-1/2 rounded-full',
+  },
+  ne: {
+    box: '-top-1.5 -right-1.5 h-5 w-5 cursor-nesw-resize pointer-coarse:-top-3 pointer-coarse:-right-3 pointer-coarse:h-11 pointer-coarse:w-11',
+    mark: 'right-1.5 top-1.5 h-2 w-2 rounded-sm border-r-2 border-t-2 pointer-coarse:right-3 pointer-coarse:top-3',
+  },
+  nw: {
+    box: '-left-1.5 -top-1.5 h-5 w-5 cursor-nwse-resize pointer-coarse:-left-3 pointer-coarse:-top-3 pointer-coarse:h-11 pointer-coarse:w-11',
+    mark: 'left-1.5 top-1.5 h-2 w-2 rounded-sm border-l-2 border-t-2 pointer-coarse:left-3 pointer-coarse:top-3',
+  },
+  se: {
+    box: '-bottom-1.5 -right-1.5 h-5 w-5 cursor-nwse-resize pointer-coarse:-bottom-3 pointer-coarse:-right-3 pointer-coarse:h-11 pointer-coarse:w-11',
+    mark: 'bottom-1.5 right-1.5 h-2 w-2 rounded-sm border-b-2 border-r-2 pointer-coarse:bottom-3 pointer-coarse:right-3',
+    idle: true,
+  },
+  sw: {
+    box: '-bottom-1.5 -left-1.5 h-5 w-5 cursor-nesw-resize pointer-coarse:-bottom-3 pointer-coarse:-left-3 pointer-coarse:h-11 pointer-coarse:w-11',
+    mark: 'bottom-1.5 left-1.5 h-2 w-2 rounded-sm border-b-2 border-l-2 pointer-coarse:bottom-3 pointer-coarse:left-3',
+  },
+}
+
+// A bar is filled, an L-shaped corner mark is drawn in border colour — so the lit/idle classes
+// differ per shape as well as per tone.
+const TONES = {
+  frame: { barLit: 'bg-sky-400', markLit: 'border-sky-400', markIdle: 'border-slate-500' },
+  module: {
+    barLit: 'bg-violet-300',
+    markLit: 'border-violet-300',
+    markIdle: 'border-violet-400/60',
+  },
+} as const
+
+function markClass(edge: ResizeEdge): string {
+  const tone = TONES[props.tone]
+  const isCorner = edge.length === 2
+  if (!isCorner) return lit(edge) ? tone.barLit : 'bg-transparent'
+  if (lit(edge)) return tone.markLit
+  return GRIPS[edge].idle ? tone.markIdle : 'border-transparent'
+}
+</script>
+
+<template>
+  <!-- Resizing persists geometry, so it is a `board.write` mutation: a read-only viewer gets no
+       grips at all rather than borders that light up and no-op (which is what `startResize`'s own
+       permission check then backs up rather than carries alone). `nopan` alongside `nodrag` so the
+       pane doesn't pan while resizing, same reason as the node's own drag handle. -->
+  <template v-if="access.canWriteBoard.value">
+    <div
+      v-for="edge in RESIZE_EDGES"
+      :key="edge"
+      class="nodrag nopan absolute z-10 touch-none"
+      :class="GRIPS[edge].box"
+      :title="$t('board.frame.dragToResize')"
+      :data-testid="`resize-${edge}`"
+      @pointerenter="hoverEdge = edge"
+      @pointerleave="hoverEdge = null"
+      @pointerdown="onPointerDown($event, edge)"
+    >
+      <span class="absolute transition-colors" :class="[GRIPS[edge].mark, markClass(edge)]" />
+    </div>
+  </template>
+</template>

package/app/components/focus/BlockFocusView.vue

@@ -30,12 +30,20 @@ const deps = computed(() =>
 )
 
 // Hide UI-testing pipelines when this block's frame has no UI to exercise, `'recurring'`-only
-// pipelines (a manual run of one is refused server-side), and — for a `document` task — every
-// non-document pipeline (per the `purpose` classifier) — see the backend gate.
+// pipelines (a manual run of one is refused server-side), and every pipeline whose purpose doesn't
+// match this block's task type or LEVEL (per the `purpose` classifier) — see the backend gate. The
+// level is what keeps the planning presets on initiative blocks and off everything else, in both
+// directions, so this menu never offers a run the engine answers with a 409.
 const runOptions = computed(() => {
   const frame = block.value ? board.serviceOf(block.value) : undefined
   return pipelines.pipelines.filter((p) =>
-    pipelineAllowedForManualStart(p, frame, board.blocks, block.value?.taskType),
+    pipelineAllowedForManualStart(
+      p,
+      frame,
+      board.blocks,
+      block.value?.taskType,
+      block.value?.level,
+    ),
   )
 })
 

package/app/components/panels/InspectorPanel.vue

@@ -178,13 +178,24 @@ const taskBranchUrl = computed(() => {
   return base ? `${base}/tree/${pr.branch}` : null
 })
 
-// Hide UI-testing pipelines when this block's frame has no UI to exercise, and `'recurring'`-only
-// pipelines (a manual run of one is refused server-side) — they'd be refused at run start (see
-// utils/pipeline + the backend gate).
+// Hide UI-testing pipelines when this block's frame has no UI to exercise, `'recurring'`-only
+// pipelines (a manual run of one is refused server-side), and every pipeline whose purpose doesn't
+// match this block's task type or LEVEL — they'd be refused at run start (see utils/pipeline + the
+// backend gate). The level is what keeps the planning presets on initiative blocks and off
+// everything else, so this menu never offers a run the engine answers with a 409; it applies to
+// frames and modules too, which is why it reads `block.level` rather than assuming a task.
 const runMenu = computed(() => {
   const frame = block.value ? board.serviceOf(block.value) : undefined
   return pipelines.pipelines
-    .filter((p) => pipelineAllowedForManualStart(p, frame, board.blocks))
+    .filter((p) =>
+      pipelineAllowedForManualStart(
+        p,
+        frame,
+        board.blocks,
+        block.value?.taskType,
+        block.value?.level,
+      ),
+    )
     .map((p) => ({
       label: p.name,
       icon: 'i-lucide-play',

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

@@ -144,10 +144,14 @@ const selectedPipeline = computed(() =>
 // pipelines (the task's manual Run control can't start one), and — for a `document` task — every
 // non-document pipeline (it authors a doc, so a build/test pipeline makes no sense). All would be
 // refused / wrong at run start (see utils/pipeline + the backend gate + the purpose classifier).
+// `blockLevel: 'task'` is passed literally because this panel only ever edits a task leaf, which
+// drops the planning presets the engine would refuse. The task-type narrowing already excludes them
+// for `feature`/`bug`, but NOT for a `spike` / `ralph` / deployment-custom type — and a planning
+// preset settable as a task's DEFAULT pipeline is a 409 on every later Start.
 const taskFrame = computed(() => board.serviceOf(props.block))
 const selectablePipelines = computed(() =>
   pipelines.pipelines.filter((p) =>
-    pipelineAllowedForManualStart(p, taskFrame.value, board.blocks, props.block.taskType),
+    pipelineAllowedForManualStart(p, taskFrame.value, board.blocks, props.block.taskType, 'task'),
   ),
 )
 function setPipeline(id: string) {

package/app/components/requirements/RequirementsReviewWindow.vue

@@ -17,6 +17,7 @@ import {
   type OrderedFinding,
 } from './RequirementsReviewWindow.logic'
 import type {
+  RecommendationSource,
   RequirementRecommendation,
   RequirementReview,
   RequirementReviewItem,
@@ -150,6 +151,17 @@ const STATUS_COLOR = {
   recommend_requested: 'primary',
 } as const satisfies Record<ReviewItemStatus, string>
 
+// What a Writer suggestion actually rests on. Shown because a suggestion drawn from the team's own
+// standards and one resting on nothing but the model look identical once they are sitting in the
+// answer box, and they deserve very different scrutiny. A suggestion whose standard resolved already
+// carries the richer "current standard" badge, so this fills in the rest rather than repeating it.
+const GROUNDING_COLOR = {
+  standard: 'success',
+  'project-spec': 'info',
+  web: 'neutral',
+  'general-practice': 'warning',
+} as const satisfies Record<RecommendationSource, string>
+
 // Exhaustive enum→label maps of literal keys, so the typed-key drift guard sees each key
 // (vs a runtime-built `requirements.severity.${value}`).
 const SEVERITY_LABELS = computed<Record<ReviewItemSeverity, string>>(() => ({
@@ -157,6 +169,12 @@ const SEVERITY_LABELS = computed<Record<ReviewItemSeverity, string>>(() => ({
   medium: t('requirements.severity.medium'),
   low: t('requirements.severity.low'),
 }))
+const GROUNDING_LABELS = computed<Record<RecommendationSource, string>>(() => ({
+  standard: t('requirements.grounding.standard'),
+  'project-spec': t('requirements.grounding.project-spec'),
+  web: t('requirements.grounding.web'),
+  'general-practice': t('requirements.grounding.general-practice'),
+}))
 const CATEGORY_LABELS = computed<Record<ReviewItemCategory, string>>(() => ({
   gap: t('requirements.category.gap'),
   clarification: t('requirements.category.clarification'),
@@ -842,6 +860,14 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                               })
                             }}
                           </UBadge>
+                          <UBadge
+                            v-else-if="autoDefaults.get(item.id)!.groundedIn"
+                            size="xs"
+                            variant="subtle"
+                            :color="GROUNDING_COLOR[autoDefaults.get(item.id)!.groundedIn!]"
+                          >
+                            {{ GROUNDING_LABELS[autoDefaults.get(item.id)!.groundedIn!] }}
+                          </UBadge>
                         </div>
                         <UTextarea
                           v-model="drafts[item.id]"
@@ -891,6 +917,14 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                                 })
                               }}
                             </UBadge>
+                            <UBadge
+                              v-else-if="rec.groundedIn"
+                              size="xs"
+                              variant="subtle"
+                              :color="GROUNDING_COLOR[rec.groundedIn]"
+                            >
+                              {{ GROUNDING_LABELS[rec.groundedIn] }}
+                            </UBadge>
                             <p class="mt-1 whitespace-pre-line text-sm text-slate-300">
                               {{ rec.recommendedText }}
                             </p>

package/app/composables/api/board.ts

@@ -15,6 +15,7 @@ import {
   removeBlockContract,
   reparentBlockContract,
   reseedPipelineContract,
+  resizeBlockContract,
   restoreBlockContract,
   toggleDependencyContract,
   updateBlockContract,
@@ -26,7 +27,7 @@ import type {
   UpdatePipelineInput,
 } from '@cat-factory/contracts'
 import type { BlockType, CreateTaskType, TaskTypeFields } from '~/types/domain'
-import type { ApiContext, Position } from './context'
+import type { ApiContext, Position, Size } from './context'
 
 /** Board structure: block (frame/module/task) mutations + the pipeline library. */
 export function boardApi({ send, ws }: ApiContext) {
@@ -80,6 +81,11 @@ export function boardApi({ send, ws }: ApiContext) {
     moveBlock: (workspaceId: string, blockId: string, body: { position: Position }) =>
       send(moveBlockContract, { pathPrefix: ws(workspaceId), pathParams: { blockId }, body }),
 
+    // Border-drag resize. One call for both halves of the geometry: the server derives the
+    // origin delta and translates the container's children so its contents stay put.
+    resizeBlock: (workspaceId: string, blockId: string, body: { position: Position; size: Size }) =>
+      send(resizeBlockContract, { pathPrefix: ws(workspaceId), pathParams: { blockId }, body }),
+
     reparentBlock: (
       workspaceId: string,
       blockId: string,

package/app/composables/api/context.ts

@@ -44,3 +44,5 @@ export interface ApiContext {
 }
 
 export type Position = { x: number; y: number }
+/** An explicit pixel size for a resizable container (a service frame or a module). */
+export type Size = { w: number; h: number }