@cat-factory/app 0.311.2 → 0.312.0

package/app/stores/board/context.ts

@@ -1,5 +1,6 @@
 import type { Ref } from 'vue'
 import type { Block } from '~/types/domain'
+import type { ActionToast } from '~/composables/useActionToast'
 
 /** A detached subtree captured before an optimistic delete, restored on failure. */
 export interface RemovalSnapshot {
@@ -31,7 +32,7 @@ export const UNDO_WINDOW_MS = 6000
  * the `board` store setup and threaded into {@link createBoardMutations} / {@link createBoardRemoval}
  * so the split operations stay behaviourally identical to the original single-closure store — the
  * factories are cohesive extractions purely to keep each function within the size budget, not new
- * seams. `api`/`toast`/`tr`/`present` are the store's own resolved handles (a store runs outside a
+ * seams. `api`/`actionToast`/`tr`/`present` are the store's own resolved handles (a store runs outside a
  * component `setup`, so `tr` bridges to the Nuxt app's global i18n instance).
  */
 export interface BoardWriteContext {
@@ -41,10 +42,10 @@ export interface BoardWriteContext {
   pendingRemovals: Map<string, PendingRemoval>
   pendingDoomed: Set<string>
   api: ReturnType<typeof useApi>
-  toast: ReturnType<typeof useToast>
+  actionToast: ActionToast
   tr: (key: string, params?: Record<string, unknown>) => string
   /**
-   * The SPA's one failure-toast funnel (`usePipelineErrorToast().present`), threaded like `toast`
+   * The SPA's one failure-toast funnel (`usePipelineErrorToast().present`), threaded like `actionToast`
    * because it is resolved in the store setup. Every rolled-back write reports through it rather
    * than building its own `{ title, description: err.message }`, so a board failure reads the same
    * as every other one: translated copy, and the raw detail copyable behind the disclosure.

package/app/stores/board/placement.ts

@@ -35,7 +35,7 @@ function blockAsPatchable(block: Block): PatchSnapshot {
  * in-closure functions, and the split is purely to keep every function within the size budget.
  */
 export function createBoardPlacement(ctx: BoardWriteContext) {
-  const { blocks, getBlock, upsert, api, toast, tr, present } = ctx
+  const { blocks, getBlock, upsert, api, actionToast, tr, present } = ctx
 
   /**
    * Move a block into a new container at a new local position. Drag-reparent commits
@@ -78,19 +78,12 @@ export function createBoardPlacement(ctx: BoardWriteContext) {
       // Offer an undo back to the previous container (a drag overshoot is easy). The undo
       // move is itself non-undoable so the toast doesn't ping-pong.
       if (opts.undoable && prevParentId) {
-        toast.add({
-          title: tr('board.toast.moved', { name }),
-          icon: 'i-lucide-move',
-          color: 'neutral',
-          duration: UNDO_WINDOW_MS,
-          actions: [
-            {
-              label: tr('common.undo'),
-              icon: 'i-lucide-undo-2',
-              onClick: () =>
-                void reparentBlock(id, prevParentId, prevPosition, { undoable: false }),
-            },
-          ],
+        actionToast.success('board.toast.moved', {
+          params: { name },
+          undo: {
+            run: () => void reparentBlock(id, prevParentId, prevPosition, { undoable: false }),
+            windowMs: UNDO_WINDOW_MS,
+          },
         })
       }
     } catch (e) {
@@ -102,12 +95,7 @@ export function createBoardPlacement(ctx: BoardWriteContext) {
       // translated prose, so map it here; anything else keeps the raw message as the last resort.
       const refusal = moveRefusalKey(e)
       if (refusal) {
-        toast.add({
-          title: tr('board.toast.moveFailed'),
-          description: tr(refusal),
-          icon: 'i-lucide-triangle-alert',
-          color: 'error',
-        })
+        actionToast.error('board.toast.moveFailed', { description: tr(refusal) })
       } else present(e, 'board.toast.moveFailed')
     }
   }

package/app/stores/board/removal.ts

@@ -11,7 +11,7 @@ import { UNDO_WINDOW_MS } from './context'
  * stays internal — it is only wired into the delete toast's undo action.
  */
 export function createBoardRemoval(ctx: BoardWriteContext) {
-  const { blocks, getBlock, pendingRemovals, pendingDoomed, api, toast, tr, present } = ctx
+  const { blocks, getBlock, pendingRemovals, pendingDoomed, api, actionToast, present } = ctx
 
   /**
    * Optimistically drop a block and its descendants from the cache, returning a
@@ -148,18 +148,9 @@ export function createBoardRemoval(ctx: BoardWriteContext) {
     const timer = setTimeout(() => void finalize(), UNDO_WINDOW_MS)
     pendingRemovals.set(id, { snap, timer, wsId })
 
-    toast.add({
-      title: tr('board.toast.deleted', { name: block.title }),
-      icon: 'i-lucide-trash-2',
-      color: 'neutral',
-      duration: UNDO_WINDOW_MS,
-      actions: [
-        {
-          label: tr('common.undo'),
-          icon: 'i-lucide-undo-2',
-          onClick: () => undoRemove(id),
-        },
-      ],
+    actionToast.success('board.toast.deleted', {
+      params: { name: block.title },
+      undo: { run: () => undoRemove(id), windowMs: UNDO_WINDOW_MS },
     })
   }
 

package/app/stores/board.spec.ts

@@ -3,6 +3,7 @@ import { setActivePinia, createPinia } from 'pinia'
 import type { Block, BlockStatus } from '~/types/domain'
 import { useBoardStore } from '~/stores/board'
 import { useWorkspaceStore } from '~/stores/workspace'
+import { UNDO_WINDOW_MS } from '~/stores/board/context'
 import { EMPTY_FRAME_SIZE } from '~/utils/framePlacement'
 import { frameContentSize, laneBodyHeightIn, LANE_GEOMETRY } from '~/utils/laneGeometry'
 
@@ -591,9 +592,17 @@ describe('board store deferred delete + undo', () => {
   })
 
   it('undo cancels the pending delete and restores the subtree', async () => {
-    const { store, removeSpy, actions } = setup(async () => {})
+    const { store, removeSpy, addSpy, actions } = setup(async () => {})
     store.hydrate([frame('f1'), moduleBlock('m1', 'f1'), task('t1', 'm1')])
     store.removeBlock('f1')
+    // The toast stays exactly as long as the delete is held open, or its Undo would undo nothing.
+    expect(addSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: 'board.toast.deleted',
+        color: 'success',
+        duration: UNDO_WINDOW_MS,
+      }),
+    )
     expect(actions).toHaveLength(1)
     actions[0]!.onClick()
     expect(store.getBlock('f1')?.id).toBe('f1')

package/app/stores/board.ts

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import type { Block } from '~/types/domain'
 import { useBlockQueries } from '~/composables/useBlockQueries'
+import { useActionToast } from '~/composables/useActionToast'
 import type { PendingRemoval } from '~/stores/board/context'
 import { createBoardMutations } from '~/stores/board/mutations'
 import { createBoardPlacement } from '~/stores/board/placement'
@@ -19,7 +20,7 @@ import { createBoardRemoval } from '~/stores/board/removal'
  */
 export const useBoardStore = defineStore('board', () => {
   const api = useApi()
-  const toast = useToast()
+  const actionToast = useActionToast()
   // Stores run outside a component `setup`, so resolve translations through the Nuxt app's
   // global i18n instance (the same handle `plugins/locale.client.ts` uses) rather than
   // `useI18n()`, which requires an active component instance.
@@ -148,7 +149,7 @@ export const useBoardStore = defineStore('board', () => {
     pendingRemovals,
     pendingDoomed,
     api,
-    toast,
+    actionToast,
     tr,
     present: usePipelineErrorToast().present,
   }

package/app/stores/workView.ts

@@ -0,0 +1,51 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+import { DEFAULT_WORK_VIEW, isWorkView, WORK_VIEW_PARAM, type WorkView } from '~/utils/workView'
+
+/**
+ * Which view of the board this person is looking at: the queue or the canvas.
+ *
+ * Persisted per BROWSER in a cookie, like the interface tier and the lane order: it is the view
+ * used LAST in this browser, so a person who prefers the canvas stays on it, and nobody on another
+ * browser is moved by their choice. See `utils/workView.ts` for why the queue is the default.
+ */
+export const useWorkViewStore = defineStore(
+  'workView',
+  () => {
+    const tutorial = useTutorialStore()
+    // Stored raw and narrowed on read, as `uiMode` does: the persisted value is untrusted input.
+    const storedView = ref<string>(DEFAULT_WORK_VIEW)
+    /**
+     * The view on screen. A running tour holds the CANVAS for its whole length: every tour anchors
+     * to canvas nodes and the canvas toolbar, which the queue covers or unmounts, so a switch mid-
+     * tour would leave its later steps with nothing to point at. A choice made meanwhile is kept
+     * and applies when the tour ends.
+     */
+    const view = computed<WorkView>(() => {
+      if (tutorial.touring) return 'board'
+      return isWorkView(storedView.value) ? storedView.value : DEFAULT_WORK_VIEW
+    })
+
+    function show(next: WorkView) {
+      storedView.value = next
+    }
+
+    /**
+     * Honour a `?view=queue` / `?view=board` link, then strip the parameter so a reload or a
+     * copied URL does not re-apply it over a later choice. Same shape as the run deep link. A
+     * `view` value that names no view is dropped without effect, rather than guessed onto one.
+     */
+    function consumeDeepLink() {
+      if (!import.meta.client) return
+      const url = new URL(window.location.href)
+      if (!url.searchParams.has(WORK_VIEW_PARAM)) return
+      const asked = url.searchParams.get(WORK_VIEW_PARAM)
+      url.searchParams.delete(WORK_VIEW_PARAM)
+      window.history.replaceState(window.history.state, '', url.toString())
+      if (isWorkView(asked)) show(asked)
+    }
+
+    return { storedView, view, show, consumeDeepLink }
+  },
+  { persist: { pick: ['storedView'] } },
+)

package/app/stores/workspaceQueue.ts

@@ -0,0 +1,148 @@
+import { defineStore } from 'pinia'
+import { computed, ref, watch } from 'vue'
+import type { Block } from '~/types/domain'
+import { useTaskLaneClassifier, type ClassifiedEntry } from '~/composables/useTaskLaneClassifier'
+import {
+  assembleQueue,
+  QUEUE_SECTION_BY_REASON,
+  type QueueAssembly,
+  type QueueEntry,
+} from '~/utils/queueSections'
+
+/**
+ * Every task on the board, across every service, classified ONCE and filed into queue sections.
+ *
+ * The store-facing half of `utils/queueSections.ts`, and a STORE rather than a composable for the
+ * reason the swimlane README gives: a workspace-wide derivation belongs on one owner, never on each
+ * consumer. The queue view, the sidebar's attention counter AND every frame's swimlanes
+ * (`useFrameLanes`) read the one classification here, so a board pays for each task's verdict once
+ * per change, however many surfaces show it.
+ *
+ * It walks the service frames rather than `board.allTasks` so it holds exactly the tasks the
+ * frames' own swimlanes hold (direct tasks plus those inside modules): a task the canvas shows
+ * nowhere is not one the queue may claim needs you.
+ */
+export const useWorkspaceQueueStore = defineStore('workspaceQueue', () => {
+  const board = useBoardStore()
+  const execution = useExecutionStore()
+  const workspace = useWorkspaceStore()
+  const settings = useWorkspaceSettingsStore()
+  const reviews = useReviewStage()
+  const { classify } = useTaskLaneClassifier()
+
+  /**
+   * Each task's lane verdict, keyed by id. `order` is the task's position in its OWN frame, which
+   * is the tiebreak the frame's lanes sort by.
+   */
+  const classified = computed(() => {
+    const byId = new Map<string, ClassifiedEntry>()
+    for (const frame of board.frames) {
+      board
+        .allTasksUnder(frame.id)
+        .forEach((task, order) => byId.set(task.id, classify(task, order)))
+    }
+    return byId
+  })
+
+  /** Narrow the queue to one service; null means all of them. Session-only, like a search box. */
+  const serviceFilter = ref<string | null>(null)
+  // A filter belongs to the board it was set on: another board's service id matches nothing there.
+  watch(
+    () => workspace.workspaceId,
+    () => (serviceFilter.value = null),
+  )
+
+  /** The service frames, for the filter. Board order, which is the order the canvas lays out. */
+  const services = computed(() => board.frames.map((f) => ({ id: f.id, title: f.title })))
+
+  /** The filter in force: a service deleted since it was picked narrows to nothing, so it lapses. */
+  const activeFilter = computed(() =>
+    serviceFilter.value && services.value.some((s) => s.id === serviceFilter.value)
+      ? serviceFilter.value
+      : null,
+  )
+
+  /** Show every service. The surfaces that send a person to the queue call it, so a filter set
+   * earlier cannot hide the work they were sent to see. */
+  function clearFilter() {
+    serviceFilter.value = null
+  }
+
+  /**
+   * A decision or approval on a block that is not a task in a service: an initiative's planning
+   * run, or a frame-level run. The swimlanes have no lane for it, but it waits on a person all the
+   * same, and the toolbar's decision count includes it, so the queue lists it under Needs you.
+   */
+  const parkedElsewhere = computed<QueueEntry[]>(() => {
+    const ids = new Set<string>()
+    for (const d of execution.openDecisions) ids.add(d.blockId)
+    for (const a of execution.openApprovals) {
+      if (!reviews.isBackground(a.agentKind, a.blockId)) ids.add(a.blockId)
+    }
+    const out: QueueEntry[] = []
+    for (const id of ids) {
+      if (classified.value.has(id)) continue
+      const block = board.getBlock(id)
+      if (!block) continue
+      out.push(parkEntry(block, out.length))
+    }
+    return out
+  })
+
+  function parkEntry(block: Block, order: number): QueueEntry {
+    const { entry } = classify(block, order)
+    const service = board.serviceOf(block)
+    return {
+      ...entry,
+      reason: execution.decisionsByBlock.has(block.id) ? 'decision' : 'approval',
+      service: service ? { id: service.id, title: service.title } : null,
+    }
+  }
+
+  /** Everything the queue lists, before the filter. The attention counter reads this, unfiltered. */
+  const entries = computed<QueueEntry[]>(() => {
+    const out: QueueEntry[] = []
+    for (const frame of board.frames) {
+      const service = { id: frame.id, title: frame.title }
+      // `classified` walks these same frames and tasks, so every one of them has a verdict.
+      for (const task of board.allTasksUnder(frame.id)) {
+        out.push({ ...classified.value.get(task.id)!.entry, service })
+      }
+    }
+    return out.concat(parkedElsewhere.value)
+  })
+
+  // `Date.now()` is read non-reactively, as the frame's Done lane does: the window is
+  // re-evaluated on every board or run change, which on a live board is constantly.
+  const queue = computed<QueueAssembly>(() =>
+    assembleQueue(
+      activeFilter.value
+        ? entries.value.filter((e) => e.service?.id === activeFilter.value)
+        : entries.value,
+      Date.now(),
+      {
+        maxItems: settings.settings.doneLaneMaxItems,
+        retentionDays: settings.settings.doneLaneRetentionDays,
+      },
+    ),
+  )
+
+  /**
+   * The ONE attention count the queue view shows: what a human must act on before an agent can
+   * continue, across every service and regardless of the filter. A pull request waiting to merge
+   * is not in it, because nothing is stalled behind it (see `utils/queueSections.ts`).
+   */
+  const needsYouCount = computed(
+    () => entries.value.filter((e) => QUEUE_SECTION_BY_REASON[e.reason] === 'needs_you').length,
+  )
+
+  return {
+    classified,
+    serviceFilter,
+    activeFilter,
+    clearFilter,
+    services,
+    queue,
+    needsYouCount,
+  }
+})

package/app/utils/bootstrapSteps.ts

@@ -9,9 +9,11 @@ import type { BootstrapStepState } from '@cat-factory/contracts'
 // every instance: the step list renders on every in-progress, parked and failed bootstrap card on
 // the board, plus the inspector and the failure card.
 
-/** How one step state renders: its icon, the icon's tone, and the label's. */
+/** How one step state renders: its icon, whether it spins (through `<Spinner :spinning>`), the
+ * icon's tone, and the label's. */
 export interface BootstrapStepStyle {
   icon: string
+  spin: boolean
   iconClass: string
   labelClass: string
 }
@@ -24,36 +26,43 @@ export interface BootstrapStepStyle {
 export const BOOTSTRAP_STEP_STYLE: Record<BootstrapStepState, BootstrapStepStyle> = {
   pending: {
     icon: 'i-lucide-circle',
+    spin: false,
     iconClass: 'text-dimmed',
     labelClass: 'text-dimmed',
   },
   running: {
     icon: 'i-lucide-loader-circle',
-    iconClass: 'animate-spin text-app-warning-400',
+    spin: true,
+    iconClass: 'text-app-warning-400',
     labelClass: 'text-app-warning-100',
   },
   awaiting_review: {
     icon: 'i-lucide-user-check',
+    spin: false,
     iconClass: 'text-app-warning-400',
     labelClass: 'text-app-warning-100',
   },
   done: {
     icon: 'i-lucide-check-circle-2',
+    spin: false,
     iconClass: 'text-app-success-400',
     labelClass: 'text-muted',
   },
   failed: {
     icon: 'i-lucide-alert-triangle',
+    spin: false,
     iconClass: 'text-app-error-400',
     labelClass: 'text-app-error-200',
   },
   stopped: {
     icon: 'i-lucide-circle-stop',
+    spin: false,
     iconClass: 'text-muted',
     labelClass: 'text-toned',
   },
   unknown: {
     icon: 'i-lucide-help-circle',
+    spin: false,
     iconClass: 'text-muted',
     labelClass: 'text-muted',
   },

package/app/utils/pipelineRender.ts

@@ -341,14 +341,27 @@ function describeUnhandledSkipReason(reason: never): string {
 }
 
 /**
- * Tailwind classes for a subtask-item status icon. An in-progress item spins only
- * while the run is live: once the run has failed, a step left mid-flight (its item
- * state still `in_progress`) keeps its colour but stops spinning, matching the frozen
- * failure card. Completed items are emerald, everything else muted.
+ * Whether a subtask-item status icon spins (`<Spinner :spinning>`). An in-progress item spins only
+ * while the run is live: once the run has failed, a step left mid-flight (its item state still
+ * `in_progress`) keeps its colour but stops spinning, matching the frozen failure card.
+ */
+export function subtaskIconSpins(status: string, runFailed: boolean): boolean {
+  return status === 'in_progress' && !runFailed
+}
+
+/** The tone of a subtask-item status icon: in-progress is primary, completed is emerald, the rest
+ * muted. Pair it with {@link subtaskIconSpins}. */
+export function subtaskIconTone(status: string): string {
+  if (status === 'in_progress') return 'text-primary'
+  return status === 'completed' ? 'text-app-success-400' : 'text-dimmed'
+}
+
+/**
+ * Tone plus a hand-written spin, for `board/nodes/TaskPipelineMini.vue` alone. That file is held
+ * out of the feedback-states slice (#2252) while the task-card rework rewrites it; when it moves
+ * to `<Spinner :spinning="subtaskIconSpins(...)">`, delete this and its `PENDING` entry in
+ * `scripts/check-frontend-feedback.mjs`.
  */
 export function subtaskIconClass(status: string, runFailed: boolean): string[] {
-  return [
-    status === 'in_progress' ? (runFailed ? 'text-primary' : 'animate-spin text-primary') : '',
-    status === 'completed' ? 'text-app-success-400' : 'text-dimmed',
-  ]
+  return [subtaskIconTone(status), subtaskIconSpins(status, runFailed) ? 'animate-spin' : '']
 }

package/app/utils/queueSections.spec.ts

@@ -0,0 +1,111 @@
+import { describe, expect, it } from 'vitest'
+import type { Block } from '~/types/domain'
+import { LANE_BY_REASON, LANE_REASONS, type LaneReason } from '~/utils/swimlanes'
+import { assembleQueue, QUEUE_SECTION_BY_REASON, type QueueEntry } from '~/utils/queueSections'
+import type { DoneLaneCaps } from '~/utils/swimlanes'
+
+// The queue reads the frame lanes' verdict and must never contradict it. The one place it
+// splits differently (a PR waiting to merge gets its own column) is a regrouping INSIDE the
+// frame's `needs_you` lane, never a move across lanes.
+
+const NOW = 1_800_000_000_000
+const DAY = 86_400_000
+/** The caps a workspace sets for its frames' Done lane, which the queue applies too. */
+const CAPS: DoneLaneCaps = { maxItems: 20, retentionDays: 14 }
+
+function entry(id: string, reason: LaneReason, overrides: Partial<QueueEntry> = {}): QueueEntry {
+  return {
+    task: { id, title: id, status: 'ready', level: 'task' } as Block,
+    reason,
+    order: 0,
+    activityAt: null,
+    waitingSince: null,
+    moduleName: null,
+    initiativeName: null,
+    epicName: null,
+    service: { id: 'svc', title: 'Service' },
+    ...overrides,
+  }
+}
+
+describe('QUEUE_SECTION_BY_REASON', () => {
+  it('files every reason, and never across the lane the frame put it in', () => {
+    const laneOfSection = {
+      needs_you: 'needs_you',
+      ready_to_merge: 'needs_you',
+      in_flight: 'in_progress',
+      waiting: 'not_started',
+      done: 'done',
+    } as const
+    for (const reason of LANE_REASONS) {
+      expect(laneOfSection[QUEUE_SECTION_BY_REASON[reason]], reason).toBe(LANE_BY_REASON[reason])
+    }
+  })
+})
+
+describe('assembleQueue', () => {
+  it('puts a decision, a failure and a parked run in Needs you, and a waiting PR beside it', () => {
+    const { sections } = assembleQueue(
+      [
+        entry('decide', 'decision'),
+        entry('broken', 'failed'),
+        entry('parked', 'parked'),
+        entry('pr', 'pr_awaiting_merge'),
+      ],
+      NOW,
+      CAPS,
+    )
+    expect(sections.needs_you.map((e) => e.task.id).sort()).toEqual(['broken', 'decide', 'parked'])
+    expect(sections.ready_to_merge.map((e) => e.task.id)).toEqual(['pr'])
+  })
+
+  it('orders Needs you as the frame lane does: broken first, then the longest wait', () => {
+    const { sections } = assembleQueue(
+      [
+        entry('recent', 'decision', { waitingSince: NOW - 1000, order: 0 }),
+        entry('old', 'decision', { waitingSince: NOW - 5000, order: 1 }),
+        entry('broken', 'failed', { order: 2 }),
+      ],
+      NOW,
+      CAPS,
+    )
+    expect(sections.needs_you.map((e) => e.task.id)).toEqual(['broken', 'old', 'recent'])
+  })
+
+  it("applies the frames' Done-lane window: newest first, undated last, older ones left out", () => {
+    const merged = (id: string, completedAt: number | undefined) =>
+      entry(id, 'merged', {
+        task: { id, title: id, status: 'done', level: 'task', completedAt } as Block,
+      })
+    const queue = assembleQueue(
+      [
+        merged('yesterday', NOW - DAY),
+        merged('today', NOW - 1000),
+        merged('ancient', NOW - (CAPS.retentionDays! + 1) * DAY),
+        merged('undated', undefined),
+      ],
+      NOW,
+      CAPS,
+    )
+    expect(queue.sections.done.map((e) => e.task.id)).toEqual(['today', 'yesterday', 'undated'])
+    expect(queue.doneInWindow).toBe(3)
+  })
+
+  it('caps the Done list but never the count above it', () => {
+    const many = Array.from({ length: CAPS.maxItems + 3 }, (_, i) =>
+      entry(`m${i}`, 'merged', {
+        order: i,
+        task: {
+          id: `m${i}`,
+          title: '',
+          status: 'done',
+          level: 'task',
+          completedAt: NOW - i,
+        } as Block,
+      }),
+    )
+    const queue = assembleQueue(many, NOW, CAPS)
+    expect(queue.sections.done).toHaveLength(CAPS.maxItems)
+    expect(queue.doneInWindow).toBe(many.length)
+  })
+})