@cat-factory/app 0.275.0 → 0.277.0

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

@@ -9,10 +9,14 @@
 // on the plan-approval gate (or on an agent-raised decision) offers the button that
 // opens the window resolving it, instead of leaving the card on a spinning "Run
 // planning" whose only route in was the inspector's execution panel.
-// The tracker button opens the dedicated window directly. Draggable within its
-// frame like a task card.
+// The tracker button opens the dedicated window directly.
+//
+// Laid out in a wrapping band above the frame's task swimlanes, not at coordinates. It used to be
+// free-positioned inside the frame's canvas beside the task cards, and lost that along with them
+// when tasks moved into lanes: with the canvas gone there is nothing left for an initiative's
+// coordinates to be relative to, and its drag handle only ever moved it within a canvas nothing
+// renders now. An initiative is still a first-class board block with its own inspector.
 import type { InitiativeStatus } from '~/types/domain'
-import { useBlockDrag } from '~/composables/useBlockDrag'
 import { useInitiativePlanning } from '~/composables/useInitiativePlanning'
 import {
   INITIATIVE_ATTENTION_ICONS,
@@ -27,7 +31,6 @@ const board = useBoardStore()
 const initiatives = useInitiativesStore()
 const ui = useUiStore()
 const { t } = useI18n()
-const { draggingId, startDrag } = useBlockDrag()
 
 const block = computed(() => board.getBlock(props.blockId))
 const initiative = computed(() => initiatives.forBlock(props.blockId))
@@ -56,36 +59,14 @@ const {
 function select() {
   ui.select(props.blockId)
 }
-function onHandle(e: PointerEvent) {
-  if (block.value) startDrag(block.value, e)
-}
 </script>
 
 <template>
-  <div
-    v-if="block"
-    class="absolute w-[230px]"
-    :style="{
-      left: block.position.x + 'px',
-      top: block.position.y + 'px',
-      zIndex: draggingId === blockId ? 60 : 10,
-      pointerEvents: draggingId === blockId ? 'none' : undefined,
-    }"
-  >
-    <div
-      class="nodrag nopan flex cursor-grab touch-none items-center justify-center rounded-t-lg border border-b-0 border-indigo-800/60 bg-indigo-950/60 py-px active:cursor-grabbing pointer-coarse:py-2"
-      :title="t('board.frame.dragTask')"
-      @pointerdown="onHandle"
-    >
-      <UIcon
-        name="i-lucide-grip-horizontal"
-        class="h-3 w-3 text-indigo-400/60 pointer-coarse:h-5 pointer-coarse:w-5"
-      />
-    </div>
+  <div v-if="block" class="w-[230px]">
     <div
       data-testid="initiative-card"
       :data-status="status"
-      class="cursor-pointer rounded-b-lg border border-indigo-800/60 bg-indigo-950/40 p-3 transition hover:border-indigo-600"
+      class="cursor-pointer rounded-lg border border-indigo-800/60 bg-indigo-950/40 p-3 transition hover:border-indigo-600"
       :class="[
         selected ? 'ring-2 ring-indigo-400/60' : '',
         awaitingAnswers || attention ? 'board-pulse' : '',

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

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import LaneTask from './LaneTask.vue'
+import { MODULE_META, taskTypeMeta } from '~/utils/catalog'
+import { LANE_GEOMETRY } from '~/utils/laneGeometry'
+import type { LaneGroup, LaneGroupKey } from '~/utils/laneSort'
+import { LANE_REASON_LABEL_KEYS, type LaneReason } from '~/utils/swimlanes'
+
+/**
+ * One labelled run of cards inside a lane.
+ *
+ * The WRAPPER carries `data-drop-zone`, not the header, so dropping anywhere in a module's group
+ * — on its title or on a card already in it — means "into that module". With the zone on the
+ * header alone, a drop onto one of the group's own cards would fall through to the lane's frame
+ * zone and reparent the card OUT of the module it was dropped into, which is the opposite of
+ * what the gesture said.
+ *
+ * That drop target is also why module grouping matters beyond presentation: module sub-frames no
+ * longer render as boxes, so this is the board's drag route into a module. The inspector's module
+ * picker is the route that does not depend on the current grouping.
+ */
+const props = withDefaults(
+  defineProps<{
+    group: LaneGroup
+    groupKey: LaneGroupKey
+    /** The enclosing service frame, so the catch-all group can be the way back OUT of a module. */
+    frameId: string
+    /**
+     * How the group's own cards run: down a lane column (the default) or wrapped across the full
+     * width of the Done strip, which is what makes the opened archive a grid rather than a column.
+     */
+    layout?: 'column' | 'grid'
+  }>(),
+  { layout: 'column' },
+)
+
+const { t } = useI18n()
+
+/**
+ * Which block a drop onto this group reparents into.
+ *
+ * Only meaningful while grouping BY MODULE: a named group targets its module block, and the
+ * catch-all ("no module") targets the frame, which is what makes dragging a card out of a module
+ * possible. Under any other grouping the group is not a container at all, so it declares no zone
+ * and drops fall through to the lane's own frame zone.
+ */
+const dropZone = computed(() => {
+  if (props.groupKey !== 'module') return null
+  return props.group.label == null ? props.frameId : props.group.id
+})
+
+/** Group labels are DATA (a module name, a type, a reason), so each kind is rendered as itself. */
+const label = computed(() => {
+  const raw = props.group.label
+  // `none` grouping renders no header at all, so it has no catch-all label to name.
+  if (props.groupKey === 'none') return ''
+  if (raw == null) return t(`board.lanes.group.catchAll.${props.groupKey}`)
+  if (props.groupKey === 'task_type') return taskTypeMeta(raw).label
+  if (props.groupKey === 'blocking_reason') {
+    return t(LANE_REASON_LABEL_KEYS[raw as LaneReason] ?? 'board.lanes.reason.unclassified')
+  }
+  return raw
+})
+
+const icon = computed(() => {
+  if (props.groupKey === 'module') return MODULE_META.icon
+  if (props.groupKey === 'initiative') return 'i-lucide-flag'
+  if (props.groupKey === 'epic') return 'i-lucide-layers'
+  return null
+})
+</script>
+
+<template>
+  <div :data-drop-zone="dropZone ?? undefined" class="space-y-1.5">
+    <!-- `none` grouping renders no header: one unlabelled group IS the flat lane, and a header
+         saying "all of them" would be a row of chrome carrying no information. -->
+    <div
+      v-if="groupKey !== 'none'"
+      class="flex items-center gap-1 px-0.5 text-[10px] uppercase tracking-wide text-slate-500"
+    >
+      <UIcon v-if="icon" :name="icon" class="h-3 w-3 shrink-0" />
+      <span class="truncate" :title="label">{{ label }}</span>
+      <span class="ms-auto shrink-0 tabular-nums">{{ group.entries.length }}</span>
+    </div>
+    <div :class="layout === 'grid' ? 'flex flex-wrap items-start gap-2' : 'space-y-1.5'">
+      <LaneTask
+        v-for="entry in group.entries"
+        :key="entry.task.id"
+        :task-id="entry.task.id"
+        :style="layout === 'grid' ? { width: LANE_GEOMETRY.cardWidth + 'px' } : undefined"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import TaskCard from './TaskCard.vue'
+import { useBlockDrag } from '~/composables/useBlockDrag'
+
+/**
+ * One task card in a swimlane.
+ *
+ * Replaces the old `DraggableTask`, and the difference is the whole point of the lanes: a card
+ * no longer carries coordinates. It sits where its lane's order puts it, so this wrapper is an
+ * ordinary flow item and the drag it starts is REPARENT-ONLY (`positioned: false`) — moving work
+ * between services, and into or out of a module, which is what a task drag was always actually
+ * for. Nothing is previewed while dragging, because there is nowhere to preview to.
+ *
+ * It also renders merged tasks, where `DraggableTask` returned nothing for them. That is what
+ * the Done lane needed: a finished task used to vanish from the board entirely, so a service's
+ * own history was invisible on it.
+ */
+const props = defineProps<{ taskId: string }>()
+
+const board = useBoardStore()
+const access = useWorkspaceAccess()
+const expansion = useTaskExpansionStore()
+const { t } = useI18n()
+const { draggingId, startDrag } = useBlockDrag()
+
+const task = computed(() => board.getBlock(props.taskId))
+const dragging = computed(() => draggingId.value === props.taskId)
+
+// An expanded pipeline overlays its neighbours, so it must stack above the compact cards
+// around it. Reads the same predicate the pipeline itself renders on.
+const expanded = computed(() => expansion.isExpanded(props.taskId))
+
+function onHandle(e: PointerEvent) {
+  if (task.value) startDrag(task.value, e, { reparent: true, positioned: false })
+}
+</script>
+
+<template>
+  <div
+    v-if="task"
+    class="relative"
+    :style="{
+      zIndex: dragging ? 60 : expanded ? 20 : 10,
+      // While this card is being dragged it must not capture hit-tests, so the drop zone
+      // beneath the cursor (a lane, or a module's group) resolves on release. The handle sits
+      // in this wrapper above the card and would otherwise mask the zone under it.
+      pointerEvents: dragging ? 'none' : undefined,
+    }"
+    :class="{ 'opacity-40': dragging }"
+  >
+    <!-- Drag handle. `nopan` so a start-drag from here moves the card, not the pane. Hidden
+         for read-only viewers, for whom the drag is a no-op anyway (see useBlockDrag). -->
+    <div
+      v-if="access.canWriteBoard.value"
+      class="nodrag nopan flex cursor-grab touch-none items-center justify-center rounded-t-lg border border-b-0 border-slate-700 bg-slate-800/80 py-px active:cursor-grabbing pointer-coarse:py-2"
+      :title="t('board.frame.dragTask')"
+      @pointerdown="onHandle"
+    >
+      <UIcon
+        name="i-lucide-grip-horizontal"
+        class="h-3 w-3 text-slate-500 pointer-coarse:h-5 pointer-coarse:w-5"
+      />
+    </div>
+    <TaskCard :task-id="taskId" :class="access.canWriteBoard.value ? '!rounded-t-none' : ''" />
+  </div>
+</template>

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/palettes/PipelinePurposeSelect.vue

@@ -30,6 +30,7 @@ const PURPOSE_LABELS = computed<Record<PipelinePurpose, string>>(() => ({
   review: t('pipeline.builder.purposeOption.review'),
   research: t('pipeline.builder.purposeOption.research'),
   planning: t('pipeline.builder.purposeOption.planning'),
+  media: t('pipeline.builder.purposeOption.media'),
 }))
 
 // The button text. A stored purpose this build has no label for is NAMED as unrecognised and

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

@@ -148,7 +148,7 @@ const tabsUi = {
 // so the config surface pins the built-in set it renders inputs for — a custom type buckets on its
 // own id server-side (`RunAdmission`) and is not configured here. Keying the records below off this
 // finite union (not the open `CreateTaskType`) keeps them exhaustive + undefined-free.
-type LimitTaskType = 'feature' | 'bug' | 'document' | 'spike' | 'review' | 'ralph'
+type LimitTaskType = 'feature' | 'bug' | 'document' | 'spike' | 'review' | 'ralph' | 'media'
 const TASK_TYPES: LimitTaskType[] = ['feature', 'bug', 'document', 'spike']
 
 // Per-task-type label for the "Max {type} tasks" inputs. An exhaustive Record keyed off
@@ -161,6 +161,7 @@ const TASK_TYPE_KEYS: Record<LimitTaskType, string> = {
   spike: 'settings.workspaceSettings.taskTypes.spike',
   review: 'settings.workspaceSettings.taskTypes.review',
   ralph: 'settings.workspaceSettings.taskTypes.ralph',
+  media: 'settings.workspaceSettings.taskTypes.media',
 }
 
 const MODES = computed<{ value: TaskLimitMode; label: string }[]>(() => [
@@ -197,6 +198,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 +222,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 +286,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 +552,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/api/visualConfirm.ts

@@ -49,12 +49,21 @@ export function visualConfirmApi({ send, ws, http }: ApiContext) {
     },
 
     // Fetch a stored artifact's bytes and turn them into an object URL for an <img>.
-    fetchArtifactBlobUrl: async (workspaceId: string, artifactId: string): Promise<string> => {
+    //
+    // The blob's own `type` comes back beside the URL because it is the media type the SERVER
+    // decided to serve these bytes as, which is the only one a caller may render from. What the
+    // producing agent declared is a claim about a file; this is what the response actually is,
+    // after `blobResponseHeaders` has clamped anything outside the inline-image list down to
+    // `application/octet-stream`.
+    fetchArtifactBlob: async (
+      workspaceId: string,
+      artifactId: string,
+    ): Promise<{ url: string; contentType: string }> => {
       const blob: Blob = await http(
         `${ws(workspaceId)}/artifacts/${encodeURIComponent(artifactId)}/blob`,
         { method: 'GET', responseType: 'blob' },
       )
-      return URL.createObjectURL(blob)
+      return { url: URL.createObjectURL(blob), contentType: blob.type }
     },
   }
 }