@cat-factory/app 1.0.0

package/app/components/scenarios/FeatureScenarios.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import type { Block } from '~/types/domain'
+import ScenarioCard from '~/components/scenarios/ScenarioCard.vue'
+
+// The current set of acceptance scenarios for a task, grouped by the feature
+// each verifies. Scenarios are drafted from the task's requirements (its
+// description + any linked PRDs) by the acceptance agent, then refined here.
+// "Generate Playwright tests" is idempotent: it only covers scenarios that do
+// not already have a test, matching the playwright agent's additive contract.
+const props = defineProps<{ block: Block }>()
+
+const scenarios = useScenariosStore()
+const documents = useDocumentsStore()
+const board = useBoardStore()
+const toast = useToast()
+
+const features = computed(() => props.block.features ?? [])
+
+// Where this block's generated tests run. The choice is folded into the
+// acceptance-testing agents' prompt at run time.
+const TEST_TARGETS = [
+  { value: 'github_actions', label: 'Project CI', icon: 'i-lucide-github' },
+  { value: 'ephemeral_env', label: 'Ephemeral env', icon: 'i-lucide-container' },
+] as const
+
+function setTarget(value: Block['testTarget']) {
+  board.updateBlock(props.block.id, { testTarget: value })
+}
+
+/** Requirement context fed to scenario generation: the block intent + PRD titles. */
+function requirementsFor(): string[] {
+  const docs = documents.available ? documents.docsForBlock(props.block.id) : []
+  return docs.map((d) => d.title)
+}
+
+function draft(feature: string) {
+  const created = scenarios.generateForFeature(feature, {
+    description: props.block.description,
+    requirements: requirementsFor(),
+  })
+  toast.add({
+    title: created.length
+      ? `Drafted ${created.length} scenario${created.length === 1 ? '' : 's'}`
+      : 'Scenarios already drafted',
+    description: created.length
+      ? `From the requirements for “${feature}”.`
+      : 'Every standard scenario for this feature already exists.',
+    icon: 'i-lucide-clipboard-check',
+  })
+}
+
+function generateTests(feature: string) {
+  const created = scenarios.generatePlaywrightTests(feature)
+  toast.add({
+    title: created.length
+      ? `Generated ${created.length} Playwright test${created.length === 1 ? '' : 's'}`
+      : 'No new tests needed',
+    description: created.length
+      ? 'New test files committed for scenarios that lacked one.'
+      : 'Every scenario already has a Playwright test.',
+    icon: 'i-lucide-theater',
+  })
+}
+
+function addBlank(feature: string) {
+  scenarios.addScenario({ feature })
+}
+</script>
+
+<template>
+  <div class="space-y-3">
+    <div class="flex items-center justify-between">
+      <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        Acceptance scenarios
+      </span>
+    </div>
+
+    <!-- where the generated tests run (per block) -->
+    <div>
+      <div class="mb-1 text-[11px] text-slate-500">Run tests in</div>
+      <div class="flex gap-1">
+        <UButton
+          v-for="target in TEST_TARGETS"
+          :key="target.value"
+          :color="block.testTarget === target.value ? 'primary' : 'neutral'"
+          :variant="block.testTarget === target.value ? 'soft' : 'ghost'"
+          size="xs"
+          :icon="target.icon"
+          class="flex-1 justify-center"
+          @click="setTarget(target.value)"
+        >
+          {{ target.label }}
+        </UButton>
+      </div>
+    </div>
+
+    <p v-if="!features.length" class="text-[11px] text-slate-500">
+      Add a feature above to draft acceptance scenarios from this task's requirements.
+    </p>
+
+    <div v-for="feature in features" :key="feature" class="space-y-2">
+      <!-- feature header + actions -->
+      <div class="flex items-center gap-1.5">
+        <UIcon name="i-lucide-puzzle" class="h-3.5 w-3.5 shrink-0 text-emerald-400" />
+        <span class="truncate text-xs font-medium text-slate-200">{{ feature }}</span>
+        <UBadge color="neutral" variant="subtle" size="sm">
+          {{ scenarios.scenariosForFeature(feature).length }}
+        </UBadge>
+        <div class="ml-auto flex items-center gap-1">
+          <UButton
+            color="primary"
+            variant="ghost"
+            size="xs"
+            icon="i-lucide-clipboard-check"
+            title="Draft scenarios from requirements"
+            @click="draft(feature)"
+          />
+          <UButton
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            icon="i-lucide-plus"
+            title="Add a blank scenario"
+            @click="addBlank(feature)"
+          />
+          <UButton
+            v-if="scenarios.scenariosForFeature(feature).length"
+            color="neutral"
+            variant="soft"
+            size="xs"
+            icon="i-lucide-theater"
+            :title="`Generate Playwright tests (${scenarios.untested(feature)} new)`"
+            @click="generateTests(feature)"
+          >
+            Tests
+            <UBadge
+              v-if="scenarios.untested(feature)"
+              color="primary"
+              variant="solid"
+              size="sm"
+              class="ml-0.5"
+            >
+              {{ scenarios.untested(feature) }}
+            </UBadge>
+          </UButton>
+        </div>
+      </div>
+
+      <!-- the current set of scenarios for this feature -->
+      <div v-if="scenarios.scenariosForFeature(feature).length" class="space-y-2">
+        <ScenarioCard
+          v-for="scenario in scenarios.scenariosForFeature(feature)"
+          :key="scenario.id"
+          :scenario="scenario"
+        />
+      </div>
+      <p v-else class="pl-5 text-[11px] text-slate-500">
+        No scenarios yet — draft them from requirements or add one.
+      </p>
+    </div>
+  </div>
+</template>

package/app/components/scenarios/ScenarioCard.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import type { AcceptanceScenario } from '~/types/domain'
+
+// A single, editable acceptance scenario: title plus Given / When / Then. The
+// scenario is generated by the acceptance agent but fully editable afterwards;
+// edits write straight back to the scenarios store. The Playwright badge shows
+// whether an e2e test has been generated for it yet.
+const props = defineProps<{ scenario: AcceptanceScenario }>()
+
+const scenarios = useScenariosStore()
+
+/** Bind a string[] clause to a newline-joined textarea (blank lines dropped). */
+function clauseModel(key: 'given' | 'when' | 'then') {
+  return computed<string>({
+    get: () => props.scenario[key].join('\n'),
+    set: (value) =>
+      scenarios.updateScenario(props.scenario.id, {
+        [key]: value
+          .split('\n')
+          .map((line) => line.trim())
+          .filter(Boolean),
+      }),
+  })
+}
+
+const given = clauseModel('given')
+const when = clauseModel('when')
+const then = clauseModel('then')
+
+const title = computed<string>({
+  get: () => props.scenario.title,
+  set: (value) => scenarios.updateScenario(props.scenario.id, { title: value }),
+})
+
+const approved = computed(() => props.scenario.status === 'approved')
+function toggleStatus() {
+  scenarios.updateScenario(props.scenario.id, { status: approved.value ? 'draft' : 'approved' })
+}
+
+const clauses = [
+  { key: 'given', label: 'Given', model: given, placeholder: 'a precondition per line' },
+  { key: 'when', label: 'When', model: when, placeholder: 'the user action' },
+  { key: 'then', label: 'Then', model: then, placeholder: 'an expected outcome per line' },
+] as const
+</script>
+
+<template>
+  <div class="rounded-lg border border-slate-800 bg-slate-900/60 p-2.5 space-y-2">
+    <div class="flex items-center gap-1.5">
+      <UInput
+        v-model="title"
+        size="xs"
+        variant="none"
+        class="flex-1 font-medium text-white"
+        :ui="{ base: 'px-0' }"
+        placeholder="Scenario title"
+      />
+      <UBadge
+        :color="scenario.hasPlaywrightTest ? 'success' : 'neutral'"
+        variant="subtle"
+        size="sm"
+        :title="
+          scenario.hasPlaywrightTest
+            ? 'A Playwright test exists for this scenario'
+            : 'No Playwright test yet'
+        "
+      >
+        <UIcon
+          :name="
+            scenario.hasPlaywrightTest ? 'i-lucide-flask-conical' : 'i-lucide-flask-conical-off'
+          "
+          class="h-3 w-3"
+        />
+      </UBadge>
+      <UButton
+        :color="approved ? 'success' : 'neutral'"
+        variant="ghost"
+        size="xs"
+        :icon="approved ? 'i-lucide-check-circle-2' : 'i-lucide-circle-dashed'"
+        :title="approved ? 'Approved' : 'Draft'"
+        @click="toggleStatus"
+      />
+      <UButton
+        color="error"
+        variant="ghost"
+        size="xs"
+        icon="i-lucide-trash-2"
+        title="Delete scenario"
+        @click="scenarios.removeScenario(scenario.id)"
+      />
+    </div>
+
+    <div v-for="clause in clauses" :key="clause.key" class="flex gap-2">
+      <span
+        class="w-10 shrink-0 pt-1 text-[10px] font-semibold uppercase tracking-wide text-teal-400"
+      >
+        {{ clause.label }}
+      </span>
+      <UTextarea
+        v-model="clause.model.value"
+        :rows="1"
+        autoresize
+        size="xs"
+        class="flex-1"
+        :placeholder="clause.placeholder"
+      />
+    </div>
+  </div>
+</template>

package/app/components/tasks/TaskContextIssues.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+// Inspector section for a task block: the tracker issues (Jira, …) attached to
+// it as agent context, plus an "Attach" menu to link an already-imported issue
+// or open the import modal. Mirrors TaskContextDocs.vue; shown only when the
+// task-source integration is available. Each linked issue shows its status so
+// the structured nature of an issue is visible at a glance.
+import type { DropdownMenuItem } from '@nuxt/ui'
+import type { Block, TaskSourceKind } from '~/types/domain'
+
+const props = defineProps<{ block: Block }>()
+
+const tasks = useTasksStore()
+const ui = useUiStore()
+const toast = useToast()
+
+onMounted(() => {
+  tasks.loadTasks().catch(() => {})
+})
+
+const linked = computed(() => tasks.tasksForBlock(props.block.id))
+
+async function attach(source: TaskSourceKind, externalId: string) {
+  try {
+    await tasks.linkToBlock(props.block.id, source, externalId)
+    toast.add({ title: 'Issue attached', icon: 'i-lucide-link' })
+  } catch (e) {
+    toast.add({
+      title: 'Could not attach',
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  }
+}
+
+const attachMenu = computed<DropdownMenuItem[][]>(() => {
+  const linkedKeys = new Set(linked.value.map((t) => `${t.source}:${t.externalId}`))
+  const items: DropdownMenuItem[] = tasks.tasks
+    .filter((t) => !linkedKeys.has(`${t.source}:${t.externalId}`))
+    .map((t) => ({
+      label: `${t.externalId} · ${t.title}`,
+      icon: tasks.descriptorFor(t.source)?.icon ?? 'i-lucide-square-check',
+      onSelect: () => attach(t.source, t.externalId),
+    }))
+  items.push({
+    label: 'Import an issue…',
+    icon: 'i-lucide-file-down',
+    onSelect: () => ui.openTaskImport(),
+  })
+  return [items]
+})
+</script>
+
+<template>
+  <div v-if="tasks.available" class="space-y-2">
+    <div class="flex items-center justify-between">
+      <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        Context issues
+      </span>
+      <UDropdownMenu :items="attachMenu" :content="{ side: 'bottom', align: 'end' }">
+        <UButton color="neutral" variant="soft" size="xs" icon="i-lucide-plus">Attach</UButton>
+      </UDropdownMenu>
+    </div>
+
+    <div v-if="linked.length" class="space-y-1">
+      <a
+        v-for="task in linked"
+        :key="`${task.source}:${task.externalId}`"
+        :href="task.url"
+        target="_blank"
+        rel="noopener"
+        class="flex items-center gap-1.5 rounded-md border border-slate-800 bg-slate-900/60 px-2 py-1.5 text-xs text-slate-300 hover:bg-slate-800/60"
+      >
+        <UIcon
+          :name="tasks.descriptorFor(task.source)?.icon ?? 'i-lucide-square-check'"
+          class="h-3.5 w-3.5 shrink-0 text-indigo-400"
+        />
+        <span class="truncate">{{ task.externalId }} · {{ task.title }}</span>
+        <UBadge color="neutral" variant="soft" size="xs" class="ml-auto shrink-0">
+          {{ task.status }}
+        </UBadge>
+      </a>
+    </div>
+    <p v-else class="text-[11px] text-slate-500">
+      Attach a Jira issue so agents see its description and comments while implementing this task.
+    </p>
+  </div>
+</template>

package/app/components/tasks/TaskImportModal.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+// Import an issue from a connected task source (by key or URL) and review the
+// issues already imported into the workspace. Unlike the document import flow
+// there is no plan/spawn — issues are attached to a task block for context from
+// the inspector (see TaskContextIssues.vue).
+import type { TaskSourceKind } from '~/types/domain'
+
+const ui = useUiStore()
+const tasks = useTasksStore()
+const toast = useToast()
+
+const open = computed({
+  get: () => ui.taskImport !== null,
+  set: (v: boolean) => {
+    if (!v) ui.closeTaskImport()
+  },
+})
+
+const source = ref<TaskSourceKind | undefined>(undefined)
+const ref_ = ref('')
+const importing = ref(false)
+
+const sourceItems = computed(() =>
+  tasks.connectedSources.map((s) => ({ label: s.label, value: s.source })),
+)
+const descriptor = computed(() => (source.value ? tasks.descriptorFor(source.value) : undefined))
+
+const sourceTasks = computed(() =>
+  source.value ? tasks.tasks.filter((t) => t.source === source.value) : [],
+)
+
+watch(open, (isOpen) => {
+  if (isOpen) {
+    ref_.value = ''
+    source.value = ui.taskImport?.source ?? tasks.connectedSources[0]?.source ?? undefined
+    tasks.loadTasks().catch(() => {})
+  }
+})
+
+async function doImport() {
+  const value = ref_.value.trim()
+  if (!value || !source.value) return
+  importing.value = true
+  try {
+    const task = await tasks.importTask(source.value, value)
+    ref_.value = ''
+    toast.add({ title: `Imported "${task.title}"`, icon: 'i-lucide-file-down' })
+  } catch (e) {
+    toast.add({
+      title: 'Import failed',
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    importing.value = false
+  }
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" title="Import from a task source">
+    <template #body>
+      <!-- Empty state: no connections -->
+      <div v-if="!tasks.anyConnected" class="space-y-3 text-center">
+        <UIcon name="i-lucide-plug" class="mx-auto h-8 w-8 text-slate-500" />
+        <p class="text-sm text-slate-400">Connect a task source first.</p>
+        <div class="flex justify-center gap-2">
+          <UButton
+            v-for="s in tasks.sources"
+            :key="s.source"
+            color="primary"
+            variant="soft"
+            :icon="s.icon"
+            @click="ui.openTaskConnect(s.source)"
+          >
+            Connect {{ s.label }}
+          </UButton>
+        </div>
+      </div>
+
+      <!-- Main form -->
+      <div v-else class="space-y-4">
+        <UFormField v-if="sourceItems.length > 1" label="Source">
+          <USelect v-model="source" :items="sourceItems" class="w-full" />
+        </UFormField>
+
+        <div class="flex items-end gap-2">
+          <UFormField :label="descriptor?.refLabel ?? 'Issue key or URL'" class="flex-1">
+            <UInput
+              v-model="ref_"
+              :placeholder="descriptor?.refPlaceholder"
+              class="w-full"
+              @keydown.enter="doImport"
+            />
+          </UFormField>
+          <UButton
+            color="primary"
+            icon="i-lucide-file-down"
+            :loading="importing"
+            :disabled="!ref_.trim()"
+            @click="doImport"
+          >
+            Import
+          </UButton>
+        </div>
+
+        <!-- List of already-imported issues -->
+        <div v-if="sourceTasks.length" class="space-y-2">
+          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            Imported issues
+          </h3>
+          <div
+            v-for="task in sourceTasks"
+            :key="`${task.source}:${task.externalId}`"
+            class="rounded-lg border border-slate-800 bg-slate-900/60 p-3"
+          >
+            <div class="flex items-start justify-between gap-2">
+              <div class="min-w-0">
+                <a
+                  :href="task.url"
+                  target="_blank"
+                  rel="noopener"
+                  class="truncate text-sm font-medium text-white hover:underline"
+                >
+                  {{ task.externalId }} · {{ task.title }}
+                </a>
+                <p class="mt-0.5 line-clamp-2 text-xs text-slate-500">{{ task.excerpt }}</p>
+              </div>
+              <UBadge color="neutral" variant="soft" size="xs" class="shrink-0">
+                {{ task.status }}
+              </UBadge>
+            </div>
+          </div>
+        </div>
+        <p v-else class="text-center text-xs text-slate-500">No issues imported yet.</p>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/tasks/TaskSourceConnectModal.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+// Connect (or disconnect) the workspace to a task source. The form is rendered
+// generically from the source's descriptor (credential fields), so the same
+// modal serves Jira and any future tracker. Secret credentials are write-only —
+// the backend never returns them, so on reload we show "Connected" with empty
+// fields.
+const ui = useUiStore()
+const tasks = useTasksStore()
+const toast = useToast()
+
+const source = computed(() => ui.taskConnect?.source ?? null)
+const descriptor = computed(() => (source.value ? tasks.descriptorFor(source.value) : undefined))
+const connection = computed(() => (source.value ? tasks.connectionFor(source.value) : undefined))
+const connected = computed(() => connection.value !== undefined)
+
+const open = computed({
+  get: () => ui.taskConnect !== null,
+  set: (v: boolean) => {
+    if (!v) ui.closeTaskConnect()
+  },
+})
+
+/** One value per credential field, reset whenever the modal (re)opens. */
+const values = ref<Record<string, string>>({})
+const saving = ref(false)
+
+watch(open, (isOpen) => {
+  if (isOpen) values.value = {}
+})
+
+const canSubmit = computed(() => {
+  const fields = descriptor.value?.credentialFields ?? []
+  return fields.length > 0 && fields.every((f) => (values.value[f.key] ?? '').trim())
+})
+
+async function submit() {
+  if (!canSubmit.value || !source.value) return
+  const credentials: Record<string, string> = {}
+  for (const f of descriptor.value!.credentialFields) {
+    credentials[f.key] = values.value[f.key]!.trim()
+  }
+  saving.value = true
+  try {
+    await tasks.connect(source.value, credentials)
+    toast.add({
+      title: `${descriptor.value!.label} connected`,
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
+    ui.closeTaskConnect()
+  } catch (e) {
+    toast.add({
+      title: 'Could not connect',
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    saving.value = false
+  }
+}
+
+async function disconnect() {
+  if (!source.value) return
+  await tasks.disconnect(source.value)
+  toast.add({
+    title: `${descriptor.value?.label ?? 'Source'} disconnected`,
+    icon: 'i-lucide-unplug',
+  })
+  ui.closeTaskConnect()
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" :title="descriptor?.label ?? 'Connect source'">
+    <template #body>
+      <div v-if="descriptor" class="space-y-4">
+        <p class="text-sm text-slate-400">
+          Connect {{ descriptor.label }} to import issues and attach them to tasks as agent context.
+        </p>
+
+        <div class="space-y-3">
+          <UFormField
+            v-for="field in descriptor.credentialFields"
+            :key="field.key"
+            :label="field.label"
+            :help="field.help"
+          >
+            <UInput
+              v-model="values[field.key]"
+              :type="field.secret ? 'password' : 'text'"
+              :placeholder="field.placeholder"
+              class="w-full"
+            />
+          </UFormField>
+        </div>
+
+        <div class="flex items-center justify-between gap-2 pt-1">
+          <UButton
+            v-if="connected"
+            color="error"
+            variant="ghost"
+            icon="i-lucide-unplug"
+            @click="disconnect"
+          >
+            Disconnect
+          </UButton>
+          <div v-else />
+          <UButton
+            color="primary"
+            icon="i-lucide-plug"
+            :loading="saving"
+            :disabled="!canSubmit"
+            @click="submit"
+          >
+            {{ connected ? 'Update connection' : 'Connect' }}
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>