@cat-factory/app 0.312.0 → 0.314.0

package/app/components/queue/DescribeWorkModal.vue

@@ -0,0 +1,367 @@
+<script setup lang="ts">
+import PipelinePicker from '~/components/pipeline/PipelinePicker.vue'
+import RiskPolicyPicker from '~/components/riskPolicy/RiskPolicyPicker.vue'
+import { parseConflict } from '~/composables/usePipelineErrorToast'
+import { splitDescribedWork } from '~/utils/describeWork'
+import { isReviewDebtConflict, reviewFrictionContext } from '~/utils/reviewFriction'
+import { pipelineAllowedForManualStart } from '~/utils/pipeline'
+import { showOverrideField } from '~/utils/uiMode'
+
+/**
+ * The one-sentence intake (issue #2258): what needs doing, which service, feature or bug. Nothing else on the
+ * first screen.
+ *
+ * Every override the full "Add a task" form offers up front (pipeline, merge policy, model
+ * preset) has a workspace default, so here they sit behind ONE "Change how this runs" disclosure
+ * that names the defaults it would use. Inside it, the merge policy and model preset follow the
+ * full form's tier rule (`showOverrideField`): the basic tier and the designer role, whose tier is
+ * capped at basic, see the pipeline only.
+ *
+ * The other task kinds and context attachments are not rebuilt here: "More kinds" and "Attach
+ * context" hand the text over to the full form, prefilled, which is the one place those rules
+ * live.
+ */
+const { t } = useI18n()
+const board = useBoardStore()
+const ui = useUiStore()
+const pipelines = usePipelinesStore()
+const riskPolicies = useRiskPoliciesStore()
+const modelPresets = useModelPresetsStore()
+const access = useWorkspaceAccess()
+const uiMode = useUiModeStore()
+const toast = useActionToast()
+const { present } = usePipelineErrorToast()
+const pipelineFor = useStartPipelineResolver()
+const { startTask } = useStartWithFeedback()
+
+const text = ref('')
+const serviceId = ref<string | undefined>(undefined)
+/** The two kinds this dialog offers. Every other kind is the full form's (see "More kinds"). */
+const kind = ref<'feature' | 'bug'>('feature')
+const pipelineId = ref('')
+const riskPolicyId = ref('')
+const modelPresetId = ref('')
+const saving = ref(false)
+
+const services = computed(() => board.frames.filter((f) => f.type !== 'document'))
+const serviceItems = computed(() => services.value.map((s) => ({ label: s.title, value: s.id })))
+const service = computed(() => (serviceId.value ? board.getBlock(serviceId.value) : undefined))
+
+onModalOpen(
+  () => ui.describeWorkOpen,
+  () => {
+    text.value = ''
+    kind.value = 'feature'
+    pipelineId.value = ''
+    riskPolicyId.value = ''
+    modelPresetId.value = ''
+    // The service the reader came from, else the only one there is. With several and no context,
+    // nothing is preselected: guessing a service once pushed a task into the wrong repository.
+    // The opener's service is taken only when this dialog offers it: a document repository is a
+    // frame too, and the queue's filter can name one, but it takes no feature or bug.
+    const asked = ui.describeWorkServiceId
+    serviceId.value =
+      asked && services.value.some((s) => s.id === asked)
+        ? asked
+        : services.value.length === 1
+          ? services.value[0]!.id
+          : undefined
+  },
+)
+
+// The ONE choice of a service frame, kept legal while the dialog is open: a frame deleted under
+// it clears the selection rather than leaving a dead id that a submit would fail on. Nothing is
+// picked in its place, by the rule above.
+watch(services, (next) => {
+  if (serviceId.value && !next.some((s) => s.id === serviceId.value)) serviceId.value = undefined
+})
+
+// UX-18, as the full form: prompt before discarding typed input on Escape, backdrop or Cancel.
+// Registered after the reset above, so the baseline is the freshly opened dialog.
+const { requestClose } = useUnsavedGuard({
+  open: computed(() => ui.describeWorkOpen),
+  close: () => ui.closeDescribeWork(),
+  saving: () => saving.value,
+  snapshot: () => ({
+    text: text.value.trim(),
+    serviceId: serviceId.value ?? null,
+    kind: kind.value,
+    pipelineId: pipelineId.value,
+    riskPolicyId: riskPolicyId.value,
+    modelPresetId: modelPresetId.value,
+  }),
+})
+// Declared after the guard so the setter's `requestClose` reference is never in its TDZ.
+const open = computed({
+  get: () => ui.describeWorkOpen,
+  set: (v: boolean) => {
+    if (!v) void requestClose()
+  },
+})
+
+const split = computed(() => splitDescribedWork(text.value))
+const canSubmit = computed(
+  () => !!split.value.title && !!service.value && !saving.value && access.canWriteBoard.value,
+)
+
+const selectablePipelines = computed(() =>
+  pipelines.pipelines.filter((p) =>
+    pipelineAllowedForManualStart(p, service.value, board.blocks, kind.value, 'task'),
+  ),
+)
+// A pipeline picked for one kind or service may not be allowed for the next one. The picker then
+// no longer lists it, so the task must not be created pinned to it either.
+watch(selectablePipelines, (next) => {
+  if (pipelineId.value && !next.some((p) => p.id === pipelineId.value)) pipelineId.value = ''
+})
+
+/** The full form's tier rule for the two overrides basic mode hides (`showOverrideField`). */
+const showRiskPolicy = computed(() => showOverrideField(uiMode.isAdvanced, riskPolicyId.value))
+const showModelPreset = computed(() => showOverrideField(uiMode.isAdvanced, modelPresetId.value))
+
+/** What "Workspace default" starts, so the picker does not say there is no default. */
+const defaultPipelineName = computed(() => pipelineFor({ pipelineId: undefined })?.name)
+
+/** What each override resolves to when left empty, for the disclosure's one-line summary. */
+const summary = computed(() => {
+  const pipeline = pipelineId.value
+    ? pipelines.getPipeline(pipelineId.value)?.name
+    : defaultPipelineName.value
+  const policy = !showRiskPolicy.value
+    ? undefined
+    : riskPolicyId.value
+      ? riskPolicies.presets.find((p) => p.id === riskPolicyId.value)?.name
+      : riskPolicies.defaultPreset?.name
+  const preset = !showModelPreset.value
+    ? undefined
+    : modelPresetId.value
+      ? modelPresets.presets.find((p) => p.id === modelPresetId.value)?.name
+      : modelPresets.defaultPreset?.name
+  return [pipeline, policy, preset].filter(Boolean).join(' · ')
+})
+const overridesOpen = ref(false)
+
+const KIND_LABEL_KEYS: Record<'feature' | 'bug', string> = {
+  feature: 'describeWork.kind.feature',
+  bug: 'describeWork.kind.bug',
+}
+
+// A select item cannot carry an empty value, so "the workspace default" has its own sentinel
+// and maps back to the empty string the create call reads as "no override".
+const DEFAULT_PRESET = '__workspace_default__'
+const modelPresetItems = computed(() => [
+  { label: t('describeWork.workspaceDefault'), value: DEFAULT_PRESET },
+  ...modelPresets.presets.map((p) => ({ label: p.name, value: p.id })),
+])
+const modelPresetValue = computed({
+  get: () => modelPresetId.value || DEFAULT_PRESET,
+  set: (v: string) => (modelPresetId.value = v === DEFAULT_PRESET ? '' : v),
+})
+
+/** Hand the text to the full form, for a kind or an attachment this dialog does not offer. */
+function openFullForm() {
+  if (!service.value) return
+  const { title, description } = split.value
+  // Nothing is discarded: the text and every choice move to the full form, so this closes without
+  // the guard.
+  ui.closeDescribeWork()
+  ui.openAddTask(service.value.id, {
+    title,
+    description,
+    taskType: kind.value,
+    ...(pipelineId.value ? { pipelineId: pipelineId.value } : {}),
+    ...(riskPolicyId.value ? { riskPolicyId: riskPolicyId.value } : {}),
+    ...(modelPresetId.value ? { modelPresetId: modelPresetId.value } : {}),
+  })
+}
+
+async function submit(startNow: boolean, acknowledgeReviewDebt = false) {
+  if (!service.value || !split.value.title || saving.value) return
+  saving.value = true
+  try {
+    const { title, description } = split.value
+    const block = await board.addTask(service.value.id, title, description, {
+      taskType: kind.value,
+      ...(pipelineId.value ? { pipelineId: pipelineId.value } : {}),
+      ...(riskPolicyId.value ? { riskPolicyId: riskPolicyId.value } : {}),
+      ...(modelPresetId.value ? { modelPresetId: modelPresetId.value } : {}),
+      ...(acknowledgeReviewDebt ? { acknowledgeReviewDebt: true } : {}),
+    })
+    // No block means the add did not land (the store has said why); the dialog stays open with
+    // the text in it.
+    if (!block) return
+    ui.closeReviewFriction()
+    ui.closeDescribeWork()
+    // The card's own Start, with its feedback (started, sandboxed, no pipeline). A start that did
+    // not happen still added the task, so the reader is told it is in the queue under "Not
+    // started".
+    const started = startNow ? await startTask(block) : false
+    if (!started) {
+      toast.success('describeWork.addedToast', { params: { title: block.title } })
+    }
+  } catch (e) {
+    const conflict = parseConflict(e)
+    if (isReviewDebtConflict(conflict)) {
+      ui.openReviewFriction(
+        reviewFrictionContext(
+          conflict,
+          () => void submit(startNow, true),
+          () => saving.value,
+          () => ui.closeDescribeWork(),
+        ),
+      )
+      return
+    }
+    present(e, 'board.addTask.addFailedTitle')
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" :title="t('describeWork.title')" :ui="{ content: 'sm:max-w-2xl' }">
+    <template #body>
+      <div class="space-y-4" data-testid="describe-work-modal">
+        <UFormField :label="t('describeWork.textLabel')" :description="t('describeWork.textHint')">
+          <UTextarea
+            v-model="text"
+            :rows="5"
+            autoresize
+            autofocus
+            class="w-full"
+            :placeholder="t('describeWork.textPlaceholder')"
+            data-testid="describe-work-text"
+          />
+        </UFormField>
+        <p v-if="split.title" class="-mt-2 text-2xs text-dimmed" data-testid="describe-work-title">
+          {{ t('describeWork.savedAs', { title: split.title }) }}
+        </p>
+
+        <div class="grid gap-3 sm:grid-cols-2">
+          <UFormField :label="t('describeWork.serviceLabel')">
+            <USelect
+              v-model="serviceId"
+              :items="serviceItems"
+              :placeholder="t('describeWork.servicePlaceholder')"
+              class="w-full"
+              data-testid="describe-work-service"
+            />
+          </UFormField>
+          <UFormField :label="t('describeWork.kindLabel')">
+            <div class="flex items-center gap-1">
+              <UButton
+                v-for="k in ['feature', 'bug'] as const"
+                :key="k"
+                size="sm"
+                :color="kind === k ? 'primary' : 'neutral'"
+                :variant="kind === k ? 'soft' : 'ghost'"
+                :data-testid="`describe-work-kind-${k}`"
+                @click="kind = k"
+              >
+                {{ t(KIND_LABEL_KEYS[k]) }}
+              </UButton>
+              <UButton
+                size="sm"
+                color="neutral"
+                variant="link"
+                :disabled="!service"
+                data-testid="describe-work-more-kinds"
+                @click="openFullForm"
+              >
+                {{ t('describeWork.moreKinds') }}
+              </UButton>
+            </div>
+          </UFormField>
+        </div>
+
+        <USeparator type="dashed" />
+
+        <UCollapsible v-model:open="overridesOpen">
+          <UButton
+            color="neutral"
+            variant="link"
+            class="p-0"
+            :icon="overridesOpen ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+            data-testid="describe-work-overrides"
+          >
+            <span>{{ t('describeWork.changeHowItRuns') }}</span>
+            <span class="text-dimmed">({{ summary || t('describeWork.workspaceDefault') }})</span>
+          </UButton>
+          <template #content>
+            <div
+              class="mt-3 grid gap-3"
+              :class="showRiskPolicy ? 'sm:grid-cols-3' : 'sm:grid-cols-1'"
+            >
+              <UFormField :label="t('board.addTask.pipeline')">
+                <PipelinePicker
+                  :model-value="pipelineId"
+                  :options="selectablePipelines"
+                  :none-label="t('describeWork.workspaceDefault')"
+                  :none-hint="
+                    defaultPipelineName
+                      ? t('describeWork.defaultPipelineHint', { name: defaultPipelineName })
+                      : undefined
+                  "
+                  trigger-class="w-full justify-between"
+                  @update:model-value="pipelineId = $event"
+                />
+              </UFormField>
+              <UFormField v-if="showRiskPolicy" :label="t('board.addTask.mergePolicy')">
+                <RiskPolicyPicker
+                  :model-value="riskPolicyId"
+                  :options="riskPolicies.presets"
+                  :default-policy="riskPolicies.defaultPreset"
+                  :none-label="t('describeWork.workspaceDefault')"
+                  trigger-class="w-full justify-between"
+                  @update:model-value="riskPolicyId = $event"
+                />
+              </UFormField>
+              <UFormField v-if="showModelPreset" :label="t('board.addTask.modelPreset')">
+                <USelect v-model="modelPresetValue" :items="modelPresetItems" class="w-full" />
+              </UFormField>
+            </div>
+          </template>
+        </UCollapsible>
+
+        <UButton
+          color="neutral"
+          variant="link"
+          class="p-0"
+          icon="i-lucide-paperclip"
+          :disabled="!service"
+          @click="openFullForm"
+        >
+          {{ t('describeWork.attachContext') }}
+        </UButton>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex w-full flex-wrap items-center justify-end gap-2">
+        <UButton color="neutral" variant="ghost" @click="requestClose()">
+          {{ t('common.cancel') }}
+        </UButton>
+        <UButton
+          color="neutral"
+          variant="outline"
+          :disabled="!canSubmit"
+          :loading="saving"
+          data-testid="describe-work-add"
+          @click="submit(false)"
+        >
+          {{ t('describeWork.add') }}
+        </UButton>
+        <UButton
+          :disabled="!canSubmit || !access.canExecuteRuns.value"
+          :loading="saving"
+          icon="i-lucide-play"
+          data-testid="describe-work-add-start"
+          @click="submit(true)"
+        >
+          {{ t('describeWork.addAndStart') }}
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/queue/QueueView.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { NAV_CONTRIBUTIONS, navItemVisible } from '~/modular/nav-contributions'
+import { createNavGates } from '~/modular/nav-gates'
 import type { QueueEntry } from '~/utils/queueSections'
 import QueueCard from '~/components/queue/QueueCard.vue'
 import NotificationsInbox from '~/components/layout/NotificationsInbox.vue'
@@ -68,6 +70,12 @@ const COLUMN_ACCENT: Record<Column['id'], string> = {
   ready_to_merge: 'text-success',
 }
 
+// The header button is the nav entry's twin, so it follows that entry's visibility rule (board
+// write, and a service to put the task in) rather than a copy of it.
+const navGates = createNavGates()
+const describeWorkEntry = NAV_CONTRIBUTIONS.find((c) => c.id === 'describe-work')!
+const canDescribeWork = computed(() => navItemVisible(describeWorkEntry, navGates))
+
 /**
  * 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
@@ -106,6 +114,16 @@ const inspectorOpen = computed(() => !!ui.selectedBlockId && !!board.getBlock(ui
         <!-- 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 />
+        <!-- The one-sentence intake, opened on the service the queue is filtered to, if any. -->
+        <UButton
+          v-if="canDescribeWork"
+          icon="i-lucide-plus"
+          size="sm"
+          data-testid="queue-describe-work"
+          @click="ui.openDescribeWork(queueStore.activeFilter)"
+        >
+          {{ t('queue.describeWork') }}
+        </UButton>
       </div>
     </header>