@cat-factory/app 0.311.3 → 0.313.0

package/app/components/layout/WorkViewSwitcher.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { WorkView } from '~/utils/workView'
+import SectionLabel from '~/components/common/SectionLabel.vue'
+
+/**
+ * The sidebar's "Views" section: the queue and the canvas, as two views of one board.
+ *
+ * A view SWITCHER, not a list of destinations, which is why it is not a `nav` contribution: a
+ * contribution opens something, and these change what the main area shows, so they need the
+ * selected state a contribution has no shape for. Shown in every tier and every role: which view
+ * a person works in is their choice, and neither view is an override of the other.
+ */
+defineProps<{ collapsed: boolean }>()
+
+const { t } = useI18n()
+const views = useWorkViewStore()
+const queue = useWorkspaceQueueStore()
+
+const ITEMS: { view: WorkView; icon: string; labelKey: string }[] = [
+  { view: 'queue', icon: 'i-lucide-list-checks', labelKey: 'views.queue' },
+  { view: 'board', icon: 'i-lucide-map', labelKey: 'views.board' },
+]
+</script>
+
+<template>
+  <section data-testid="work-view-switcher">
+    <SectionLabel v-if="!collapsed" as="h2" class="mb-2 px-1">
+      {{ t('views.title') }}
+    </SectionLabel>
+    <div class="space-y-1.5">
+      <UButton
+        v-for="item in ITEMS"
+        :key="item.view"
+        :block="!collapsed"
+        :square="collapsed"
+        size="sm"
+        :color="views.view === item.view ? 'primary' : 'neutral'"
+        :variant="views.view === item.view ? 'soft' : 'ghost'"
+        :icon="item.icon"
+        class="w-full"
+        :class="collapsed ? 'justify-center' : 'justify-start'"
+        :aria-label="collapsed ? t(item.labelKey) : undefined"
+        :aria-current="views.view === item.view ? 'page' : undefined"
+        :title="collapsed ? t(item.labelKey) : undefined"
+        :data-testid="`work-view-${item.view}`"
+        @click="views.show(item.view)"
+      >
+        <template v-if="!collapsed">
+          <span class="flex-1 truncate text-start">{{ t(item.labelKey) }}</span>
+          <!-- The queue's count: tasks an agent cannot continue until a person acts. -->
+          <UBadge
+            v-if="item.view === 'queue' && queue.needsYouCount > 0"
+            size="sm"
+            color="warning"
+            variant="subtle"
+            data-testid="work-view-queue-count"
+          >
+            {{ queue.needsYouCount }}
+          </UBadge>
+        </template>
+      </UButton>
+    </div>
+  </section>
+</template>

package/app/components/queue/QueueCard.vue

@@ -0,0 +1,269 @@
+<script setup lang="ts">
+import { agentKindMeta } from '~/utils/catalog'
+import { formatDuration, useNowTick } from '~/composables/useStepTimer'
+import { useFramePlacement } from '~/composables/useFramePlacement'
+import { LANE_REASON_LABEL_KEYS } from '~/utils/swimlanes'
+import type { QueueEntry } from '~/utils/queueSections'
+import IconButton from '~/components/common/IconButton.vue'
+import AgentFailureCard from '~/components/board/AgentFailureCard.vue'
+
+/**
+ * One task in the queue: why it is here, where it lives, and the ONE thing to do about it.
+ *
+ * The board's card answers "what is this task's state"; this card answers "what do I do next",
+ * so it carries a single primary action derived from the lane REASON, and the inspector one
+ * click away for everything else. The actions themselves are the board card's
+ * (`useTaskActions`), so Start, Resolve and Merge behave identically on both surfaces, and a failed
+ * run shows the same `AgentFailureCard` the board card shows, with its Retry.
+ *
+ * Every action is `soft`, as on the board card: the queue lists many cards at once, and a solid
+ * button on each would put many primaries in one view.
+ */
+const props = defineProps<{ entry: QueueEntry }>()
+
+const { t } = useI18n()
+const ui = useUiStore()
+const execution = useExecutionStore()
+const agentRuns = useAgentRunsStore()
+const views = useWorkViewStore()
+const { focusFrame } = useFramePlacement()
+// A shared 30s clock, so "waited 4m" advances on a quiet board instead of freezing until some
+// unrelated event re-evaluates the card.
+const nowTick = useNowTick(30_000)
+
+const taskId = () => props.entry.task.id
+const {
+  task,
+  runnable,
+  canExecute,
+  executeDeniedTitle,
+  unmet,
+  sandboxed,
+  outcomeReadable,
+  openOutcome,
+  starting,
+  start,
+  merge,
+  pendingDecision,
+  reviewStageLabel,
+  attention,
+} = useTaskActions(taskId)
+
+const reason = computed(() => props.entry.reason)
+const run = computed(() => execution.getByBlock(props.entry.task.id) ?? null)
+const agentRun = computed(() => agentRuns.byBlock[props.entry.task.id])
+const runFailed = computed(() => agentRun.value?.status === 'failed')
+
+/** The eyebrow's time fact: how long a human has kept it waiting, or how fresh the run is. */
+const timeFact = computed(() => {
+  const now = nowTick.value
+  // The clock reads 0 until the card has mounted and subscribed.
+  if (!now) return null
+  const e = props.entry
+  if (reason.value === 'merged' && e.task.completedAt != null)
+    return t('queue.card.merged', { duration: formatDuration(now - e.task.completedAt) })
+  if (e.waitingSince != null)
+    return t('queue.card.waited', { duration: formatDuration(now - e.waitingSince) })
+  if ((reason.value === 'running' || reason.value === 'background_review') && e.activityAt != null)
+    return t('queue.card.active', { duration: formatDuration(now - e.activityAt) })
+  return null
+})
+
+/** The step a live run is on, as "step 5 of 9 · Coder". Null when no run is in flight. */
+const stepFact = computed(() => {
+  const r = run.value
+  if (!r || r.steps.length === 0) return null
+  const step = r.steps[r.currentStep]
+  const position = t('queue.card.step', {
+    current: Math.min(r.currentStep + 1, r.steps.length),
+    total: r.steps.length,
+  })
+  return step ? `${position} · ${agentKindMeta(step.agentKind).label}` : position
+})
+
+/** One line of context: what the human would want to know before pressing the button. */
+const context = computed<string | null>(() => {
+  switch (reason.value) {
+    case 'decision':
+      return pendingDecision.value?.decision.question ?? null
+    case 'budget_paused':
+      return t('queue.card.budgetPaused')
+    case 'parked':
+    case 'unclassified':
+      return t('queue.card.parked')
+    case 'dependencies':
+      return t('queue.card.waitingOn', { deps: unmet.value.map((d) => d.title).join(', ') })
+    case 'background_review':
+      return reviewStageLabel.value
+    default:
+      return null
+  }
+})
+
+/**
+ * The eyebrow's first word. The lane reason, except in the merge column, whose header already says
+ * "ready to merge": there the pull request's own number is the more useful fact.
+ */
+const eyebrow = computed(() => {
+  const pr = props.entry.task.pullRequest
+  if (reason.value === 'pr_awaiting_merge' && pr?.number)
+    return t('queue.card.pr', { number: pr.number })
+  return t(LANE_REASON_LABEL_KEYS[reason.value])
+})
+
+const showProgress = computed(
+  () => reason.value === 'running' || reason.value === 'background_review',
+)
+
+/** The inspector is showing this card's task. Its border wins over the hover one. */
+const selected = computed(() => ui.selectedBlockId === props.entry.task.id)
+
+function openTask() {
+  ui.select(props.entry.task.id)
+}
+
+/**
+ * Leave the queue for the canvas, with this task selected and its service in view. The canvas
+ * kept its own camera while the queue covered it, so without the pan the task is usually off
+ * screen. A task has no position of its own (it lives in its frame's swimlanes), so the camera
+ * centres on the frame.
+ */
+function showOnBoard() {
+  views.show('board')
+  ui.select(props.entry.task.id)
+  void focusFrame(props.entry.service?.id ?? props.entry.task.id)
+}
+</script>
+
+<template>
+  <!-- The whole card opens the task, as the board's card does: a click anywhere on it selects
+       the task, and each control inside stops its own click. The title stays a button, so the
+       card is reachable by keyboard. -->
+  <article
+    v-if="task"
+    class="rounded-lg border bg-default p-3 transition-colors"
+    :class="selected ? 'border-inverted' : 'border-muted hover:border-accented'"
+    @click="openTask"
+    data-testid="queue-card"
+    :data-queue-task="task.id"
+    :data-reason="reason"
+  >
+    <div class="flex items-center gap-1.5 text-3xs uppercase tracking-wide text-dimmed">
+      <span
+        class="shrink-0 font-semibold whitespace-nowrap"
+        :class="
+          reason === 'failed'
+            ? 'text-error'
+            : entry.reason === 'pr_awaiting_merge'
+              ? 'text-success'
+              : 'text-highlighted'
+        "
+      >
+        {{ eyebrow }}
+      </span>
+      <span v-if="entry.service" class="min-w-0 truncate">· {{ entry.service.title }}</span>
+      <span v-if="timeFact" class="shrink-0 whitespace-nowrap">· {{ timeFact }}</span>
+      <IconButton
+        class="ms-auto shrink-0"
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        icon="i-lucide-map"
+        :label="t('queue.card.showOnBoard')"
+        @click.stop="showOnBoard"
+      />
+    </div>
+
+    <!-- The card's keyboard target: Enter on it opens the task, as a click on the card does. -->
+    <UButton
+      color="neutral"
+      variant="link"
+      class="mt-1 w-full p-0 text-start text-sm font-semibold leading-snug text-highlighted"
+      data-testid="queue-card-title"
+      @click.stop="openTask"
+    >
+      {{ task.title }}
+    </UButton>
+
+    <p v-if="context" class="mt-1 line-clamp-2 text-xs text-muted" :title="context">
+      {{ context }}
+    </p>
+
+    <!-- A failed run: the same failure banner and Retry the board card shows. -->
+    <AgentFailureCard
+      v-if="reason === 'failed' && runFailed && agentRun"
+      :run="agentRun"
+      variant="compact"
+      class="mt-2"
+    />
+
+    <div v-if="showProgress" class="mt-2 space-y-1">
+      <UProgress :model-value="Math.round(task.progress * 100)" size="xs" />
+      <p v-if="stepFact" class="text-2xs text-dimmed">{{ stepFact }}</p>
+    </div>
+
+    <div class="mt-3 flex flex-wrap items-center gap-2 empty:hidden">
+      <!-- Parked on a decision or an approval: the gate itself, one click away. -->
+      <UButton
+        v-if="attention"
+        color="warning"
+        variant="soft"
+        size="xs"
+        :icon="attention.icon"
+        data-testid="queue-card-primary"
+        @click.stop="attention.open()"
+      >
+        {{ reason === 'decision' ? t('queue.card.answer') : attention.action }}
+      </UButton>
+
+      <template v-else-if="reason === 'pr_awaiting_merge'">
+        <UButton
+          v-if="outcomeReadable"
+          variant="soft"
+          size="xs"
+          icon="i-lucide-clipboard-check"
+          data-testid="queue-card-primary"
+          @click.stop="openOutcome"
+        >
+          {{ t('board.task.readOutcome') }}
+        </UButton>
+        <UButton
+          color="success"
+          :variant="outcomeReadable ? 'outline' : 'soft'"
+          size="xs"
+          icon="i-lucide-git-merge"
+          :disabled="!canExecute"
+          :title="executeDeniedTitle"
+          @click.stop="merge"
+        >
+          {{ t('board.task.merge') }}
+        </UButton>
+      </template>
+
+      <UButton
+        v-else-if="reason === 'unstarted'"
+        variant="soft"
+        size="xs"
+        :icon="sandboxed ? 'i-lucide-shield' : 'i-lucide-play'"
+        :loading="starting"
+        :disabled="!runnable || starting || !canExecute"
+        :title="executeDeniedTitle"
+        data-testid="queue-card-primary"
+        @click.stop="start"
+      >
+        {{ starting ? t('board.task.starting') : t('board.task.start') }}
+      </UButton>
+
+      <UButton
+        v-else-if="reason === 'merged' && outcomeReadable"
+        size="xs"
+        variant="soft"
+        icon="i-lucide-clipboard-check"
+        data-testid="queue-card-primary"
+        @click.stop="openOutcome"
+      >
+        {{ t('board.task.readOutcome') }}
+      </UButton>
+    </div>
+  </article>
+</template>

package/app/components/queue/QueueView.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import type { QueueEntry } from '~/utils/queueSections'
+import QueueCard from '~/components/queue/QueueCard.vue'
+import NotificationsInbox from '~/components/layout/NotificationsInbox.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
+
+/**
+ * The queue: every task across every service, in the column that says what it needs. One of the
+ * board's two views (issue #2258); the canvas is the other.
+ *
+ * Three columns, read left to right in order of urgency: what is stalled on you, what agents are
+ * doing, what is finished and waiting to land. Work nobody has started sits under "In flight" as
+ * a short list, and recent merges sit under "Ready to merge" behind a count, because neither is
+ * what a person opening the app came to act on first. The canvas stays one click away as the
+ * planning view.
+ */
+const { t, d } = useI18n()
+const workspaceSettings = useWorkspaceSettingsStore()
+const ui = useUiStore()
+const board = useBoardStore()
+
+/**
+ * Where the Done window starts: the workspace's Done-lane retention, the same one each frame's
+ * Done lane applies. Stated as a date, so no sentence has to agree with a number of days. Null
+ * when the workspace keeps no age cap.
+ */
+const doneSince = computed(() => {
+  const days = workspaceSettings.settings.doneLaneRetentionDays
+  return days == null ? null : new Date(Date.now() - days * 86_400_000)
+})
+const queueStore = useWorkspaceQueueStore()
+
+const sections = computed(() => queueStore.queue.sections)
+const doneOpen = ref(false)
+
+const serviceItems = computed(() => [
+  { label: t('queue.filter.allServices'), value: '__all__' },
+  ...queueStore.services.map((s) => ({ label: s.title, value: s.id })),
+])
+const serviceValue = computed({
+  get: () => queueStore.serviceFilter ?? '__all__',
+  set: (v: string) => (queueStore.serviceFilter = v === '__all__' ? null : v),
+})
+
+interface Column {
+  id: 'needs_you' | 'in_flight' | 'ready_to_merge'
+  icon: string
+  entries: QueueEntry[]
+}
+const columns = computed<Column[]>(() => [
+  { id: 'needs_you', icon: 'i-lucide-hand', entries: sections.value.needs_you },
+  { id: 'in_flight', icon: 'i-lucide-loader', entries: sections.value.in_flight },
+  { id: 'ready_to_merge', icon: 'i-lucide-git-merge', entries: sections.value.ready_to_merge },
+])
+
+const COLUMN_COPY: Record<Column['id'], { label: string; empty: string }> = {
+  needs_you: { label: 'queue.columns.needsYou.label', empty: 'queue.columns.needsYou.empty' },
+  in_flight: { label: 'queue.columns.inFlight.label', empty: 'queue.columns.inFlight.empty' },
+  ready_to_merge: {
+    label: 'queue.columns.readyToMerge.label',
+    empty: 'queue.columns.readyToMerge.empty',
+  },
+}
+
+const COLUMN_ACCENT: Record<Column['id'], string> = {
+  needs_you: 'text-warning',
+  in_flight: 'text-primary',
+  ready_to_merge: 'text-success',
+}
+
+/**
+ * Whether the inspector is on screen beside the queue. On a wide screen it floats over the
+ * board's right edge (`InspectorPanel`, `lg:w-80` at `lg:end-4`), which is where the queue's
+ * last column sits, so the columns give it that width (20rem, its 1rem offset and a 1rem gap)
+ * rather than letting it cover them. Below `lg` it is a bottom sheet the reader opens and closes.
+ */
+const inspectorOpen = computed(() => !!ui.selectedBlockId && !!board.getBlock(ui.selectedBlockId))
+</script>
+
+<template>
+  <div class="flex h-full flex-col overflow-hidden" data-testid="queue-view">
+    <!-- `ps-14` below lg leaves room for the drawer's menu button in the corner. -->
+    <header
+      class="flex flex-wrap items-center gap-x-4 gap-y-2 ps-14 pe-4 pt-4 pb-3 sm:pe-6 lg:ps-6"
+    >
+      <div class="flex items-baseline gap-2">
+        <h1 class="text-xl font-semibold text-highlighted">{{ t('queue.title') }}</h1>
+        <span class="text-sm text-muted" data-testid="queue-summary">
+          {{
+            t('queue.summary', {
+              needsYou: sections.needs_you.length,
+              ready: sections.ready_to_merge.length,
+            })
+          }}
+        </span>
+      </div>
+      <div class="ms-auto flex flex-wrap items-center gap-2">
+        <USelect
+          v-model="serviceValue"
+          :items="serviceItems"
+          size="sm"
+          class="w-48"
+          :aria-label="t('queue.filter.service')"
+          data-testid="queue-service-filter"
+        />
+        <!-- The inbox still holds what is NOT a task: platform alerts, budget thresholds, key
+             drift. The canvas shows it in its toolbar, which this view does not have. -->
+        <NotificationsInbox />
+      </div>
+    </header>
+
+    <div
+      class="grid min-h-0 flex-1 grid-cols-1 gap-4 overflow-y-auto px-4 pb-6 transition-[padding] sm:px-6 md:grid-cols-3 md:overflow-hidden"
+      :class="inspectorOpen ? 'lg:pe-[22rem]' : ''"
+    >
+      <section
+        v-for="column in columns"
+        :key="column.id"
+        class="flex min-h-0 flex-col rounded-xl border border-muted bg-elevated/40"
+        data-testid="queue-column"
+        :data-column="column.id"
+      >
+        <div class="flex items-center gap-2 px-3 pt-3 pb-2">
+          <UIcon :name="column.icon" class="h-4 w-4" :class="COLUMN_ACCENT[column.id]" />
+          <SectionLabel as="h2">{{ t(COLUMN_COPY[column.id].label) }}</SectionLabel>
+          <UBadge class="ms-auto" color="neutral" variant="subtle" size="sm">
+            {{ column.entries.length }}
+          </UBadge>
+        </div>
+
+        <div class="min-h-0 flex-1 space-y-2 overflow-y-auto px-3 pb-3">
+          <QueueCard v-for="entry in column.entries" :key="entry.task.id" :entry="entry" />
+          <p v-if="column.entries.length === 0" class="px-1 py-6 text-center text-xs text-dimmed">
+            {{ t(COLUMN_COPY[column.id].empty) }}
+          </p>
+
+          <!-- Not started: under In flight, because it is the next thing that column will hold. -->
+          <template v-if="column.id === 'in_flight'">
+            <USeparator class="my-3" />
+            <SectionLabel as="h3" class="px-1">
+              {{ t('queue.waiting.label', { count: sections.waiting.length }) }}
+            </SectionLabel>
+            <QueueCard v-for="entry in sections.waiting" :key="entry.task.id" :entry="entry" />
+            <p v-if="sections.waiting.length === 0" class="px-1 text-xs text-dimmed">
+              {{ t('queue.waiting.empty') }}
+            </p>
+          </template>
+
+          <!-- Recent merges: a count, and the list on request. The queue is about now. -->
+          <template v-if="column.id === 'ready_to_merge'">
+            <USeparator class="my-3" />
+            <div class="flex items-center gap-2 px-1 text-xs text-muted">
+              <span data-testid="queue-done-count">
+                {{
+                  doneSince
+                    ? t('queue.done.count', {
+                        count: queueStore.queue.doneInWindow,
+                        date: d(doneSince, 'short'),
+                      })
+                    : t('queue.done.countAll', { count: queueStore.queue.doneInWindow })
+                }}
+              </span>
+              <UButton
+                v-if="queueStore.queue.doneInWindow > 0"
+                variant="link"
+                size="xs"
+                class="p-0"
+                @click="doneOpen = !doneOpen"
+              >
+                {{ doneOpen ? t('queue.done.hide') : t('queue.done.show') }}
+              </UButton>
+            </div>
+            <template v-if="doneOpen">
+              <QueueCard v-for="entry in sections.done" :key="entry.task.id" :entry="entry" />
+              <p
+                v-if="queueStore.queue.doneInWindow > sections.done.length"
+                class="px-1 text-2xs text-dimmed"
+              >
+                {{
+                  t('queue.done.capped', {
+                    shown: sections.done.length,
+                    total: queueStore.queue.doneInWindow,
+                  })
+                }}
+              </p>
+            </template>
+          </template>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>