@cat-factory/app 0.275.0 → 0.277.0

package/README.md

@@ -15,6 +15,7 @@ The SPA source lives under `app/` (the Nuxt srcDir).
 - [What it is](#what-it-is)
 - [Tech stack](#tech-stack)
 - [Layout](#layout)
+- [Task swimlanes](#task-swimlanes)
 - [Roles (engineer / product manager / designer)](#roles-engineer--product-manager--designer)
 - [Interface modes (basic / advanced)](#interface-modes-basic--advanced)
 - [Agent tiers (basic / intermediate / advanced)](#agent-tiers-basic--intermediate--advanced)
@@ -240,6 +241,89 @@ surface rather than a toast, and are tracked as G4 in
 
 A status → chip map feeding a `<UBadge :color="…">` types its values as `BadgeColor` (`utils/badge.ts`), which is derived from `UBadge`'s own prop type rather than restated as a literal union. Typed `string`, the binding does not compile and the reflex is `as any` at each call site: seven of them had accumulated. That cast also accepts a colour Nuxt UI does not define, which renders as an unstyled badge with nothing failing.
 
+## Task swimlanes
+
+A service frame lays its tasks out in **status lanes**, not at coordinates. Three lanes a reader
+works in (`not_started`, `in_progress`, `needs_you`) plus a collapsed **Done** strip beneath them.
+The vocabulary, the classification and the Done caps are `app/utils/swimlanes.ts`; the ordering and
+grouping are `app/utils/laneSort.ts`; `composables/useFrameLanes.ts` is the only store-facing half.
+
+**A lane is a CLAIM, which is a higher bar than a badge.** A mislabelled badge sits beside the
+truth; a card filed in the wrong lane states something false _and_ hides the card from the column
+its reader was scanning. Three rules follow, and they are what the tests pin:
+
+- **The classification is TOTAL.** `BASE_REASON_BY_STATUS` is a `Record<BlockStatus, …>`, so a new
+  status fails the build; and a status the TYPE says is impossible while the DATABASE still holds it
+  (a retired picklist member on an old row) resolves to `unclassified` → `needs_you`, never to
+  `undefined`, which would drop the card out of every lane with nothing left to say it existed.
+- **An imprecise reason beats a wrong lane.** The SPA models only decisions and approvals as global
+  per-block selectors; a judge / human-test / visual-confirmation / fork / follow-up / input-gate
+  park is reachable only by drilling into a step. But every one of them parks the RUN at
+  `status: 'blocked'`, and that coarse marker places the card correctly even when this layer cannot
+  name the surface. Such a park reports `parked` — named but imprecise, never demoted to "in flight".
+- **The reason is a separate answer from the lane.** The lane says "look at this"; the reason says
+  "what would I do". `failed`, `budget_paused` and `approval` all stop work dead and need three
+  unrelated actions, which is why `blocking_reason` is a grouping and why a lane header can name it.
+
+**Ordering defaults per lane** (`smart`), because the actionable order genuinely differs by column:
+what can be started now / what has gone quiet / what has waited longest. Two rules bind any new
+comparator: an **unknown timestamp sorts last in BOTH directions** (a run that reported no activity
+is not stale and not fresh, and ranking it as either invents a fact), and **every comparator ends on
+board order**, since these re-run on every live push and an unresolved tie makes the lane shuffle
+itself. `nullsLast` is the single place the first rule lives.
+
+**Sizing is decoupled from content** (`utils/laneGeometry.ts`). A lane scrolls; it does not grow. A
+service with 300 open tasks gets the same frame as one with three, which is what the old free layout
+could not do — a busy service grew until it dwarfed its neighbours.
+
+Three consumers have to agree about that size, which is why the module exports two FUNCTIONS rather
+than leaving each to do the arithmetic: `frameContentSize` is the frame's floor (read by
+`contentSize`, and by `framePlacement.EMPTY_FRAME_SIZE`, which has to reserve a spot for a frame
+that does not exist yet and so cannot measure it), and `laneBodyHeightIn` is its inverse, handing a
+lane whatever the frame's ACTUAL size leaves it. A dragged border therefore grows the lanes rather
+than leaving dead canvas below them, and a constant restating either answer is exactly what went
+stale before. A frame with no children at all is the one that skips the lanes: it renders one "add
+the first task" panel and is sized for that.
+
+**Two preferences, deliberately different scopes.** The sort/group choice is per user, per browser
+(`stores/laneView.ts`, persisted like the interface tier): it is personal and changes several times
+an hour, and making it shared would let one person's triage sweep re-arrange everyone's board. The
+Done lane's two **caps** are per-workspace settings (`doneLaneMaxItems`, `doneLaneRetentionDays`),
+because what the board may show of a service's history is a shared decision. Both caps hide cards
+only, and the lane reports the two drop counts separately: an age drop means "there is older
+history", a cap drop means "there is more from this period".
+
+**A task with no `completedAt` is exempt from the age cap**, not treated as ancient. Every block
+merged before that column existed reads that way, and hiding history on the strength of a timestamp
+nobody recorded would be the platform inferring a fact it does not have. The count cap still bounds
+them, so the exemption cannot make the lane unbounded, and `undatedShown` says how many there are.
+
+**A FRAME still has coordinates, and they live on its `WorkspaceMount`, not on the block** (one
+shared service sits at a different spot on every board that mounts it), so every frame-returning read
+projects through kernel's `applyMountLayout`. The resize path is where people hit a missed projection,
+because a `size`-only edit is the one frame patch with no other visible effect: the SPA upserts the
+authoritative block the mutation returned and the frame jumps to coordinates no board shows it at.
+
+**Dragging a card now only reparents** (`positioned: false` in `useBlockDrag`): between services,
+and into or out of a module via a module group header's drop zone. Which LANE a card is in is not
+something a drop can decide — the lane is derived from state, so dropping a not-started card on
+"In progress" could only lie or silently do nothing. Because that drop target exists only while the
+reader has grouping set to `module`, the inspector carries a **module picker** that does not depend
+on the current grouping; module sub-frames no longer render as boxes, so without it the only route
+into a module would be to change a view preference first.
+
+**A move re-stamps the module the task DECLARES**, which is the one thing about that drag that is
+not obvious. A task names its module twice: the block it is parented to, and `moduleName`, which
+exists because the engine only materialises the module block on merge, so a task can name its module
+before anything is its parent. Grouping reads the parent and falls back to the declared name — so a
+card dragged OUT of a module and left still declaring it lands right back in the group it came from.
+`BoardService.reparent` therefore rewrites the name from the destination container, exactly as it
+already rewrote the `type` a task inherits from its frame, and the SPA's optimistic write predicts
+the same answer through the shared `moduleNameInContainer` (`@cat-factory/contracts`) so the card
+does not visibly jump when the response lands. "No module" is the EMPTY STRING on the wire, the way
+every other clearable field spells a clear; `undefined` is dropped by `JSON.stringify` and reaches
+the server as an empty patch.
+
 ## Roles (engineer / product manager / designer)
 
 The outermost of the three narrowing axes, and the only one the app **asks about**: on a first-ever
@@ -1004,8 +1088,11 @@ example ships in [`deploy/frontend`](https://github.com/kibertoad/cat-factory/tr
 ## Key UI surfaces
 
 - **Board canvas** (`components/board`): `BoardCanvas` + `nodes/` (`BlockNode`,
-  `ModuleFrame`, `TaskCard`), dependency edges, the per-block `AgentFailureCard` /
-  `AgentStopButton`, and a deep-zoom `focus/BlockFocusView`. A running task card expands
+  `FrameSwimlanes` / `TaskLane` / `LaneGroup` / `LaneTask`, `TaskCard`), dependency edges,
+  the per-block `AgentFailureCard` /
+  `AgentStopButton`, and a deep-zoom `focus/BlockFocusView`. Tasks are laid out in status
+  lanes rather than at coordinates (see [Task swimlanes](#task-swimlanes)); the board-level
+  order/grouping override is `LaneViewControl` in the toolbar. A running task card expands
   its build pipeline (`TaskPipelineMini`) on hover at any zoom level, and across every
   on-screen card past the `steps` zoom band: the two grants are combined in the
   `taskExpansion` store and driven by `useTaskExpansion`.

package/app/components/binaryCandidates/BinaryCandidatesWindow.vue

@@ -26,6 +26,7 @@ import {
   binaryCandidateView,
 } from '~/utils/binaryCandidates'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
+import StoredAssetView from '~/components/binaryOutput/StoredAssetView.vue'
 
 const execution = useExecutionStore()
 const board = useBoardStore()
@@ -194,8 +195,19 @@ async function onKeep() {
             data-testid="binary-candidate-card"
             @click="toggle(row.id)"
           >
+            <!-- Staged through the platform's OWN asset storage: we hold the bytes, so the card
+                 renders them (and offers to open or save one) rather than waiting for a public
+                 link the shipped storage never issues. Checked first because a candidate can
+                 carry both, and ours is the one that is definitely still there. -->
+            <StoredAssetView
+              v-if="row.assetId"
+              :asset-id="row.assetId"
+              :content-type="row.contentType"
+              :label="row.label ?? row.subject"
+              class="mb-2"
+            />
             <img
-              v-if="row.previewUrl"
+              v-else-if="row.previewUrl"
               :src="row.previewUrl"
               :alt="row.label ?? row.id"
               class="mb-2 max-h-56 w-full rounded object-contain"

package/app/components/binaryOutput/BinaryOutputReport.vue

@@ -16,6 +16,7 @@ import type { PipelineStep } from '~/types/execution'
 import { BINARY_OUTPUT_STATE_KEYS, binaryOutputView } from '~/utils/binaryOutput'
 import { binaryCandidateView } from '~/utils/binaryCandidates'
 import CopyButton from '~/components/common/CopyButton.vue'
+import StoredAssetView from '~/components/binaryOutput/StoredAssetView.vue'
 
 // Two callers, one renderer — the same split `StepEffortReport` makes: the generic step-detail
 // panel drops it in as a `card` (its own heading + border, among the other detail sections),
@@ -135,7 +136,13 @@ const state = computed(() => {
 
     <!-- The artifacts. `location` is the service's OWN addressing — an object key, a path, a
          URL — recorded verbatim and never interpreted, so it renders as copyable text and
-         never as a link. -->
+         never as a link.
+         The ONE exception is an artifact stored through the platform's own asset storage, where
+         the location is an id for bytes WE hold: there the row also shows the thing itself, and
+         offers to open or save it. That is not a reinterpretation of the location, it is the
+         join `binaryOutputView` already made (`row.assetId` is null unless the service is ours
+         AND the location is a well-formed id), and it is the difference between a report that
+         says where the work went and one that shows it. -->
     <ul v-if="view.rows.length" class="space-y-1.5">
       <li
         v-for="(row, i) in view.rows"
@@ -144,6 +151,13 @@ const state = computed(() => {
         data-testid="binary-output-artifact"
       >
         <CopyButton :text="row.location" class="absolute end-1 top-1" />
+        <StoredAssetView
+          v-if="row.assetId"
+          :asset-id="row.assetId"
+          :content-type="row.contentType"
+          :label="row.entity ?? row.description"
+          class="mb-2 pe-8"
+        />
         <code class="block break-all pe-8 font-mono text-[11px] text-slate-200">{{
           row.location
         }}</code>

package/app/components/binaryOutput/StoredAssetView.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+// A stored artifact the PLATFORM holds the bytes for: what it looks like, and the two things a
+// person wants to do with it afterwards.
+//
+// This is the half of the media flow that only works because the shipped asset storage is our
+// own. An artifact in an org's private bucket is a location string and, at best, whatever preview
+// link that service chose to issue; one stored here is bytes we can serve, so the run's report can
+// show the picture, open it full size, and hand the file over to be saved elsewhere.
+//
+// The bytes are behind the workspace's authenticated blob route, so an `<img src>` cannot point at
+// them: they are fetched as a blob and turned into an object URL (`useArtifactBlobs`, the same
+// composable the visual-confirmation gate uses). That is also why the DOWNLOAD is an `<a download>`
+// over the object URL rather than a link to the API: a plain link would open an authenticated
+// request the browser has no session header for.
+//
+// Whether the artifact renders as a picture is `rendersInlineAsImage` over the media type the
+// SERVER SERVED, not the one the producing agent declared. The declaration is optional and
+// model-authored: a step that stores a PNG and says nothing about it would render as a generic
+// file, and one that mislabels a bundle as an image would render a broken `<img>` reporting
+// itself as loaded, with no error affordance because the fetch genuinely succeeded. The served
+// type is the same judgement the server already made when it decided whether to answer inline or
+// as an attachment, so a row and the response behind it can no longer disagree. The declared type
+// stays as the LABEL on a non-image row, which is what it is good for: it is the agent's own
+// account of the file, where the served type only ever says image-or-not.
+//
+// Everything that is not a picture (a 3D model, an audio file, a PDF) is a legitimate outcome and
+// NOT a failure: it renders as a named file with the same two actions, because the point of the
+// surface is the file, not the thumbnail.
+import { computed, onUnmounted, watch } from 'vue'
+import { rendersInlineAsImage } from '@cat-factory/contracts'
+import { useArtifactBlobs } from '~/composables/useArtifactBlobs'
+
+const props = withDefaults(
+  defineProps<{
+    /** The platform artifact id (`art_…`) resolved off the row's service + location. */
+    assetId: string
+    /** The media type the agent reported. Shown as the label on a non-image row; see above. */
+    contentType?: string | undefined
+    /** What to call the file a person saves, and the image's alt text. */
+    label?: string | undefined
+    /** Cap on the rendered preview's height, so a report row and a comparison card can differ. */
+    previewClass?: string
+  }>(),
+  { contentType: undefined, label: undefined, previewClass: 'max-h-56' },
+)
+const { t } = useI18n()
+
+const blobs = useArtifactBlobs()
+onUnmounted(() => blobs.revokeAll())
+
+// Re-resolve when the id changes rather than only on mount: one of these components is reused
+// across the rows of a report that grows over a live run.
+watch(
+  () => props.assetId,
+  (id) => void blobs.resolve(id),
+  { immediate: true },
+)
+
+const url = computed(() => blobs.urlFor(props.assetId))
+const status = computed(() => blobs.statusFor(props.assetId))
+const isImage = computed(() => rendersInlineAsImage(blobs.typeFor(props.assetId)))
+
+/**
+ * The name the saved file takes. Derived from the agent's own label where there is one, because
+ * `art_01H…` tells the person who saves it nothing about what it is; sanitised to the characters
+ * a filename may safely carry, since the label is model-authored text going into a download.
+ */
+const filename = computed(() => {
+  const base = (props.label ?? '')
+    .trim()
+    .replace(/[^A-Za-z0-9._-]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+  return base ? base.slice(0, 80) : props.assetId
+})
+</script>
+
+<template>
+  <div class="space-y-1.5" data-testid="stored-asset">
+    <img
+      v-if="isImage && url"
+      :src="url"
+      :alt="label ?? assetId"
+      class="w-full rounded object-contain"
+      :class="previewClass"
+      data-testid="stored-asset-preview"
+    />
+    <!-- Not a picture, and that is an ordinary outcome for a media step: a mesh, a sound and a
+         PDF are all deliverables, so the row states what it is rather than showing a broken
+         frame. -->
+    <p
+      v-else-if="!isImage && url"
+      class="flex items-center gap-1.5 rounded bg-slate-800/60 px-2 py-1.5 text-[11px] text-slate-300"
+      data-testid="stored-asset-file"
+    >
+      <UIcon name="i-lucide-file" class="h-3.5 w-3.5 shrink-0" />
+      <span class="truncate">{{ contentType ?? t('binaryOutput.asset.unknownType') }}</span>
+    </p>
+    <p
+      v-else-if="status === 'error'"
+      class="flex items-center gap-1.5 text-[11px] text-amber-300"
+      data-testid="stored-asset-error"
+    >
+      <span>{{ t('binaryOutput.asset.loadFailed') }}</span>
+      <UButton size="xs" variant="link" @click.stop="blobs.retry(assetId)">
+        {{ t('binaryOutput.asset.retry') }}
+      </UButton>
+    </p>
+    <p v-else class="text-[11px] text-slate-500" data-testid="stored-asset-loading">
+      {{ t('binaryOutput.asset.loading') }}
+    </p>
+
+    <!-- The two things a person does with a delivered asset. Both hang off the object URL, so
+         they appear only once the bytes are in hand. -->
+    <div v-if="url" class="flex items-center gap-3 text-[11px]">
+      <a
+        :href="url"
+        target="_blank"
+        rel="noopener"
+        class="text-sky-300 hover:underline"
+        data-testid="stored-asset-open"
+        @click.stop
+        >{{ t('binaryOutput.asset.open') }}</a
+      >
+      <a
+        :href="url"
+        :download="filename"
+        class="text-sky-300 hover:underline"
+        data-testid="stored-asset-download"
+        @click.stop
+        >{{ t('binaryOutput.asset.download') }}</a
+      >
+    </div>
+  </div>
+</template>

package/app/components/board/AddTaskModal.vue

@@ -104,6 +104,7 @@ const TASK_TYPES = computed<{ value: TaskTypeChoice; label: string; icon: string
       icon: 'i-lucide-clipboard-check',
     },
     { value: 'ralph', label: t('board.addTask.types.ralph'), icon: 'i-lucide-infinity' },
+    { value: 'media', label: t('board.addTask.types.media'), icon: 'i-lucide-image-plus' },
     { value: 'recurring', label: t('board.addTask.types.recurring'), icon: 'i-lucide-repeat' },
   ]
   // A document repository only accepts document/spike tasks (see BoardService.addTask).
@@ -400,16 +401,20 @@ const selectablePipelines = computed(() =>
 // must appear in the form BEFORE creation:
 //   - `ralph` needs its preset so the per-task validation command + iteration budget the `ralph`
 //     agent contributes surface for editing ("choose at run time" would be a dead end);
-//   - a `document` task defaults to `pl_document` and a `review` task to `pl_review` so their
-//     purpose-narrowed picker (the `purpose` gate hides every non-document / non-review pipeline)
-//     is never rendered empty.
+//   - a `document` task defaults to `pl_document`, a `review` task to `pl_review` and a `media`
+//     task to `pl_media` so their purpose-narrowed picker (the `purpose` gate hides every pipeline
+//     of another purpose) is never rendered empty.
 // The other typed default (spike) carries no up-front config and doesn't narrow its picker, so the
 // modal leaves `pipelineId` unset and `BoardService` applies the backend type-default at creation.
-// Keep these ids in step with the backend helper.
+// Keep these ids in step with the backend helper. The test for membership is the NARROWING, not the
+// config: a type whose picker `pipelineAllowedForTaskType` reduces to one purpose has to name its
+// default here, because every fallback below is a BUILD-purpose pipeline the narrowed picker then
+// rejects, leaving the form open on an empty selection.
 const DEFAULT_PIPELINE_FOR_TYPE: Partial<Record<TaskTypeChoice, string>> = {
   ralph: 'pl_ralph',
   document: 'pl_document',
   review: 'pl_review',
+  media: 'pl_media',
 }
 /**
  * The pipeline a task type opens with: a custom type's registered `defaultPipelineId`, else the

package/app/components/board/LaneViewControl.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import {
+  LANE_GROUP_KEYS,
+  LANE_SORT_KEYS,
+  type LaneGroupKey,
+  type LaneSortKey,
+} from '~/utils/laneSort'
+import { showOverrideField } from '~/utils/uiMode'
+
+/**
+ * The board-level override for how every frame's swimlanes are ordered and grouped.
+ *
+ * It is an OVERRIDE, which is what makes it an advanced-tier affordance: hidden, what remains is
+ * exactly the `smart` per-lane order and no grouping — the default it would otherwise have shown.
+ * The gate is `showOverrideField` rather than `isAdvanced` alone, because the preference persists
+ * per browser: someone who picks "by severity" in advanced mode and then switches to basic must
+ * still be able to see and clear it, or the board would be ordered by a rule they cannot find.
+ */
+const { t } = useI18n()
+const uiMode = useUiModeStore()
+const laneView = useLaneViewStore()
+
+// The DEFAULT values are passed as `undefined` rather than as themselves: `showOverrideField`
+// reveals the control as soon as any value it edits is set, and `smart`/`none` being set is
+// exactly the state where there is nothing to reveal.
+const visible = computed(() =>
+  showOverrideField(
+    uiMode.isAdvanced,
+    laneView.sortKey === 'smart' ? undefined : laneView.sortKey,
+    laneView.groupKey === 'none' ? undefined : laneView.groupKey,
+  ),
+)
+
+const sortItems = computed(() =>
+  LANE_SORT_KEYS.map((key) => ({
+    label: t(`board.lanes.sort.${key}`),
+    icon: laneView.sortKey === key ? 'i-lucide-check' : undefined,
+    onSelect: () => laneView.setSortKey(key as LaneSortKey),
+  })),
+)
+
+const groupItems = computed(() =>
+  LANE_GROUP_KEYS.map((key) => ({
+    label: t(`board.lanes.group.${key}`),
+    icon: laneView.groupKey === key ? 'i-lucide-check' : undefined,
+    onSelect: () => laneView.setGroupKey(key as LaneGroupKey),
+  })),
+)
+
+/**
+ * One menu, two labelled sections, plus a reset. Grouped rather than two adjacent buttons because
+ * the two choices are read together — "the newest bugs, by module" is one intent — and because the
+ * toolbar has no room for two more controls at small widths.
+ */
+const items = computed(() => [
+  [{ label: t('board.lanes.sort.heading'), type: 'label' as const }],
+  sortItems.value,
+  [{ label: t('board.lanes.group.heading'), type: 'label' as const }],
+  groupItems.value,
+  ...(laneView.hasOverride
+    ? [
+        [
+          {
+            label: t('board.lanes.resetView'),
+            icon: 'i-lucide-rotate-ccw',
+            onSelect: () => laneView.reset(),
+          },
+        ],
+      ]
+    : []),
+])
+</script>
+
+<template>
+  <UDropdownMenu v-if="visible" :items="items">
+    <UButton
+      color="neutral"
+      :variant="laneView.hasOverride ? 'soft' : 'ghost'"
+      size="sm"
+      icon="i-lucide-arrow-down-up"
+      :title="t('board.lanes.viewTitle')"
+      data-testid="lane-view-control"
+    >
+      <span class="hidden sm:inline">{{ t('board.lanes.viewTitle') }}</span>
+    </UButton>
+  </UDropdownMenu>
+</template>

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

@@ -2,15 +2,15 @@
 import type { Block, BlockStatus } from '~/types/domain'
 import { blockTypeMeta, STATUS_META } from '~/utils/catalog'
 import DecisionBadge from './DecisionBadge.vue'
-import DraggableTask from './DraggableTask.vue'
+import FrameSwimlanes from './FrameSwimlanes.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 { useFrameStacking } from '~/composables/useFrameStacking'
 import { useViewport } from '~/composables/useViewport'
+import { laneBodyHeightIn } from '~/utils/laneGeometry'
 
 // Vue Flow passes the node's `id` and `data` as props to custom node components.
 // Only frames are rendered as board nodes; their tasks live inside the card.
@@ -43,7 +43,9 @@ const isShared = computed(() => services.isSharedFrame(props.id))
 const typeMeta = computed(() => (block.value ? blockTypeMeta(block.value.type) : null))
 
 // ---- this service's children (tasks + modules) -----------------------------
-const directTasks = computed(() => board.tasksOf(props.id))
+// No `directTasks` here: the swimlanes take EVERY task under the frame, its modules' included,
+// because a module is a grouping inside a lane now rather than a box of its own. `modules` is
+// still read for the composition line's module count.
 const modules = computed(() => board.modulesOf(props.id))
 const initiativeBlocks = computed(() => board.initiativesOf(props.id))
 const allTasks = computed(() => board.allTasksUnder(props.id))
@@ -54,6 +56,9 @@ const hasTasks = computed(
 )
 const prTasks = computed(() => allTasks.value.filter((t) => t.status === 'pr_ready').length)
 const canvas = computed(() => board.containerSize(props.id))
+// A lane's scroll viewport fills whatever the frame's actual size leaves it, so dragging the
+// frame's border gives the reader more of the lane rather than dead canvas beneath it.
+const laneBodyHeight = computed(() => laneBodyHeightIn(canvas.value, initiativeBlocks.value.length))
 
 // Frame status is derived from its tasks — services never reach "done".
 const frameStatus = computed<BlockStatus>(() => board.frameStatus(props.id))
@@ -273,7 +278,7 @@ const ITEM_ICON: Record<string, string> = {
       />
     </div>
 
-    <!-- ===================== The service card: 2D canvas of tasks + modules =====================
+    <!-- ============= The service card: the initiative band + task swimlanes =============
          There is no chip or compact variant: a service is always expanded to its task canvas, at
          every zoom level, so panning is a fixed layout and zooming has no expand/collapse
          transition to snap on. The two gated-off branches that used to sit here (a far-zoom chip
@@ -501,15 +506,24 @@ const ITEM_ICON: Record<string, string> = {
           </div>
         </div>
 
-        <!-- the 2D drop zone: modules and loose tasks live here, draggable -->
+        <!-- The frame's canvas. Tasks are laid out in status swimlanes rather than at
+             coordinates, so this is a fixed-size viewport (each lane scrolls) instead of the 2D
+             free-drag surface it used to be. `data-drop-zone` stays on the outer box so a drop
+             in the padding between lanes still resolves to this service rather than falling
+             through to nothing; each lane body carries the same zone for drops inside it. -->
         <div
           :data-drop-zone="block.id"
-          class="nodrag relative rounded-xl bg-slate-950/40"
-          :style="{ width: canvas.w + 'px', height: canvas.h + 'px' }"
+          class="nodrag relative rounded-xl bg-slate-950/40 p-2"
+          :style="{ width: canvas.w + 'px', minHeight: canvas.h + 'px' }"
         >
-          <ModuleFrame v-for="m in modules" :key="m.id" :module-id="m.id" />
-          <InitiativeCard v-for="i in initiativeBlocks" :key="i.id" :block-id="i.id" />
-          <DraggableTask v-for="t in directTasks" :key="t.id" :task-id="t.id" />
+          <!-- Initiatives sit in a wrapping band above the lanes: they are containers of work,
+               not units of it, so they belong in no status lane. -->
+          <div v-if="initiativeBlocks.length" class="mb-2 flex flex-wrap gap-2">
+            <InitiativeCard v-for="i in initiativeBlocks" :key="i.id" :block-id="i.id" />
+          </div>
+
+          <FrameSwimlanes v-if="hasTasks" :frame-id="block.id" :lane-body-height="laneBodyHeight" />
+
           <button
             v-if="!hasTasks && access.canWriteBoard.value"
             type="button"

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

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import LaneGroup from './LaneGroup.vue'
+import TaskLane from './TaskLane.vue'
+import { useFrameLanes } from '~/composables/useFrameLanes'
+import { LANE_GEOMETRY } from '~/utils/laneGeometry'
+import { LANE_META } from '~/utils/swimlanes'
+
+/**
+ * A service frame's tasks, laid out in status lanes.
+ *
+ * Three live lanes side by side, then the Done lane as a full-width strip beneath them rather
+ * than a fourth column. A collapsed column cannot state its own count without turning its label
+ * sideways, and giving the archive a quarter of the width permanently would take it from the
+ * three lanes a reader actually works in. As a strip it is one row when shut and a wide grid when
+ * opened, which is also the better shape for scanning history.
+ */
+const props = defineProps<{
+  frameId: string
+  /** A live lane's scroll viewport, resolved by the frame from its own size. */
+  laneBodyHeight: number
+}>()
+
+const { t } = useI18n()
+const laneView = useLaneViewStore()
+const { lanes, doneSelection } = useFrameLanes(computed(() => props.frameId))
+
+const liveLanes = computed(() => lanes.value.filter((l) => l.lane !== 'done'))
+const doneLane = computed(() => lanes.value.find((l) => l.lane === 'done'))
+
+/**
+ * What the Done lane is holding back, as one line.
+ *
+ * The two counts are reported separately because they tell a reader different things: an age
+ * drop means "there is older history, look further back", a cap drop means "there is more from
+ * this same period". Reporting nothing at all would be the worse failure — a truncated archive
+ * would read exactly like a complete one.
+ */
+const withheldNote = computed(() => {
+  const { hiddenByAge, hiddenByCap, undatedShown } = doneSelection.value
+  const parts: string[] = []
+  if (hiddenByCap > 0) parts.push(t('board.lanes.done.hiddenByCap', { count: hiddenByCap }))
+  if (hiddenByAge > 0) parts.push(t('board.lanes.done.hiddenByAge', { count: hiddenByAge }))
+  // Blocks merged before completion dates were recorded have no honest age, so the age cap
+  // cannot apply to them. Saying so stops the window looking tighter than it is.
+  if (undatedShown > 0 && hiddenByAge > 0) {
+    parts.push(t('board.lanes.done.undated', { count: undatedShown }))
+  }
+  return parts.join(' · ')
+})
+</script>
+
+<template>
+  <div class="space-y-2">
+    <!-- The three lanes a reader works in -->
+    <div class="flex items-start" :style="{ gap: LANE_GEOMETRY.laneGap + 'px' }">
+      <TaskLane
+        v-for="rendered in liveLanes"
+        :key="rendered.lane"
+        :rendered="rendered"
+        :group-key="laneView.groupKey"
+        :frame-id="frameId"
+        :body-height="laneBodyHeight"
+      />
+    </div>
+
+    <!-- The Done strip. Rendered only once the service HAS finished something: an empty archive
+         is the one lane whose emptiness says nothing a reader needs (a new service has merged
+         nothing, which its three live lanes already show). -->
+    <div v-if="doneLane && doneLane.total > 0" class="rounded-lg bg-slate-900/40">
+      <button
+        type="button"
+        class="nodrag flex w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left hover:bg-slate-800/40"
+        data-testid="done-lane-toggle"
+        :aria-expanded="!laneView.doneLaneCollapsed"
+        @click.stop="laneView.toggleDoneLane()"
+      >
+        <UIcon
+          :name="laneView.doneLaneCollapsed ? 'i-lucide-chevron-right' : 'i-lucide-chevron-down'"
+          class="h-3.5 w-3.5 shrink-0 text-slate-500"
+        />
+        <UIcon
+          :name="LANE_META.done.icon"
+          class="h-3.5 w-3.5 shrink-0"
+          :style="{ color: LANE_META.done.color }"
+        />
+        <span class="text-[11px] font-semibold text-slate-200">{{
+          t(LANE_META.done.labelKey)
+        }}</span>
+        <!-- The TOTAL, not what the caps admitted: "this service has finished 312 tasks" is the
+             fact the lane carries, and counting only the visible cards would understate it by
+             two orders of magnitude. -->
+        <span
+          class="shrink-0 rounded px-1 text-[10px] font-semibold tabular-nums"
+          :style="{
+            backgroundColor: LANE_META.done.color + '22',
+            color: LANE_META.done.color,
+          }"
+          data-testid="lane-count-done"
+          >{{ doneLane.total }}</span
+        >
+        <span v-if="withheldNote" class="ms-auto truncate text-[10px] text-slate-500">{{
+          withheldNote
+        }}</span>
+      </button>
+
+      <!-- The archive opens as a WIDE GRID: each group takes the strip's full width and wraps its
+           own cards across it, and the groups stack. Wrapping the GROUPS instead read correctly
+           only when there were several of them — under the default `none` grouping a lane is
+           exactly one group, so the whole archive rendered as a single card-wide column down the
+           left of an otherwise empty strip. -->
+      <div
+        v-if="!laneView.doneLaneCollapsed"
+        :data-drop-zone="frameId"
+        data-testid="lane-done"
+        data-lane="done"
+        class="nodrag space-y-2 overflow-y-auto p-2 pt-0"
+        :style="{ maxHeight: laneBodyHeight + 'px' }"
+      >
+        <!-- A zero cap is a real setting ("count them, show none"), so the strip explains why it
+             has nothing in it rather than looking broken. -->
+        <p
+          v-if="doneSelection.shown.length === 0"
+          class="px-1 text-[10px] leading-snug text-slate-600"
+        >
+          {{ t('board.lanes.done.allWithheld') }}
+        </p>
+        <LaneGroup
+          v-for="(group, i) in doneLane.groups"
+          v-else
+          :key="group.label ?? `catch-all-${i}`"
+          :group="group"
+          :group-key="laneView.groupKey"
+          :frame-id="frameId"
+          layout="grid"
+        />
+      </div>
+    </div>
+  </div>
+</template>