@cat-factory/app 0.275.0 → 0.276.0

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

@@ -119,6 +119,7 @@ const prLabel = computed(() =>
  * every section says "nothing here" would teach people the surface is empty. A task marked done
  * by hand, with no pull request and no run, is that task.
  */
+const laneView = useLaneViewStore()
 const outcomeReadable = computed(() => {
   const block = task.value
   if (!block) return false
@@ -136,6 +137,17 @@ const outcomeReadable = computed(() => {
 const showPrChip = computed(
   () => Boolean(pr.value) && (uiMode.isAdvanced || !outcomeReadable.value),
 )
+
+/**
+ * The module chip, dropped while the swimlanes are GROUPED by module.
+ *
+ * Written as the invariant ("the card names its module wherever nothing else does") for the same
+ * reason `showPrChip` is: the surface that carries the other half is itself conditional, and two
+ * predicates that have to agree by coincidence eventually do not.
+ */
+const showModuleChip = computed(
+  () => Boolean(task.value?.moduleName) && laneView.groupKey !== 'module',
+)
 function openOutcome() {
   ui.openOutcome(props.taskId, task.value?.executionId ?? null)
 }
@@ -539,9 +551,11 @@ function selectTask() {
       </template>
     </div>
 
-    <!-- structural metadata: assigned module -->
+    <!-- Structural metadata: assigned module. Dropped while the lanes are GROUPED by module,
+         where the group header above the card already names it — two chips saying the same thing
+         cost a row of card height each and add nothing. -->
     <div
-      v-if="task.moduleName"
+      v-if="showModuleChip"
       class="mt-2 flex flex-wrap items-center gap-1 border-t border-slate-800 pt-2"
     >
       <span

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

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import LaneGroup from './LaneGroup.vue'
+import type { RenderedLane } from '~/composables/useFrameLanes'
+import { LANE_GEOMETRY } from '~/utils/laneGeometry'
+import type { LaneGroupKey } from '~/utils/laneSort'
+import { LANE_META } from '~/utils/swimlanes'
+
+/**
+ * One status lane inside a service frame.
+ *
+ * The lane BODY is the frame's drop zone, so a card dropped into any of another frame's lanes
+ * moves to that service. Which lane it lands in is not a choice a drop can make: the lane is
+ * derived from the task's state, so dropping a not-started card on "In progress" would have to
+ * either lie or silently ignore the gesture. Reparenting is the one thing a drag decides.
+ *
+ * The body SCROLLS rather than growing. A lane is a viewport onto an unbounded list, which is
+ * what keeps a busy service's frame the same size as a quiet one's; its height comes from the
+ * frame, so dragging the frame's border gives the reader more of the lane.
+ *
+ * It takes the whole {@link RenderedLane} rather than spreading it across three props, so the
+ * lane object stays one thing. Restating its fields here also collided the `LaneGroup` NAME with
+ * the component of that name imported above, leaving one identifier meaning the interface in
+ * type position and the component in value position.
+ */
+const props = defineProps<{
+  rendered: RenderedLane
+  groupKey: LaneGroupKey
+  frameId: string
+  /** The scroll viewport's height, resolved by the frame from its own size. */
+  bodyHeight: number
+}>()
+
+const { t } = useI18n()
+const meta = computed(() => LANE_META[props.rendered.lane])
+const isEmpty = computed(() => props.rendered.groups.every((g) => g.entries.length === 0))
+</script>
+
+<template>
+  <div
+    class="flex min-w-0 flex-col rounded-lg bg-slate-900/40"
+    :style="{ width: LANE_GEOMETRY.laneWidth + 'px' }"
+    :data-lane="rendered.lane"
+  >
+    <!-- Lane header -->
+    <div
+      class="flex items-center gap-1.5 rounded-t-lg border-b px-2 py-1.5"
+      :style="{ borderColor: meta.color + '33' }"
+    >
+      <UIcon :name="meta.icon" class="h-3.5 w-3.5 shrink-0" :style="{ color: meta.color }" />
+      <span class="truncate text-[11px] font-semibold text-slate-200">{{ t(meta.labelKey) }}</span>
+      <span
+        class="ms-auto shrink-0 rounded px-1 text-[10px] font-semibold tabular-nums"
+        :style="{ backgroundColor: meta.color + '22', color: meta.color }"
+        :data-testid="`lane-count-${rendered.lane}`"
+        >{{ rendered.total }}</span
+      >
+    </div>
+
+    <!-- Lane body: the frame's drop zone, and the scroll viewport. -->
+    <div
+      :data-drop-zone="frameId"
+      :data-testid="`lane-${rendered.lane}`"
+      class="nodrag flex-1 space-y-2 overflow-y-auto overflow-x-hidden p-2"
+      :style="{ height: bodyHeight + 'px' }"
+    >
+      <!-- An empty lane SAYS it is empty. Left blank, "nothing needs you" and "the lane failed
+           to render" look identical, and the first is worth stating: it is the answer a reader
+           scanning the needs-you column is hoping for. -->
+      <p v-if="isEmpty" class="px-1 pt-2 text-[10px] leading-snug text-slate-600">
+        {{ t(meta.emptyKey) }}
+      </p>
+      <LaneGroup
+        v-for="(group, i) in rendered.groups"
+        v-else
+        :key="group.label ?? `catch-all-${i}`"
+        :group="group"
+        :group-key="groupKey"
+        :frame-id="frameId"
+      />
+    </div>
+  </div>
+</template>

package/app/components/layout/BoardToolbar.vue

@@ -2,6 +2,7 @@
 import { useBoardFlow, BOARD_MIN_ZOOM, BOARD_MAX_ZOOM } from '~/composables/useBoardFlow'
 import NotificationsInbox from '~/components/layout/NotificationsInbox.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import LaneViewControl from '~/components/board/LaneViewControl.vue'
 
 const ui = useUiStore()
 const board = useBoardStore()
@@ -209,6 +210,9 @@ const decisionItems = computed(() =>
       </UButton>
     </UDropdownMenu>
 
+    <!-- how every frame's swimlanes are ordered + grouped (an override; advanced tier) -->
+    <LaneViewControl />
+
     <!-- in-org sharing: add an existing org service to this board (mount = board.write) -->
     <UDropdownMenu
       v-if="mountableItems.length && access.canWriteBoard.value"

package/app/components/panels/InspectorPanel.vue

@@ -319,10 +319,23 @@ const showOriginalDescription = ref(false)
 </script>
 
 <template>
+  <!-- On lg+ the panel is a rail in the board pane's end corner, and it CLEARS the board's top
+       overlay region rather than sitting beside it (`top-16`, below the region's toolbar pill).
+       That region has one owner, `BoardTopOverlays`, and this rail is deliberately not a member:
+       it is an end-anchored side panel, not centred chrome. Clearing the region is how a
+       non-member stays out of the owner's way.
+       Overlapping is not a cosmetic problem. The toolbar is centred and grows with its contents,
+       so at some width its end reaches this corner, and whichever of the two is on top covers the
+       other's controls and EATS THEIR CLICKS: the click lands on the box above and no handler
+       runs, which reads as a dead button rather than as two overlapping boxes. Adding the
+       swimlane view control was the width that finally did it, to the notifications bell (then
+       with the panel on top; the region now paints above at `z-40`, which only swaps which side
+       loses). Sitting the panel below fixes it whichever way the stacking goes, and needs no
+       left/right arithmetic to stay correct under RTL. -->
   <div
     v-if="block && statusMeta && typeMeta"
     data-testid="inspector-panel"
-    class="fixed inset-x-0 bottom-0 z-20 overflow-hidden rounded-t-2xl border border-slate-700 bg-slate-900/95 shadow-2xl backdrop-blur lg:absolute lg:inset-x-auto lg:bottom-auto lg:end-4 lg:top-4 lg:w-80 lg:rounded-2xl"
+    class="fixed inset-x-0 bottom-0 z-20 overflow-hidden rounded-t-2xl border border-slate-700 bg-slate-900/95 shadow-2xl backdrop-blur lg:absolute lg:inset-x-auto lg:bottom-auto lg:end-4 lg:top-16 lg:w-80 lg:rounded-2xl"
   >
     <div class="h-1.5 w-full" :style="{ backgroundColor: statusMeta.color }" />
     <!-- A tall task (execution steps + scenarios + docs) can overflow the
@@ -331,7 +344,7 @@ const showOriginalDescription = ref(false)
          On compact viewports the panel is a bottom sheet capped to the visible
          height (dvh excludes mobile browser chrome). -->
     <div
-      class="max-h-[80dvh] space-y-4 overflow-y-auto overscroll-contain px-4 pt-4 pb-[calc(1rem+env(safe-area-inset-bottom))] lg:max-h-[calc(100vh-5rem)]"
+      class="max-h-[80dvh] space-y-4 overflow-y-auto overscroll-contain px-4 pt-4 pb-[calc(1rem+env(safe-area-inset-bottom))] lg:max-h-[calc(100vh-7rem)]"
     >
       <!-- header -->
       <div class="flex items-start justify-between gap-2">

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

@@ -7,8 +7,69 @@ const props = defineProps<{ block: Block }>()
 
 const board = useBoardStore()
 const fragments = useFragmentsStore()
+const toast = useToast()
 const { t } = useI18n()
 
+// ---- module assignment -----------------------------------------------------
+// This is the module-assignment route that does NOT depend on how the board is currently
+// grouped. Dragging a card onto a module's group header works only while the reader has
+// grouping set to `module`, and module sub-frames no longer render as boxes to drop onto, so
+// without this the only way to move a task into a module would be to first change a view
+// preference. It writes the same two things a drag does: the declared `moduleName` and, when the
+// module block already exists, the structural parent.
+//
+// The field used to be a free-text `UInput` bound with `v-model="block.moduleName"`, which
+// mutated the cached store object and never called `updateBlock` — so a module typed here was
+// silently discarded on the next board refresh. Now that module grouping is a first-class board
+// affordance, a field that looks like it assigns a module and does not would read as the grouping
+// being broken.
+const service = computed(() => board.serviceOf(props.block))
+
+/** The modules the enclosing service has materialised, as picker options. */
+const moduleOptions = computed(() => {
+  const frame = service.value
+  const existing = frame ? board.modulesOf(frame.id).map((m) => m.title) : []
+  // A task can DECLARE a module the engine has not created a block for yet (it materialises one
+  // on merge), so the task's own value has to be offerable even when no block carries that name,
+  // or opening the picker would silently drop it.
+  const own = props.block.moduleName?.trim()
+  const names = own && !existing.includes(own) ? [...existing, own] : existing
+  return [
+    { label: t('inspector.structure.moduleNone'), value: '' },
+    ...names.map((n) => ({ label: n, value: n })),
+  ]
+})
+
+const selectedModule = computed(() => props.block.moduleName?.trim() ?? '')
+
+async function setModule(name: string) {
+  const previous = selectedModule.value
+  if (name === previous) return
+  try {
+    // The declared module is what the engine reads when it materialises the module block on
+    // merge, so it is written first and is authoritative. "No module" sends the EMPTY STRING,
+    // which is how `updateBlock` spells a clear: `undefined` is dropped by `JSON.stringify`, so
+    // it reached the server as an empty patch and the response then restored the old value.
+    await board.updateBlock(props.block.id, { moduleName: name })
+
+    // When a block for that module already exists, move the task under it now rather than waiting
+    // for a merge, so the board's grouping matches what was just chosen.
+    const frame = service.value
+    const target = frame
+      ? name
+        ? board.modulesOf(frame.id).find((m) => m.title === name)
+        : frame
+      : undefined
+    if (target && target.id !== props.block.parentId) {
+      await board.reparentBlock(props.block.id, target.id, { x: 0, y: 0 })
+    }
+  } catch {
+    // `updateBlock`/`reparentBlock` already roll back and toast their own failures; this catch
+    // exists so a rejected reparent cannot leave the await chain unhandled.
+    // silent-catch-ok: both mutations report their own failure to the user.
+  }
+}
+
 // ---- best-practice prompt fragments ----------------------------------------
 // The task's OWN selection (seeded from its service at creation, then editable per task). The
 // shared <FragmentSelector> renders the picker; a change persists via updateBlock.
@@ -25,12 +86,18 @@ function setFragments(ids: string[]) {
       <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
         {{ t('inspector.structure.module') }}
       </div>
-      <UInput
-        v-model="block.moduleName"
+      <USelectMenu
+        :model-value="selectedModule"
+        :items="moduleOptions"
+        value-key="value"
         size="sm"
         class="w-full"
-        :placeholder="t('inspector.structure.modulePlaceholder')"
         icon="i-lucide-package"
+        :create-item="true"
+        :placeholder="t('inspector.structure.modulePlaceholder')"
+        data-testid="task-module-select"
+        @update:model-value="setModule"
+        @create="setModule"
       />
       <p class="mt-1 text-[11px] leading-snug text-slate-500">
         {{ t('inspector.structure.moduleHint') }}

package/app/components/settings/WorkspaceSettingsPanel.vue

@@ -197,6 +197,9 @@ const draft = reactive({
   storeAgentContext: true,
   publishPrVerificationReport: true,
   artifactRetentionDays: 14,
+  doneLaneMaxItems: 20,
+  doneLaneRetentionEnabled: true,
+  doneLaneRetentionDays: 14 as number,
   kaizenEnabled: true,
   allowInitiatorPat: true,
   inputGateMode: 'standard' as InputGateMode,
@@ -218,6 +221,12 @@ function hydrate() {
   draft.storeAgentContext = s.storeAgentContext
   draft.publishPrVerificationReport = s.publishPrVerificationReport
   draft.artifactRetentionDays = s.artifactRetentionDays
+  draft.doneLaneMaxItems = s.doneLaneMaxItems
+  // Nullable (null ⇒ no age cap), so a checkbox is derived from whether a value is stored
+  // and the number input keeps a sensible starting value to switch back on with — the same
+  // shape the nullable review-friction triggers below use.
+  draft.doneLaneRetentionEnabled = s.doneLaneRetentionDays != null
+  draft.doneLaneRetentionDays = s.doneLaneRetentionDays ?? 14
   draft.kaizenEnabled = s.kaizenEnabled
   draft.allowInitiatorPat = s.allowInitiatorPat
   draft.inputGateMode = s.inputGateMode
@@ -276,6 +285,8 @@ async function save() {
       storeAgentContext: draft.storeAgentContext,
       publishPrVerificationReport: draft.publishPrVerificationReport,
       artifactRetentionDays: draft.artifactRetentionDays,
+      doneLaneMaxItems: draft.doneLaneMaxItems,
+      doneLaneRetentionDays: draft.doneLaneRetentionEnabled ? draft.doneLaneRetentionDays : null,
       kaizenEnabled: draft.kaizenEnabled,
       allowInitiatorPat: draft.allowInitiatorPat,
       inputGateMode: draft.inputGateMode,
@@ -540,6 +551,54 @@ async function save() {
               </label>
             </section>
 
+            <!-- What the board's Done swimlane keeps in view -->
+            <section class="space-y-2">
+              <h3 class="text-sm font-semibold text-slate-200">
+                {{ t('settings.workspaceSettings.doneLane.heading') }}
+              </h3>
+              <p class="text-[11px] text-slate-400">
+                {{ t('settings.workspaceSettings.doneLane.body') }}
+              </p>
+              <label class="block w-48">
+                <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+                  {{ t('settings.workspaceSettings.doneLane.maxItems') }}
+                </span>
+                <UInput
+                  v-model.number="draft.doneLaneMaxItems"
+                  type="number"
+                  :min="0"
+                  :max="500"
+                  size="sm"
+                  data-testid="done-lane-max-items"
+                />
+              </label>
+              <p v-if="draft.doneLaneMaxItems === 0" class="text-[11px] text-slate-500">
+                {{ t('settings.workspaceSettings.doneLane.zeroHint') }}
+              </p>
+              <label class="flex items-center gap-2">
+                <UCheckbox v-model="draft.doneLaneRetentionEnabled" size="sm" />
+                <span class="text-[11px] text-slate-300">{{
+                  t('settings.workspaceSettings.doneLane.ageToggle')
+                }}</span>
+              </label>
+              <label v-if="draft.doneLaneRetentionEnabled" class="block w-48">
+                <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+                  {{ t('settings.workspaceSettings.doneLane.days') }}
+                </span>
+                <UInput
+                  v-model.number="draft.doneLaneRetentionDays"
+                  type="number"
+                  :min="1"
+                  :max="3650"
+                  size="sm"
+                  data-testid="done-lane-retention-days"
+                />
+              </label>
+              <p class="text-[11px] text-slate-500">
+                {{ t('settings.workspaceSettings.doneLane.hidesOnlyHint') }}
+              </p>
+            </section>
+
             <!-- Run credential: the App installation vs. the initiator's own token -->
             <section class="space-y-2">
               <h3 class="text-sm font-semibold text-slate-200">

package/app/composables/useBlockDrag.ts

@@ -9,11 +9,18 @@ const draggingId = ref<string | null>(null)
 
 /**
  * Pointer-driven dragging for blocks positioned inside a container's 2D canvas
- * (tasks inside services/modules, modules inside services) and for free-floating
- * service frames (via their header handle). Movement is divided by the board zoom
- * so the block tracks the cursor. When `reparent` is set, the drop point is
- * hit-tested against `[data-drop-zone]` ancestors so a task can be dragged from a
- * service into a module (or back out).
+ * (initiative cards inside services) and for free-floating service frames (via
+ * their header handle). Movement is divided by the board zoom so the block tracks
+ * the cursor. When `reparent` is set, the drop point is hit-tested against
+ * `[data-drop-zone]` ancestors so a block can be dragged from a service into a
+ * module (or back out).
+ *
+ * A TASK is a `positioned: false` drag, because tasks are laid out in swimlanes and
+ * carry no coordinates a reader can see. Such a drag previews nothing and commits
+ * nothing on a same-container drop: its ONLY effect is a reparent, which is what a
+ * task drag is still for (moving work between services, and into or out of a module).
+ * A position write there would persist coordinates nothing renders and emit a board
+ * event for a change with no visible result.
  */
 export function useBlockDrag() {
   const board = useBoardStore()
@@ -23,7 +30,7 @@ export function useBlockDrag() {
   function startDrag(
     block: Block,
     e: PointerEvent,
-    opts: { reparent?: boolean; clamp?: boolean } = {},
+    opts: { reparent?: boolean; clamp?: boolean; positioned?: boolean } = {},
   ) {
     if (e.button !== 0) return
     // Read-only viewers can pan/inspect but never move or reparent a block — the drag
@@ -35,9 +42,11 @@ export function useBlockDrag() {
     const startX = e.clientX
     const startY = e.clientY
     const orig = { ...block.position }
-    // Container-local blocks (tasks/modules) are clamped to their parent's origin;
-    // frames live in free-floating flow space, so they opt out via `clamp: false`.
+    // Container-local blocks (initiative cards) are clamped to their parent's origin;
+    // frames live in free-floating flow space, so they opt out via `clamp: false`. Inert for
+    // a `positioned: false` drag, which never writes a position at all.
     const clamp = opts.clamp ?? true
+    const positioned = opts.positioned ?? true
     draggingId.value = block.id
     // Position is only previewed locally while dragging and persisted once on
     // release. Writing every move raced — a late, out-of-order response could land
@@ -51,7 +60,10 @@ export function useBlockDrag() {
       const ny = orig.y + (ev.clientY - startY) / z
       moved = true
       last = { x: clamp ? Math.max(0, nx) : nx, y: clamp ? Math.max(0, ny) : ny }
-      board.previewMove(block.id, last)
+      // A lane task has nowhere to preview TO: its place in the column is derived from its
+      // status and the reader's sort, so following the cursor would be a lie the drop then
+      // undoes. The `draggingId` state the card dims itself with is the whole feedback.
+      if (positioned) board.previewMove(block.id, last)
     }
     const onUp = (ev: PointerEvent) => {
       window.removeEventListener('pointermove', onMove)
@@ -60,9 +72,9 @@ export function useBlockDrag() {
         // A successful reparent persists the move itself; otherwise commit the final
         // position in place. Either way it's a single write, not one per frame. Run
         // the hit-test BEFORE clearing draggingId so the dragged element is still
-        // marked non-interactive (see DraggableTask) and the zone beneath resolves.
-        const reparented = opts.reparent && reparentAt(block, ev.clientX, ev.clientY)
-        if (!reparented) void board.moveBlock(block.id, last)
+        // marked non-interactive (see LaneTask) and the zone beneath resolves.
+        const reparented = opts.reparent && reparentAt(block, ev.clientX, ev.clientY, positioned)
+        if (!reparented && positioned) void board.moveBlock(block.id, last)
       }
       draggingId.value = null
     }
@@ -71,10 +83,15 @@ export function useBlockDrag() {
   }
 
   /** Returns true when the block was dropped into a *different* container. */
-  function reparentAt(block: Block, clientX: number, clientY: number): boolean {
+  function reparentAt(
+    block: Block,
+    clientX: number,
+    clientY: number,
+    positioned: boolean,
+  ): boolean {
     const el = document.querySelector(`[data-block-id="${block.id}"]`) as HTMLElement | null
     if (!el) return false
-    // The dragged block is already non-interactive while dragging (DraggableTask
+    // The dragged block is already non-interactive while dragging (LaneTask
     // drops pointer-events on the whole wrapper, handle included); belt-and-braces,
     // also neutralise this node so elementFromPoint resolves the zone beneath it.
     const prev = el.style.pointerEvents
@@ -87,14 +104,27 @@ export function useBlockDrag() {
     const newParent = zoneEl.getAttribute('data-drop-zone')!
     if (newParent === block.parentId) return false // same container — caller commits position
 
+    void board.reparentBlock(block.id, newParent, positionIn(zoneEl, el, positioned))
+    return true
+  }
+
+  /**
+   * Where the dropped block lands in its new container.
+   *
+   * A lane task gets the origin, not the coordinates it happened to be released over.
+   * Its place in the new container is derived from its status and the reader's sort, so a
+   * captured offset would be a coordinate nothing reads and every later reader would have
+   * to wonder whether it meant something.
+   */
+  function positionIn(zoneEl: HTMLElement, el: HTMLElement, positioned: boolean) {
+    if (!positioned) return { x: 0, y: 0 }
     const z = ui.zoom || 1
     const zr = zoneEl.getBoundingClientRect()
     const er = el.getBoundingClientRect()
-    void board.reparentBlock(block.id, newParent, {
+    return {
       x: Math.max(0, (er.left - zr.left) / z),
       y: Math.max(0, (er.top - zr.top) / z),
-    })
-    return true
+    }
   }
 
   return { draggingId, startDrag }

package/app/composables/useBlockQueries.ts

@@ -1,5 +1,6 @@
 import { computed, type Ref } from 'vue'
 import type { Block, BlockStatus } from '~/types/domain'
+import { frameContentSize, LANE_GEOMETRY } from '~/utils/laneGeometry'
 
 /**
  * Pure, read-only queries over a board's blocks. Extracted from the board store
@@ -162,33 +163,35 @@ export function useBlockQueries(blocks: Ref<Block[]>) {
   }
 
   /**
-   * The natural extent of a container's inner 2D canvas — the smallest size that
-   * still fits all its children. This is the floor a resizable frame can never be
-   * dragged below (so tasks/modules are never clipped).
+   * The natural extent of a frame's inner canvas — the smallest size that fits its swimlanes
+   * and its initiative band. This is the floor a resizable frame can never be dragged below.
+   *
+   * Task positions are deliberately NOT consulted any more. Tasks are laid out in status
+   * lanes, so the frame's size is a function of the LANE GEOMETRY, not of where cards happen
+   * to sit, and each lane SCROLLS rather than growing without bound. That decoupling is what
+   * fixes the old behaviour where a service accumulating work grew a taller and taller frame
+   * until it dwarfed its neighbours, and it is also what keeps this function pure over blocks:
+   * a lane's population depends on run state, which this layer cannot see and must not need to.
+   *
+   * The arithmetic itself lives in `frameContentSize` so the placement helper, which sizes a
+   * frame that does not exist yet, reserves the same footprint this one will render at.
    */
   function contentSize(id: string): { w: number; h: number } {
     const b = getBlock(id)
-    const isModule = b?.level === 'module'
-    const TASK_W = 210
-    const TASK_H = 160
-    const headerH = isModule ? 30 : 0
-    let w = isModule ? 200 : 360
-    let inner = isModule ? 60 : 220
-    for (const t of tasksOf(id)) {
-      w = Math.max(w, t.position.x + TASK_W + 12)
-      inner = Math.max(inner, t.position.y + TASK_H + 12)
-    }
-    for (const m of modulesOf(id)) {
-      const s = containerSize(m.id)
-      w = Math.max(w, m.position.x + s.w + 12)
-      inner = Math.max(inner, m.position.y + s.h + 12)
-    }
-    // Initiative cards render inside the frame's drop zone like tasks (230×~170).
-    for (const i of initiativesOf(id)) {
-      w = Math.max(w, i.position.x + 230 + 12)
-      inner = Math.max(inner, i.position.y + 170 + 12)
-    }
-    return { w, h: inner + headerH }
+    // A module is no longer drawn as a box (its tasks appear in the frame's lanes, grouped by
+    // module name), so it has no canvas of its own. A minimal size keeps any incidental caller
+    // honest rather than returning zero, which would read as "measured, and empty".
+    if (b?.level === 'module') return { w: LANE_GEOMETRY.laneWidth, h: 0 }
+
+    const initiatives = initiativesOf(id)
+    return frameContentSize({
+      // The predicate `BlockNode` renders the lanes on: an empty service shows one "add the first
+      // task" panel instead, and reserving lane-sized space for it would leave the frame two and
+      // a half times taller than its own contents.
+      hasChildren:
+        allTasksUnder(id).length > 0 || modulesOf(id).length > 0 || initiatives.length > 0,
+      initiatives: initiatives.length,
+    })
   }
 
   /**