@cat-factory/app 0.193.0 → 0.195.0

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/pipeline/AgentPromptEditor.vue

@@ -3,6 +3,7 @@ import { computed, ref, watch } from 'vue'
 import type { AgentPromptRevision } from '~/types/agent-prompts'
 import { agentKindMeta } from '~/utils/catalog'
 import AgentKindIcon from '~/components/pipeline/AgentKindIcon.vue'
+import OutputBudgetInput from '~/components/pipeline/OutputBudgetInput.vue'
 import {
   draftForRevision,
   isDirty,
@@ -30,6 +31,7 @@ const emit = defineEmits<{ close: [] }>()
 const { t } = useI18n()
 const toast = useToast()
 const prompts = useAgentPromptsStore()
+const agentSettings = useAgentSettingsStore()
 
 const open = computed({
   get: () => props.agentKind !== null,
@@ -76,6 +78,29 @@ watch(
 const detail = computed(() => prompts.detail)
 const label = computed(() => (props.agentKind ? agentKindMeta(props.agentKind).label : ''))
 
+/**
+ * The workspace-wide output-token ceiling for this kind — the same per-agent-kind scope this
+ * editor already owns for the prompt, which is why it lives here rather than in a settings screen
+ * of its own. A pipeline step may still pin its own budget over it.
+ *
+ * Saved on its own, immediately: unlike the prompt (whose save appends a revision and wants an
+ * explicit commit) this is one scalar with no history, so a separate Save button would only invite
+ * someone to type a number, close the modal and wonder why nothing changed.
+ */
+const budget = computed(() =>
+  props.agentKind ? agentSettings.maxOutputTokensFor(props.agentKind) : undefined,
+)
+
+async function saveBudget(value: number | null) {
+  const kind = props.agentKind
+  if (!kind) return
+  try {
+    await agentSettings.setMaxOutputTokens(kind, value)
+  } catch {
+    toast.add({ title: t('agentPrompt.toast.budgetFailed'), color: 'error' })
+  }
+}
+
 /** The live prompt, so "no change" can be reported instead of appending an identical revision. */
 const dirty = computed(() => isDirty(draft.value, detail.value))
 /** Nothing to revert to when the workspace is already running the shipped prompt. */
@@ -164,6 +189,21 @@ function revisionLabel(revision: AgentPromptRevision): string {
           </UBadge>
         </div>
 
+        <!-- The workspace-wide output ceiling for this kind. Same per-agent-kind scope as the
+             prompt below it; saves on change, since there is no revision log to commit to. -->
+        <div class="flex flex-wrap items-center gap-2">
+          <span class="text-[11px] text-slate-400">{{ t('pipeline.outputBudget.kindLabel') }}</span>
+          <OutputBudgetInput
+            class="w-32"
+            :model-value="budget"
+            :disabled="agentSettings.saving"
+            @update:model-value="saveBudget"
+          />
+          <span class="text-[10px] text-slate-500">
+            {{ t('pipeline.outputBudget.kindHint') }}
+          </span>
+        </div>
+
         <!-- What the platform appends is SHOWN, not described. A prose summary of it is copy
              that silently goes stale the moment a directive is added, and a user who does not
              know what is already there writes a prompt that fights it. -->

package/app/components/pipeline/OutputBudgetInput.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+/**
+ * The output-token ceiling control, shared by both tiers that configure one: a pipeline step's
+ * own override (in the builder) and a workspace's per-agent-kind default (in the prompt editor).
+ *
+ * Empty means INHERIT, and that is the whole reason this is a component rather than a bare
+ * `UInput type="number"` at each call site: "no value" has to round-trip as `null` and never as
+ * `0`, or clearing the field would send a zero-token ceiling — every reply empty — instead of
+ * falling back to the next tier. The bounds come from the contract, so the input cannot offer a
+ * value the server would reject.
+ */
+import { computed } from 'vue'
+import { MAX_AGENT_MAX_OUTPUT_TOKENS, MIN_AGENT_MAX_OUTPUT_TOKENS } from '~/types/agent-settings'
+
+const props = defineProps<{
+  /** The configured ceiling, or null/undefined when this tier inherits. */
+  modelValue: number | null | undefined
+  /** What this tier falls back to, shown as the placeholder so "inherit" names a number. */
+  inheritedValue?: number | undefined
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{ 'update:modelValue': [number | null] }>()
+
+const { t, n } = useI18n()
+
+/** Bound to the input as a string so an empty field is distinguishable from a typed 0. */
+const text = computed(() => (props.modelValue != null ? String(props.modelValue) : ''))
+
+/**
+ * The placeholder names the inherited ceiling when the caller knows it, so a user reading an
+ * empty field learns what the step will actually run on rather than just that it is unset.
+ */
+const placeholder = computed(() =>
+  props.inheritedValue != null
+    ? t('pipeline.outputBudget.inheritsValue', { tokens: n(props.inheritedValue) })
+    : t('pipeline.outputBudget.inherits'),
+)
+
+/**
+ * Commit on change. An empty/unparseable field clears to `null` (inherit); anything else is
+ * clamped into the contract's range rather than rejected, so a fat-fingered extra digit lands on
+ * the ceiling instead of silently failing the save with a 422.
+ */
+function commit(raw: string | number) {
+  const trimmed = String(raw).trim()
+  if (trimmed === '') return emit('update:modelValue', null)
+  const parsed = Number.parseInt(trimmed, 10)
+  if (!Number.isFinite(parsed)) return emit('update:modelValue', null)
+  const clamped = Math.min(
+    MAX_AGENT_MAX_OUTPUT_TOKENS,
+    Math.max(MIN_AGENT_MAX_OUTPUT_TOKENS, parsed),
+  )
+  emit('update:modelValue', clamped)
+}
+</script>
+
+<template>
+  <UInput
+    :model-value="text"
+    type="number"
+    size="xs"
+    :min="MIN_AGENT_MAX_OUTPUT_TOKENS"
+    :max="MAX_AGENT_MAX_OUTPUT_TOKENS"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    @change="commit(($event.target as HTMLInputElement).value)"
+  />
+</template>

package/app/components/pipeline/PipelineBuilder.vue

@@ -5,6 +5,7 @@ import type { AgentKind, Pipeline, PipelinePurpose } from '~/types/domain'
 import AgentPalette from '~/components/palettes/AgentPalette.vue'
 import AgentKindIcon from '~/components/pipeline/AgentKindIcon.vue'
 import AgentPromptEditor from '~/components/pipeline/AgentPromptEditor.vue'
+import OutputBudgetInput from '~/components/pipeline/OutputBudgetInput.vue'
 import { showOverrideField } from '~/utils/uiMode'
 import {
   agentKindMeta,
@@ -86,6 +87,7 @@ const agents = useAgentsStore()
 const ui = useUiStore()
 const uiMode = useUiModeStore()
 const agentPrompts = useAgentPromptsStore()
+const agentSettings = useAgentSettingsStore()
 
 // The agent kind whose system prompt is open in the editor (null = closed). Per-KIND, not
 // per-step: an override applies to every run of that agent in the workspace, so two steps of
@@ -102,6 +104,26 @@ const promptEditorKind = ref<AgentKind | null>(null)
 function showPromptEditor(kind: AgentKind): boolean {
   return showOverrideField(uiMode.isAdvanced, agentPrompts.isCustomized(kind) || null)
 }
+
+/**
+ * Whether this step's own output-budget field shows. Same override rule as the prompt editor: a
+ * step with no pinned ceiling inherits, so the control is advanced-only until a value actually
+ * exists — at which point it must be visible in BOTH tiers, or a basic-mode user runs on a budget
+ * a teammate pinned and they can neither see nor clear.
+ */
+function showOutputBudget(index: number): boolean {
+  return showOverrideField(uiMode.isAdvanced, pipelines.draftMaxOutputTokens(index) ?? null)
+}
+
+/**
+ * What a step with no pinned ceiling actually runs on: the workspace's per-kind setting when it
+ * has one. Shown as the field's placeholder. Undefined ⇒ the deployment default, which the SPA
+ * deliberately does NOT guess at — it is env-resolved per agent kind and a number invented here
+ * would be wrong on the deployments that tuned it.
+ */
+function inheritedOutputBudget(kind: AgentKind): number | undefined {
+  return agentSettings.maxOutputTokensFor(kind)
+}
 const releaseHealth = useReleaseHealthStore()
 const skills = useSkillsStore()
 
@@ -151,6 +173,9 @@ watch(open, (isOpen) => {
   // Best-effort: the builder is fully usable without it, and a deployment that wires no
   // override store answers 503 here.
   if (isOpen) agentPrompts.loadIndex().catch(() => {})
+  // The workspace's per-kind output ceilings, which the per-step field shows as its inherited
+  // placeholder and the prompt editor edits. Best-effort on the same terms as the prompt index.
+  if (isOpen) agentSettings.load().catch(() => {})
 })
 
 function add(kind: AgentKind) {
@@ -694,6 +719,23 @@ async function clone(p: Pipeline) {
                 </p>
               </div>
 
+              <!-- This step's own output-token ceiling. An OVERRIDE of the workspace's per-kind
+                 setting (itself an override of the deployment routing default), so it is
+                 advanced-only until a value is pinned; empty inherits. -->
+              <div v-if="showOutputBudget(unit.index)" class="ms-6 flex items-center gap-2">
+                <span class="text-[10px] text-slate-500">
+                  {{ t('pipeline.outputBudget.stepLabel') }}
+                </span>
+                <OutputBudgetInput
+                  class="w-28"
+                  :model-value="pipelines.draftMaxOutputTokens(unit.index)"
+                  :inherited-value="inheritedOutputBudget(unit.kind)"
+                  @update:model-value="
+                    pipelines.setDraftMaxOutputTokens(unit.index, $event ?? undefined)
+                  "
+                />
+              </div>
+
               <!-- Attached companion: a dependent reviewer for this producer, optionally
                  gated on the task estimate. -->
               <div

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/agentSettings.ts

@@ -0,0 +1,32 @@
+import {
+  listWorkspaceAgentSettingsContract,
+  updateWorkspaceAgentSettingsContract,
+} from '@cat-factory/contracts'
+import type { UpdateWorkspaceAgentSettingsInput } from '~/types/agent-settings'
+import type { ApiContext } from './context'
+
+/**
+ * The workspace's per-agent-kind generation settings, edited from the pipeline builder. There is
+ * no delete route: clearing the last configured field IS the way back to the deployment default,
+ * and the server drops the row when nothing is left set.
+ */
+export function agentSettingsApi({ send, ws }: ApiContext) {
+  return {
+    // Every kind the workspace has configured — nothing for a kind that inherits.
+    listWorkspaceAgentSettings: (workspaceId: string) =>
+      send(listWorkspaceAgentSettingsContract, { pathPrefix: ws(workspaceId) }),
+
+    // Patch one kind. An explicit null clears the field; the response is null once the kind is
+    // back to inheriting entirely.
+    updateWorkspaceAgentSettings: (
+      workspaceId: string,
+      agentKind: string,
+      body: UpdateWorkspaceAgentSettingsInput,
+    ) =>
+      send(updateWorkspaceAgentSettingsContract, {
+        pathPrefix: ws(workspaceId),
+        pathParams: { agentKind },
+        body,
+      }),
+  }
+}

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 }