feat(KAN-34): rework blocker and ticket history

.dockerignore

@@ -33,6 +33,9 @@
 vendor
 **/.DS_Store
 .editorconfig
+.env.example
+.env.mariadb
+.env.mariadb.example
 .env.production
 LICENSE
 README.md

.env.mariadb.example

@@ -0,0 +1,4 @@
+MARIADB_DATABASE=kanbangit
+MARIADB_USER=kanbangit
+MARIADB_PASSWORD=
+MARIADB_ROOT_PASSWORD=

.github/tests/test_and_check_app/action.yml

@@ -1,18 +1,72 @@
-name: test_and_check_app
+name: "Lint and Test API"
-description: Build the test image and run all application checks
+description: "Run Pint and the Pest test suite for the Laravel API"
 
 runs:
   using: composite
   steps:
-    - name: Test and check app
+    - name: Setup PHP
-      shell: bash
+      uses: shivammathur/setup-php@f3e473d116dcccaddc5834248c87452386958240 #v2.37.2
-      run: |
+      with:
-        set -Eeuo pipefail
+        php-version: "8.5"
+        extensions: mbstring, pdo_sqlite
+        coverage: none
+        tools: composer:v2
 
-        docker buildx build \
+    - name: Verify Composer lockfile
-          --file Dockerfile \
+      run: |
-          --target test \
+        if [ ! -f composer.lock ]; then
-          --tag "local/kanbangit-test:${GITHUB_SHA}" \
+          echo "::error::api/composer.lock not found"
-          --progress plain \
+          exit 1
-          --load \
+        fi
-          .
+      shell: bash
+
+    - name: Get Composer cache directory
+      id: composer_cache
+      run: echo "dir=$(composer config cache-files-dir)" >> "$GITHUB_OUTPUT"
+      shell: bash
+
+    - name: Cache Composer packages
+      uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
+      with:
+        path: ${{ steps.composer_cache.outputs.dir }}
+        key: ${{ runner.os }}-php-8.5-${{ hashFiles('api/composer.lock') }}
+
+    - name: Setup pnpm
+      uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v11.7.0
+      with:
+        package-json-file: package.json
+
+    - name: Setup Node.js
+      uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+      with:
+        node-version: 22
+        cache: "pnpm"
+        cache-dependency-path: "pnpm-lock.yaml"
+
+    - name: Install dependencies
+      run: pnpm install --frozen-lockfile
+      shell: bash
+
+    - name: Prepare environment file
+      run: cp .env.example .env
+      shell: bash
+
+    - name: Install dependencies
+      run: composer install --no-interaction --prefer-dist --no-progress
+      shell: bash
+
+    - name: Generate application key
+      run: php artisan key:generate
+      shell: bash
+
+    - name: Generate Wayfinder routes and actions
+      run: php artisan wayfinder:generate --with-form
+      shell: bash
+
+    - name: Build Vite app
+      run: pnpm run build
+      shell: bash
+
+    - name: Run ci check
+      run: composer run ci:check
+      shell: bash

Dockerfile

@@ -55,14 +55,12 @@ COPY --from=node_binary /usr/local/ /usr/local/
 COPY . /var/www
 
 RUN composer install --prefer-dist --no-interaction --no-progress \
-    && corepack enable pnpm \
+    && pnpm ci \
-    && pnpm install --frozen-lockfile \
     && pnpm run build
 
 FROM build AS test
 
-RUN cp .env.example .env \
+RUN touch .env \
-    && php artisan key:generate\
     && composer audit --locked --no-interaction \
     && COMPOSER_ALLOW_SUPERUSER=1 composer ci:check
 

resources/js/components/BacklogTicketTree.vue

@@ -1,209 +0,0 @@
-<script setup lang="ts">
-import { Form } from '@inertiajs/vue3';
-import { ChevronDown, ChevronRight } from 'lucide-vue-next';
-import { move } from '@/actions/App/Http/Controllers/ProjectBoardController';
-import InputError from '@/components/InputError.vue';
-import { TicketCard } from '@/components/tickets';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { useLocalization } from '@/composables/useLocalization';
-import { ticketStatusLabel } from '@/lib/tickets';
-import type {
-    BacklogTicketTreeEmits,
-    BacklogTicketTreeProps,
-} from '@/types/backlog';
-import type { TicketModel } from '@/types/models/ticket-model';
-
-const props = defineProps<BacklogTicketTreeProps>();
-const emit = defineEmits<BacklogTicketTreeEmits>();
-const { t } = useLocalization();
-
-const allowedTargetStatuses = (ticket: TicketModel) =>
-    (ticket.ticket_status?.allowed_target_statuses ?? []).filter(
-        (status) => status.id !== ticket.ticket_status_id,
-    );
-</script>
-
-<template>
-    <ul class="grid min-w-0 gap-3">
-        <li v-for="node in nodes" :key="node.ticket.id" class="min-w-0">
-            <div class="grid min-w-0 grid-cols-[2.75rem_minmax(0,1fr)] gap-2">
-                <div class="flex justify-center pt-1">
-                    <button
-                        v-if="node.children.length > 0"
-                        type="button"
-                        class="border-border bg-card text-muted-foreground hover:border-primary hover:text-primary focus-visible:ring-ring/35 flex size-10 items-center justify-center rounded-md border transition-colors focus-visible:outline-none focus-visible:ring-2"
-                        :aria-expanded="!collapsedTicketIds.has(node.ticket.id)"
-                        :aria-controls="`backlog-children-${node.ticket.id}`"
-                        :aria-label="
-                            t(
-                                collapsedTicketIds.has(node.ticket.id)
-                                    ? 'backlog.tree.expand'
-                                    : 'backlog.tree.collapse',
-                                { key: node.ticket.ticket_key },
-                            )
-                        "
-                        @click="emit('toggle', node.ticket.id)"
-                    >
-                        <ChevronRight
-                            v-if="collapsedTicketIds.has(node.ticket.id)"
-                            class="size-4"
-                            aria-hidden="true"
-                        />
-                        <ChevronDown v-else class="size-4" aria-hidden="true" />
-                    </button>
-                    <span
-                        v-else
-                        class="bg-border mt-4 size-1.5 rounded-full"
-                        aria-hidden="true"
-                    />
-                </div>
-
-                <div class="grid min-w-0 gap-2">
-                    <Badge
-                        v-if="!node.matchesFilters"
-                        variant="secondary"
-                        class="w-fit"
-                    >
-                        {{ t('backlog.filters.parentContext') }}
-                    </Badge>
-
-                    <TicketCard
-                        :project-id="projectId"
-                        :ticket="node.ticket"
-                        layout="list"
-                        :class="{ 'opacity-80': !node.matchesFilters }"
-                    >
-                        <template v-if="canEditTickets" #actions>
-                            <Form
-                                v-bind="
-                                    move.form({
-                                        project: projectId,
-                                        ticket: node.ticket.id,
-                                    })
-                                "
-                                v-slot="{ processing, errors }"
-                                :error-bag="`backlog-ticket-${node.ticket.id}`"
-                                :options="{ preserveScroll: true }"
-                                :on-before="() => pendingTicketId === null"
-                                class="grid min-w-0 gap-2"
-                                @start="emit('moveStart', node.ticket.id)"
-                                @finish="emit('moveFinish', node.ticket.id)"
-                            >
-                                <input
-                                    type="hidden"
-                                    name="redirect_to"
-                                    value="backlog"
-                                />
-                                <label
-                                    :for="`backlog-ticket-status-${node.ticket.id}`"
-                                    class="text-caption text-muted-foreground font-semibold"
-                                >
-                                    {{
-                                        t('backlog.moveTicket', {
-                                            key: node.ticket.ticket_key,
-                                        })
-                                    }}
-                                </label>
-                                <select
-                                    :id="`backlog-ticket-status-${node.ticket.id}`"
-                                    name="ticket_status_id"
-                                    :disabled="
-                                        pendingTicketId !== null ||
-                                        processing ||
-                                        allowedTargetStatuses(node.ticket)
-                                            .length === 0
-                                    "
-                                    :aria-invalid="
-                                        !!errors.ticket_status_id || undefined
-                                    "
-                                    :aria-describedby="
-                                        errors.ticket_status_id
-                                            ? `backlog-ticket-status-error-${node.ticket.id}`
-                                            : undefined
-                                    "
-                                    class="border-input bg-card text-body min-h-control focus-visible:ring-ring/35 w-full min-w-0 rounded-md border px-3 py-2 focus-visible:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-60"
-                                >
-                                    <option
-                                        v-if="
-                                            allowedTargetStatuses(node.ticket)
-                                                .length === 0
-                                        "
-                                        value=""
-                                    >
-                                        {{ t('board.noMoves') }}
-                                    </option>
-                                    <option
-                                        v-for="target in allowedTargetStatuses(
-                                            node.ticket,
-                                        )"
-                                        :key="target.id"
-                                        :value="target.id"
-                                    >
-                                        {{
-                                            ticketStatusLabel(
-                                                target,
-                                                t('tickets.noStatus'),
-                                            )
-                                        }}
-                                    </option>
-                                </select>
-                                <InputError
-                                    :id="`backlog-ticket-status-error-${node.ticket.id}`"
-                                    :message="errors.ticket_status_id"
-                                />
-                                <Button
-                                    type="submit"
-                                    variant="outline"
-                                    :disabled="
-                                        pendingTicketId !== null ||
-                                        processing ||
-                                        allowedTargetStatuses(node.ticket)
-                                            .length === 0
-                                    "
-                                >
-                                    {{
-                                        t(
-                                            processing
-                                                ? 'board.updatingStatus'
-                                                : 'board.updateStatus',
-                                        )
-                                    }}
-                                </Button>
-                                <p
-                                    v-if="
-                                        allowedTargetStatuses(node.ticket)
-                                            .length === 0
-                                    "
-                                    class="text-caption text-muted-foreground"
-                                >
-                                    {{ t('board.noMovesDescription') }}
-                                </p>
-                            </Form>
-                        </template>
-                    </TicketCard>
-                </div>
-            </div>
-
-            <div
-                v-if="
-                    node.children.length > 0 &&
-                    !collapsedTicketIds.has(node.ticket.id)
-                "
-                :id="`backlog-children-${node.ticket.id}`"
-                class="border-border ml-[1.375rem] mt-3 border-l pl-2 sm:pl-4"
-            >
-                <BacklogTicketTree
-                    :nodes="node.children"
-                    :project-id="projectId"
-                    :can-edit-tickets="canEditTickets"
-                    :collapsed-ticket-ids="collapsedTicketIds"
-                    :pending-ticket-id="pendingTicketId"
-                    @toggle="emit('toggle', $event)"
-                    @move-start="emit('moveStart', $event)"
-                    @move-finish="emit('moveFinish', $event)"
-                />
-            </div>
-        </li>
-    </ul>
-</template>

resources/js/components/TicketTreeList.vue

@@ -1,93 +1,45 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
-import { ChevronDown, ChevronRight } from 'lucide-vue-next';
-import { reactive } from 'vue';
 import { Badge } from '@/components/ui/badge';
-import { useLocalization } from '@/composables/useLocalization';
 import { show as showTicket } from '@/routes/projects/tickets';
-import type { TicketTreeListProps } from '@/types/ticket-tree';
+import type { TicketTreeNodeModel } from '@/types/models/ticket-tree-node-model';
 
-defineProps<TicketTreeListProps>();
+defineProps<{
-
+    nodes: TicketTreeNodeModel[];
-const { t } = useLocalization();
+    projectId: number;
-const collapsedTicketIds = reactive(new Set<number>());
+}>();
-
-function toggleTicket(ticketId: number): void {
-    if (collapsedTicketIds.has(ticketId)) {
-        collapsedTicketIds.delete(ticketId);
-    } else {
-        collapsedTicketIds.add(ticketId);
-    }
-}
 </script>
 
 <template>
-    <ul class="grid min-w-0 gap-3">
+    <ul class="space-y-3">
-        <li v-for="node in nodes" :key="node.id" class="min-w-0">
+        <li v-for="node in nodes" :key="node.id">
-            <div class="grid min-w-0 grid-cols-[2.75rem_minmax(0,1fr)] gap-2">
+            <div class="border-border rounded-xl border px-4 py-4">
-                <div class="flex justify-center pt-1">
+                <div class="flex flex-wrap items-center gap-2">
-                    <button
+                    <Link
-                        v-if="node.children.length > 0"
+                        :href="
-                        type="button"
+                            showTicket({
-                        class="border-border bg-card text-muted-foreground hover:border-primary hover:text-primary focus-visible:ring-ring/35 flex size-10 items-center justify-center rounded-md border transition-colors focus-visible:outline-none focus-visible:ring-2"
+                                project: projectId,
-                        :aria-expanded="!collapsedTicketIds.has(node.id)"
+                                ticket: node.id,
-                        :aria-controls="`ticket-tree-children-${node.id}`"
+                            })
-                        :aria-label="
-                            t(
-                                collapsedTicketIds.has(node.id)
-                                    ? 'tickets.tree.expand'
-                                    : 'tickets.tree.collapse',
-                                { key: node.ticket_key },
-                            )
                         "
-                        @click="toggleTicket(node.id)"
+                        class="text-foreground hover:text-primary font-medium transition"
                     >
-                        <ChevronRight
+                        {{ node.ticket_key }}
-                            v-if="collapsedTicketIds.has(node.id)"
+                    </Link>
-                            class="size-4"
+
-                            aria-hidden="true"
+                    <Badge v-if="node.ticket_type_name" variant="secondary">
-                        />
+                        {{ node.ticket_type_name }}
-                        <ChevronDown v-else class="size-4" aria-hidden="true" />
+                    </Badge>
-                    </button>
-                    <span
-                        v-else
-                        class="bg-border mt-4 size-1.5 rounded-full"
-                        aria-hidden="true"
-                    />
                 </div>
 
-                <Link
+                <div class="text-foreground mt-2 text-sm">
-                    :href="
+                    {{ node.title }}
-                        showTicket({
+                </div>
-                            project: projectId,
-                            ticket: node.id,
-                        })
-                    "
-                    class="bg-card text-card-foreground hover:border-primary focus-visible:ring-ring/35 gap-stack group grid min-w-0 rounded-md border p-4 transition-[border-color,box-shadow] focus-visible:outline-none focus-visible:ring-2"
-                >
-                    <div class="flex min-w-0 flex-wrap items-center gap-2">
-                        <Badge variant="outline">
-                            {{ node.ticket_key }}
-                        </Badge>
-                        <Badge v-if="node.ticket_type_name" variant="secondary">
-                            {{ node.ticket_type_name }}
-                        </Badge>
-                    </div>
-
-                    <span
-                        class="text-body group-hover:text-primary wrap-anywhere min-w-0 font-semibold"
-                    >
-                        {{ node.title }}
-                    </span>
-                </Link>
             </div>
 
             <div
-                v-if="
+                v-if="node.children.length > 0"
-                    node.children.length > 0 && !collapsedTicketIds.has(node.id)
+                class="border-border mt-3 border-l pl-4"
-                "
-                :id="`ticket-tree-children-${node.id}`"
-                class="border-border ml-[1.375rem] mt-3 border-l pl-2 sm:pl-4"
             >
                 <TicketTreeList
                     :nodes="node.children"

resources/js/components/tickets/AcceptanceCriteriaChecklist.vue

@@ -1,320 +0,0 @@
-<script setup lang="ts">
-import {
-    ClipboardCheck,
-    IndentDecrease,
-    IndentIncrease,
-    Plus,
-    Trash2,
-} from 'lucide-vue-next';
-import { computed, nextTick, ref, useId, watch } from 'vue';
-import { Button } from '@/components/ui/button';
-import InputError from '@/components/InputError.vue';
-import { useLocalization } from '@/composables/useLocalization';
-import {
-    canIndentAcceptanceCriterion,
-    indentAcceptanceCriterion,
-    removeAcceptanceCriterion,
-    syncAcceptanceCriteriaDescendantCheckedState,
-} from '@/lib/acceptance-criteria';
-import type { AcceptanceCriteriaModel } from '@/types/models/acceptance-criteria-model';
-
-const props = withDefaults(
-    defineProps<{
-        modelValue: AcceptanceCriteriaModel;
-        readonly?: boolean;
-        disabled?: boolean;
-        persistToggles?: boolean;
-        allowEditing?: boolean;
-        saving?: boolean;
-        dirty?: boolean;
-        error?: string;
-    }>(),
-    {
-        readonly: false,
-        disabled: false,
-        persistToggles: false,
-        allowEditing: true,
-        saving: undefined,
-        dirty: false,
-        error: '',
-    },
-);
-const emit = defineEmits<{
-    'update:modelValue': [items: AcceptanceCriteriaModel];
-    toggle: [index: number, checked: boolean];
-}>();
-const { t } = useLocalization();
-const id = useId();
-const root = ref<HTMLElement>();
-const editing = ref(!props.persistToggles);
-const completed = computed(
-    () => props.modelValue.filter((item) => item.checked).length,
-);
-const locked = computed(() => props.readonly || props.disabled);
-const update = (items: AcceptanceCriteriaModel): void => {
-    if (!locked.value) {
-        emit('update:modelValue', items);
-    }
-};
-const focusRow = async (index: number): Promise<void> => {
-    await nextTick();
-    const inputs =
-        root.value?.querySelectorAll<HTMLTextAreaElement>('textarea');
-    if (inputs?.[index]) {
-        inputs[index].focus();
-    } else {
-        root.value
-            ?.querySelector<HTMLButtonElement>('[data-add-criterion]')
-            ?.focus();
-    }
-};
-const add = (): void => {
-    update([...props.modelValue, { text: '', checked: false, indent: 0 }]);
-    void focusRow(props.modelValue.length);
-};
-const remove = (index: number): void => {
-    update(removeAcceptanceCriterion(props.modelValue, index));
-    void focusRow(Math.max(0, index - 1));
-};
-watch(
-    () => props.modelValue,
-    async () => {
-        await nextTick();
-        root.value
-            ?.querySelectorAll<HTMLTextAreaElement>('textarea')
-            .forEach((input) => {
-                input.setCustomValidity(
-                    input.value.trim() === '' ? t('criteria.required') : '',
-                );
-            });
-    },
-);
-const changeText = (index: number, event: Event): void => {
-    const text = (event.target as HTMLTextAreaElement).value;
-    update(
-        props.modelValue.map((item, position) =>
-            position === index ? { ...item, text } : item,
-        ),
-    );
-};
-const toggle = (index: number, event: Event): void => {
-    const target = event.target as HTMLInputElement;
-    const checked = target.checked;
-    target.checked = props.modelValue[index].checked;
-    if (locked.value) {
-        return;
-    }
-    if (props.persistToggles && !editing.value && !props.dirty) {
-        emit('toggle', index, checked);
-    } else {
-        update(
-            syncAcceptanceCriteriaDescendantCheckedState(
-                props.modelValue,
-                index,
-                checked,
-            ),
-        );
-    }
-};
-const onKeydown = (index: number, event: KeyboardEvent): void => {
-    if (!event.altKey || !['ArrowLeft', 'ArrowRight'].includes(event.key)) {
-        return;
-    }
-    event.preventDefault();
-    update(
-        indentAcceptanceCriterion(
-            props.modelValue,
-            index,
-            event.key === 'ArrowRight' ? 1 : -1,
-        ),
-    );
-};
-</script>
-
-<template>
-    <section
-        ref="root"
-        class="border-border bg-card min-w-0 space-y-4 rounded-xl border p-4 sm:p-5"
-        :aria-labelledby="`${id}-title`"
-        :aria-busy="disabled"
-    >
-        <div class="flex flex-wrap items-center justify-between gap-3">
-            <h3
-                :id="`${id}-title`"
-                class="flex items-center gap-2 font-semibold"
-            >
-                <ClipboardCheck
-                    class="text-primary size-5"
-                    aria-hidden="true"
-                />
-                {{ t('criteria.title') }}
-            </h3>
-            <span class="text-muted-foreground text-sm" aria-live="polite">{{
-                t('criteria.progress', { completed, total: modelValue.length })
-            }}</span>
-            <Button
-                v-if="persistToggles && allowEditing && !readonly"
-                type="button"
-                variant="outline"
-                :disabled="
-                    disabled ||
-                    (editing &&
-                        modelValue.some((item) => item.text.trim() === ''))
-                "
-                :aria-pressed="editing"
-                @click="editing = !editing"
-            >
-                {{ t(editing ? 'criteria.preview' : 'criteria.edit') }}
-            </Button>
-        </div>
-        <p v-if="!modelValue.length" class="text-muted-foreground text-sm">
-            {{ t('criteria.empty') }}
-        </p>
-        <ol v-else class="space-y-3">
-            <li
-                v-for="(item, index) in modelValue"
-                :key="item.id ?? `new-${index}`"
-                :data-indent="item.indent"
-                class="border-border min-w-0"
-                :class="{ 'border-s-2 ps-2': item.indent > 0 }"
-                :style="{ marginInlineStart: `${item.indent * 0.5}rem` }"
-            >
-                <div class="flex min-w-0 items-start gap-2">
-                    <label
-                        class="focus-within:ring-ring flex min-h-11 w-11 shrink-0 cursor-pointer items-center justify-center rounded-md focus-within:ring-2"
-                        :class="{ 'cursor-not-allowed opacity-60': locked }"
-                    >
-                        <input
-                            :checked="item.checked"
-                            type="checkbox"
-                            :disabled="locked"
-                            :aria-label="
-                                t('criteria.complete', {
-                                    number: index + 1,
-                                    text: item.text,
-                                })
-                            "
-                            class="border-input accent-primary size-5 rounded"
-                            @change="toggle(index, $event)"
-                        />
-                    </label>
-                    <div class="min-w-0 flex-1">
-                        <textarea
-                            v-if="editing && !readonly"
-                            :value="item.text"
-                            :aria-label="
-                                t('criteria.item', { number: index + 1 })
-                            "
-                            :aria-describedby="`${id}-hint ${id}-error`"
-                            :disabled="disabled"
-                            :aria-invalid="Boolean(error)"
-                            required
-                            rows="2"
-                            class="border-input bg-background focus-visible:ring-ring min-h-11 w-full rounded-md border px-3 py-2 text-sm outline-none focus-visible:ring-2 disabled:opacity-60"
-                            @input="changeText(index, $event)"
-                            @keydown="onKeydown(index, $event)"
-                        />
-                        <p
-                            v-else
-                            class="wrap-anywhere min-h-11 whitespace-pre-wrap py-2.5 text-sm"
-                            :class="{
-                                'text-muted-foreground line-through':
-                                    item.checked,
-                            }"
-                        >
-                            {{ item.text }}
-                        </p>
-                        <div
-                            v-if="editing && !readonly"
-                            class="flex flex-wrap gap-1"
-                        >
-                            <Button
-                                type="button"
-                                variant="ghost"
-                                size="icon"
-                                :disabled="disabled || item.indent === 0"
-                                :aria-label="
-                                    t('criteria.outdent', { number: index + 1 })
-                                "
-                                @click="
-                                    update(
-                                        indentAcceptanceCriterion(
-                                            modelValue,
-                                            index,
-                                            -1,
-                                        ),
-                                    )
-                                "
-                                ><IndentDecrease aria-hidden="true"
-                            /></Button>
-                            <Button
-                                type="button"
-                                variant="ghost"
-                                size="icon"
-                                :disabled="
-                                    disabled ||
-                                    !canIndentAcceptanceCriterion(
-                                        modelValue,
-                                        index,
-                                    )
-                                "
-                                :aria-label="
-                                    t('criteria.indent', { number: index + 1 })
-                                "
-                                @click="
-                                    update(
-                                        indentAcceptanceCriterion(
-                                            modelValue,
-                                            index,
-                                            1,
-                                        ),
-                                    )
-                                "
-                                ><IndentIncrease aria-hidden="true"
-                            /></Button>
-                            <Button
-                                type="button"
-                                variant="ghost"
-                                size="icon"
-                                :disabled="disabled"
-                                :aria-label="
-                                    t('criteria.remove', { number: index + 1 })
-                                "
-                                @click="remove(index)"
-                                ><Trash2 aria-hidden="true"
-                            /></Button>
-                        </div>
-                    </div>
-                </div>
-            </li>
-        </ol>
-        <template v-if="editing && !readonly">
-            <Button
-                data-add-criterion
-                type="button"
-                variant="outline"
-                :disabled="disabled"
-                @click="add"
-                ><Plus aria-hidden="true" />{{ t('criteria.add') }}</Button
-            >
-            <p :id="`${id}-hint`" class="text-muted-foreground text-xs">
-                {{ t('criteria.hint') }}
-            </p>
-        </template>
-        <p
-            v-if="persistToggles && dirty"
-            class="text-muted-foreground text-sm"
-            role="status"
-        >
-            {{ t('criteria.unsaved') }}
-        </p>
-        <p
-            v-if="saving ?? disabled"
-            class="text-muted-foreground text-sm"
-            role="status"
-        >
-            {{ t('criteria.saving') }}
-        </p>
-        <InputError :id="`${id}-error`" :message="error" role="alert" />
-    </section>
-</template>

resources/js/components/tickets/TicketCard.vue

@@ -11,7 +11,6 @@ import type {
 } from '@/types/ticket-presentation';
 
 withDefaults(defineProps<TicketPresentationProps>(), {
-    layout: 'card',
     showDescription: true,
     showStatus: true,
 });
@@ -23,85 +22,63 @@ const { t } = useLocalization();
 <template>
     <article
         :class="[
-            'bg-card text-card-foreground min-w-0 rounded-md border',
+            'bg-card text-card-foreground min-w-0 rounded-md border shadow-sm',
-            layout === 'card' ? 'shadow-sm' : '',
             ticket.is_blocked ? 'border-warning' : 'border-border',
         ]"
     >
-        <div
+        <Link
-            :class="
+            :href="showTicket({ project: projectId, ticket: ticket.id })"
-                layout === 'list'
+            :aria-label="
-                    ? 'flex min-w-0 flex-col lg:flex-row lg:items-stretch'
+                t('tickets.open', {
-                    : ''
+                    key: ticket.ticket_key,
+                    title: ticket.title,
+                })
             "
+            class="focus-visible:ring-ring/35 gap-card min-h-control hover:bg-accent/35 group flex min-w-0 flex-col rounded-t-md p-4 transition-[background-color,box-shadow] focus-visible:outline-none focus-visible:ring-2"
+            @click="emit('open', ticket.id)"
         >
-            <Link
+            <div class="flex min-w-0 items-start justify-between gap-3">
-                :href="showTicket({ project: projectId, ticket: ticket.id })"
+                <Badge
-                :aria-label="
+                    variant="outline"
-                    t('tickets.open', {
+                    class="wrap-anywhere max-w-full whitespace-normal"
-                        key: ticket.ticket_key,
-                        title: ticket.title,
-                    })
-                "
-                :class="[
-                    'focus-visible:ring-ring/35 gap-card min-h-control hover:bg-accent/35 group flex min-w-0 flex-1 flex-col p-4 transition-[background-color,box-shadow] focus-visible:outline-none focus-visible:ring-2',
-                    layout === 'list'
-                        ? 'rounded-t-md lg:rounded-l-md lg:rounded-tr-none'
-                        : 'rounded-t-md',
-                ]"
-                @click="emit('open', ticket.id)"
-            >
-                <div class="flex min-w-0 items-start justify-between gap-3">
-                    <Badge
-                        variant="outline"
-                        class="wrap-anywhere max-w-full whitespace-normal"
-                    >
-                        {{ ticket.ticket_key }}
-                    </Badge>
-                    <ArrowUpRight
-                        class="text-muted-foreground group-hover:text-primary size-4 shrink-0"
-                        aria-hidden="true"
-                    />
-                </div>
-
-                <h3
-                    class="text-body group-hover:text-primary wrap-anywhere min-w-0 font-semibold"
                 >
-                    {{ ticket.title }}
+                    {{ ticket.ticket_key }}
-                </h3>
+                </Badge>
-
+                <ArrowUpRight
-                <TicketMetadata :ticket="ticket" :show-status="showStatus" />
+                    class="text-muted-foreground group-hover:text-primary size-4 shrink-0"
-
+                    aria-hidden="true"
-                <p
+                />
-                    v-if="showDescription && ticket.description"
-                    class="text-caption text-muted-foreground wrap-anywhere line-clamp-3"
-                >
-                    {{ ticket.description }}
-                </p>
-
-                <p
-                    v-if="ticket.is_blocked && ticket.blocked_comment"
-                    class="text-caption text-warning-foreground bg-warning wrap-anywhere rounded-sm px-3 py-2"
-                >
-                    {{
-                        t('tickets.blockerComment', {
-                            comment: ticket.blocked_comment,
-                        })
-                    }}
-                </p>
-            </Link>
-
-            <div
-                v-if="$slots.actions"
-                :class="[
-                    'border-t p-4',
-                    layout === 'list'
-                        ? 'lg:flex lg:w-80 lg:items-center lg:border-l lg:border-t-0'
-                        : '',
-                ]"
-            >
-                <slot name="actions" />
             </div>
+
+            <h3
+                class="text-body group-hover:text-primary wrap-anywhere min-w-0 font-semibold"
+            >
+                {{ ticket.title }}
+            </h3>
+
+            <TicketMetadata :ticket="ticket" :show-status="showStatus" />
+
+            <p
+                v-if="showDescription && ticket.description"
+                class="text-caption text-muted-foreground wrap-anywhere line-clamp-3"
+            >
+                {{ ticket.description }}
+            </p>
+
+            <p
+                v-if="ticket.is_blocked && ticket.blocked_comment"
+                class="text-caption text-warning-foreground bg-warning wrap-anywhere rounded-sm px-3 py-2"
+            >
+                {{
+                    t('tickets.blockerComment', {
+                        comment: ticket.blocked_comment,
+                    })
+                }}
+            </p>
+        </Link>
+
+        <div v-if="$slots.actions" class="border-t p-4">
+            <slot name="actions" />
         </div>
     </article>
 </template>

resources/js/components/tickets/detail/TicketDetailBlocker.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { useForm } from '@inertiajs/vue3';
+import { computed } from 'vue';
+import ProjectTicketController from '@/actions/App/Http/Controllers/ProjectTicketController';
+import FormFeedback from '@/components/FormFeedback.vue';
+import InputError from '@/components/InputError.vue';
+import TicketFormField from '@/components/tickets/TicketFormField.vue';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+} from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { useFormProtection } from '@/composables/useFormProtection';
+import { useLocalization } from '@/composables/useLocalization';
+import type { TicketDetailBlockerProps } from '@/types/ticket-detail';
+
+const props = defineProps<TicketDetailBlockerProps>();
+const { t } = useLocalization();
+
+const savedFormData = () => ({
+    acceptance_criteria: props.ticket.acceptance_criteria,
+    assignee_user_id: props.ticket.assignee_user_id,
+    blocked_comment: props.ticket.blocked_comment ?? '',
+    description: props.ticket.description,
+    field_values: (props.ticket.field_values ?? []).map((fieldValue) => ({
+        ticket_field_definition_id: fieldValue.ticket_field_definition_id,
+        value_number: fieldValue.value_number,
+        value_user_id: fieldValue.value_user_id,
+    })),
+    is_blocked: props.ticket.is_blocked,
+    parent_ticket_id: props.ticket.parent_ticket_id,
+    story_points: props.ticket.story_points,
+    ticket_priority_id: props.ticket.ticket_priority_id,
+    ticket_type_id: props.ticket.ticket_type_id,
+    title: props.ticket.title,
+});
+
+const form = useForm(
+    `projects:${props.project.id}:tickets:${props.ticket.id}:blocker`,
+    savedFormData(),
+);
+const protection = useFormProtection(form);
+const isBlocked = computed(() => Boolean(form.is_blocked));
+
+const reset = (): void => {
+    if (form.processing || !protection.confirmLeave()) {
+        return;
+    }
+
+    form.reset();
+    form.clearErrors();
+    protection.clearFeedback();
+};
+
+const submit = (): void => {
+    if (!props.canEditTicket || form.processing) {
+        return;
+    }
+
+    protection.submit(
+        ProjectTicketController.update({
+            project: props.project.id,
+            ticket: props.ticket.id,
+        }),
+        {
+            preserveScroll: true,
+            onSuccess: () => {
+                Object.assign(form, savedFormData());
+                form.defaults();
+            },
+        },
+    );
+};
+</script>
+
+<template>
+    <section
+        id="ticket-blocker"
+        aria-labelledby="ticket-blocker-title"
+        class="min-w-0 scroll-mt-6"
+    >
+        <Card :class="{ 'border-warning/40': isBlocked }">
+            <CardHeader>
+                <div class="flex flex-wrap items-center justify-between gap-3">
+                    <h2 id="ticket-blocker-title" class="text-lg font-semibold">
+                        {{ t('ticketDetail.blocker') }}
+                    </h2>
+                    <Badge :variant="isBlocked ? 'warning' : 'outline'">
+                        {{
+                            isBlocked
+                                ? t('ticketDetail.blockerActive')
+                                : t('ticketDetail.blockerInactive')
+                        }}
+                    </Badge>
+                </div>
+                <CardDescription>
+                    {{ t('ticketDetail.blockerDescription') }}
+                </CardDescription>
+            </CardHeader>
+
+            <CardContent v-if="canEditTicket">
+                <form class="grid min-w-0 gap-5" @submit.prevent="submit">
+                    <FormFeedback
+                        :state="protection.state.value"
+                        @retry="submit"
+                    />
+
+                    <div
+                        class="bg-muted/30 flex min-w-0 items-start gap-3 rounded-xl border p-4"
+                    >
+                        <input
+                            id="is_blocked"
+                            v-model="form.is_blocked"
+                            type="checkbox"
+                            :disabled="form.processing"
+                            :aria-invalid="Boolean(form.errors.is_blocked)"
+                            aria-describedby="ticket-blocker-state-description is_blocked-error"
+                            class="border-input text-primary focus-visible:ring-ring mt-0.5 size-4 shrink-0 rounded focus-visible:ring-2"
+                        />
+                        <div class="grid min-w-0 gap-1">
+                            <Label for="is_blocked">
+                                {{ t('ticketDetail.blocked') }}
+                            </Label>
+                            <p
+                                id="ticket-blocker-state-description"
+                                class="text-muted-foreground text-sm"
+                            >
+                                {{
+                                    isBlocked
+                                        ? t(
+                                              'ticketDetail.blockerActiveDescription',
+                                          )
+                                        : t(
+                                              'ticketDetail.blockerInactiveDescription',
+                                          )
+                                }}
+                            </p>
+                        </div>
+                    </div>
+                    <InputError
+                        id="is_blocked-error"
+                        :message="form.errors.is_blocked"
+                    />
+
+                    <TicketFormField
+                        v-if="isBlocked"
+                        id="blocked_comment"
+                        v-model="form.blocked_comment"
+                        kind="textarea"
+                        :rows="3"
+                        :label="t('ticketDetail.blockerComment')"
+                        :hint="t('ticketDetail.blockerCommentHelp')"
+                        :placeholder="t('ticketDetail.blockerPlaceholder')"
+                        :error="form.errors.blocked_comment"
+                        :disabled="form.processing"
+                        required
+                    />
+
+                    <div
+                        class="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end"
+                    >
+                        <Button
+                            type="button"
+                            variant="outline"
+                            :disabled="!form.isDirty || form.processing"
+                            @click="reset"
+                        >
+                            {{ t('ticketDetail.resetBlocker') }}
+                        </Button>
+                        <Button
+                            type="submit"
+                            :loading="form.processing"
+                            :loading-label="t('ticketDetail.savingBlocker')"
+                            :disabled="!form.isDirty"
+                        >
+                            {{
+                                isBlocked
+                                    ? t('ticketDetail.saveBlocker')
+                                    : t('ticketDetail.unblockTicket')
+                            }}
+                        </Button>
+                    </div>
+                </form>
+            </CardContent>
+
+            <CardContent v-else>
+                <p
+                    class="whitespace-pre-wrap text-sm leading-6"
+                    :class="{ 'text-muted-foreground': !isBlocked }"
+                >
+                    {{
+                        isBlocked
+                            ? ticket.blocked_comment
+                            : t('ticketDetail.blockerInactiveDescription')
+                    }}
+                </p>
+            </CardContent>
+        </Card>
+    </section>
+</template>

resources/js/components/tickets/detail/TicketDetailContent.vue

@@ -3,47 +3,42 @@ import { useLocalization } from '@/composables/useLocalization';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 
 import { useForm, useRemember } from '@inertiajs/vue3';
-import { computed, ref, toRef, unref, useTemplateRef, nextTick } from 'vue';
+import { computed, ref, toRef, unref, watch } from 'vue';
 import ProjectTicketController from '@/actions/App/Http/Controllers/ProjectTicketController';
 import InputError from '@/components/InputError.vue';
-import AcceptanceCriteriaChecklist from '@/components/tickets/AcceptanceCriteriaChecklist.vue';
 import FormFeedback from '@/components/FormFeedback.vue';
 import { Button } from '@/components/ui/button';
 import TicketFormField from '@/components/tickets/TicketFormField.vue';
 import TicketFormFields from '@/components/tickets/TicketFormFields.vue';
-import { Label } from '@/components/ui/label';
 import { useFormProtection } from '@/composables/useFormProtection';
 import {
+    acceptanceCriteriaToEditorState,
+    buildAcceptanceCriteria,
+    formatChecklistLines,
     normalizeAcceptanceCriteria,
     syncAcceptanceCriteriaDescendantCheckedState,
 } from '@/lib/acceptance-criteria';
 import type { TicketDetailContentProps } from '@/types/ticket-detail';
 const props = defineProps<TicketDetailContentProps>();
 const { t } = useLocalization();
-const editor = useTemplateRef<HTMLDetailsElement>('editor');
-async function editParent(): Promise<void> {
-    if (!props.canEditTicket || !editor.value) {
-        return;
-    }
-    editor.value.open = true;
-    await nextTick();
-    editor.value
-        ?.querySelector<HTMLSelectElement>('#parent_ticket_id')
-        ?.focus();
-}
-defineExpose({ editParent });
 const canEditAuthor = computed(
     () => props.canEditTicket && props.canManageProject,
 );
 const canViewAuthor = computed(
     () => props.project.show_author || props.canManageProject,
 );
+const acceptanceCriteriaEditorState = acceptanceCriteriaToEditorState(
+    props.ticket.acceptance_criteria,
+);
 const draftKey = `projects:${props.project.id}:tickets:${props.ticket.id}:edit`;
 const acceptanceCriteriaDraft = useRemember(
-    { items: normalizeAcceptanceCriteria(props.ticket.acceptance_criteria) },
+    { checklist: acceptanceCriteriaEditorState.checklist },
-    `${draftKey}:criteria`,
+    `${draftKey}:checklist`,
+);
+const acceptanceCriteriaChecklist = toRef(
+    unref(acceptanceCriteriaDraft),
+    'checklist',
 );
-const acceptanceCriteriaItems = toRef(unref(acceptanceCriteriaDraft), 'items');
 const savedAcceptanceCriteria = ref(
     normalizeAcceptanceCriteria(props.ticket.acceptance_criteria),
 );
@@ -51,8 +46,8 @@ const isPersistingAcceptanceCriteriaToggle = ref(false);
 const acceptanceCriteriaToggleError = ref('');
 
 const savedFormData = () => ({
-    acceptance_criteria: normalizeAcceptanceCriteria(
+    acceptance_criteria: buildAcceptanceCriteria(
-        savedAcceptanceCriteria.value,
+        acceptanceCriteriaChecklist.value,
     ),
     assignee_user_id: props.ticket.assignee_user_id ?? '',
     author_user_id: props.ticket.author_user_id ?? '',
@@ -81,10 +76,24 @@ const savedFormData = () => ({
 
 const form = useForm(draftKey, savedFormData());
 
+watch(
+    () => [props.ticket.is_blocked, props.ticket.blocked_comment] as const,
+    ([isBlocked, blockedComment]) => {
+        form.is_blocked = isBlocked;
+        form.blocked_comment = blockedComment ?? '';
+        form.defaults('is_blocked', isBlocked);
+        form.defaults('blocked_comment', blockedComment ?? '');
+    },
+);
+
+const acceptanceCriteriaPreviewItems = computed(
+    () => savedAcceptanceCriteria.value,
+);
+
 const hasUnsavedAcceptanceCriteriaDraft = computed(
     () =>
-        JSON.stringify(acceptanceCriteriaItems.value) !==
+        acceptanceCriteriaChecklist.value !==
-        JSON.stringify(savedAcceptanceCriteria.value),
+        formatChecklistLines(savedAcceptanceCriteria.value),
 );
 
 const isDirty = computed(
@@ -103,10 +112,9 @@ const reset = (): void => {
     }
     form.reset();
     form.clearErrors();
-    acceptanceCriteriaItems.value = normalizeAcceptanceCriteria(
+    acceptanceCriteriaChecklist.value = formatChecklistLines(
         savedAcceptanceCriteria.value,
     );
-    acceptanceCriteriaToggleError.value = '';
     protection.clearFeedback();
 };
 
@@ -120,6 +128,19 @@ const acceptanceCriteriaError = computed(() => {
     );
 });
 
+const buildAcceptanceCriteriaForSubmit = () => {
+    const draftItems = buildAcceptanceCriteria(
+        acceptanceCriteriaChecklist.value,
+    );
+
+    return draftItems.map((item, index) => ({
+        ...item,
+        ...(savedAcceptanceCriteria.value[index]?.id !== undefined
+            ? { id: savedAcceptanceCriteria.value[index].id }
+            : {}),
+    }));
+};
+
 const buildSavedTicketPayload = (
     acceptanceCriteria = savedAcceptanceCriteria.value,
 ) => ({
@@ -159,6 +180,10 @@ const persistAcceptanceCriteriaToggle = async (
         index,
         checked,
     );
+    const previousChecklist = formatChecklistLines(
+        savedAcceptanceCriteria.value,
+    );
+    const nextChecklist = formatChecklistLines(nextAcceptanceCriteria);
     const csrfToken = document
         .querySelector('meta[name="csrf-token"]')
         ?.getAttribute('content');
@@ -193,18 +218,34 @@ const persistAcceptanceCriteriaToggle = async (
 
         savedAcceptanceCriteria.value = nextAcceptanceCriteria;
 
-        acceptanceCriteriaItems.value = normalizeAcceptanceCriteria(
+        if (acceptanceCriteriaChecklist.value === previousChecklist) {
-            nextAcceptanceCriteria,
+            acceptanceCriteriaChecklist.value = nextChecklist;
-        );
+            form.acceptance_criteria = nextAcceptanceCriteria;
-        form.acceptance_criteria = nextAcceptanceCriteria;
+            form.defaults('acceptance_criteria', nextAcceptanceCriteria);
-        form.defaults('acceptance_criteria', nextAcceptanceCriteria);
+        }
     } catch (_error) {
-        acceptanceCriteriaToggleError.value = t('criteria.saveError');
+        acceptanceCriteriaToggleError.value = t(
+            'ticketDetail.checklistSaveFailed',
+        );
     } finally {
         isPersistingAcceptanceCriteriaToggle.value = false;
     }
 };
 
+const onAcceptanceCriteriaCheckboxChange = async (
+    index: number,
+    event: Event,
+): Promise<void> => {
+    const target = event.target;
+
+    if (!(target instanceof HTMLInputElement)) {
+        return;
+    }
+
+    await persistAcceptanceCriteriaToggle(index, target.checked);
+    target.checked = savedAcceptanceCriteria.value[index]?.checked ?? false;
+};
+
 const submit = (): void => {
     if (
         !props.canEditTicket ||
@@ -214,7 +255,7 @@ const submit = (): void => {
         return;
     }
 
-    form.acceptance_criteria = acceptanceCriteriaItems.value;
+    form.acceptance_criteria = buildAcceptanceCriteriaForSubmit();
 
     protection.submit(
         ProjectTicketController.update({
@@ -227,7 +268,7 @@ const submit = (): void => {
                 savedAcceptanceCriteria.value = normalizeAcceptanceCriteria(
                     props.ticket.acceptance_criteria,
                 );
-                acceptanceCriteriaItems.value = normalizeAcceptanceCriteria(
+                acceptanceCriteriaChecklist.value = formatChecklistLines(
                     savedAcceptanceCriteria.value,
                 );
                 Object.assign(form, savedFormData());
@@ -269,29 +310,85 @@ const submit = (): void => {
                 </CardContent>
             </Card>
         </section>
-        <div id="ticket-checklist" class="scroll-mt-6">
+        <section
-            <AcceptanceCriteriaChecklist
+            id="ticket-checklist"
-                :model-value="savedAcceptanceCriteria"
+            aria-labelledby="ticket-checklist-title"
-                :readonly="!canEditTicket"
+            class="scroll-mt-6"
-                :disabled="
+        >
-                    form.processing ||
+            <Card>
-                    isPersistingAcceptanceCriteriaToggle ||
+                <CardHeader
-                    hasUnsavedAcceptanceCriteriaDraft
+                    ><h2
-                "
+                        id="ticket-checklist-title"
-                :saving="
+                        class="text-lg font-semibold"
-                    form.processing || isPersistingAcceptanceCriteriaToggle
+                    >
-                "
+                        {{ t('ticketDetail.checklist') }}
-                :allow-editing="false"
+                    </h2></CardHeader
-                persist-toggles
+                >
-                :dirty="hasUnsavedAcceptanceCriteriaDraft"
+                <CardContent class="space-y-3">
-                :error="acceptanceCriteriaToggleError"
+                    <div
-                @toggle="persistAcceptanceCriteriaToggle"
+                        v-if="acceptanceCriteriaPreviewItems.length > 0"
-            />
+                        class="border-border rounded-xl border p-4 text-sm"
-        </div>
+                    >
+                        <ul class="space-y-2">
+                            <li
+                                v-for="(
+                                    item, index
+                                ) in acceptanceCriteriaPreviewItems"
+                                :key="item.id ?? index"
+                                :style="{
+                                    marginInlineStart: `${item.indent * 0.75}rem`,
+                                }"
+                                class="flex min-w-0 items-start gap-2"
+                            >
+                                <input
+                                    :id="`acceptance-criteria-${item.id ?? index}`"
+                                    :checked="item.checked"
+                                    type="checkbox"
+                                    :disabled="
+                                        !canEditTicket ||
+                                        form.processing ||
+                                        isPersistingAcceptanceCriteriaToggle ||
+                                        hasUnsavedAcceptanceCriteriaDraft
+                                    "
+                                    class="border-input text-primary focus:ring-ring mt-3.5 size-4 shrink-0 rounded"
+                                    @change="
+                                        onAcceptanceCriteriaCheckboxChange(
+                                            index,
+                                            $event,
+                                        )
+                                    "
+                                />
+                                <label
+                                    :for="`acceptance-criteria-${item.id ?? index}`"
+                                    class="min-h-control wrap-anywhere flex min-w-0 flex-1 items-center py-2"
+                                >
+                                    {{ item.text }}
+                                </label>
+                            </li>
+                        </ul>
+                    </div>
+                    <p v-else class="text-muted-foreground text-sm">
+                        {{ t('ticketDetail.noChecklist') }}
+                    </p>
+                    <p
+                        v-if="hasUnsavedAcceptanceCriteriaDraft"
+                        class="text-muted-foreground text-sm"
+                    >
+                        {{ t('ticketDetail.saveChecklistFirst') }}
+                    </p>
+                    <p
+                        v-if="acceptanceCriteriaToggleError"
+                        role="alert"
+                        class="text-destructive text-sm"
+                    >
+                        {{ acceptanceCriteriaToggleError }}
+                    </p>
+                </CardContent>
+            </Card>
+        </section>
         <details
             v-if="canEditTicket"
             id="ticket-edit"
-            ref="editor"
             class="bg-card group rounded-xl border shadow-sm"
         >
             <summary
@@ -328,13 +425,20 @@ const submit = (): void => {
                         "
                     >
                         <template #content>
-                            <AcceptanceCriteriaChecklist
+                            <TicketFormField
-                                v-model="acceptanceCriteriaItems"
+                                id="acceptance_criteria_checklist"
+                                v-model="acceptanceCriteriaChecklist"
+                                kind="textarea"
+                                :label="t('ticketDetail.checklistEditor')"
+                                :hint="t('ticketForm.checklistHelp')"
+                                :placeholder="
+                                    t('ticketDetail.checklistPlaceholder')
+                                "
+                                :error="acceptanceCriteriaError"
                                 :disabled="
                                     form.processing ||
                                     isPersistingAcceptanceCriteriaToggle
                                 "
-                                :error="acceptanceCriteriaError"
                             />
                         </template>
                         <template #metadata>
@@ -364,44 +468,6 @@ const submit = (): void => {
                             />
                         </template>
                     </TicketFormFields>
-                    <fieldset
-                        class="grid min-w-0 gap-4 rounded-xl border p-4 sm:p-5"
-                        :disabled="
-                            form.processing ||
-                            isPersistingAcceptanceCriteriaToggle
-                        "
-                    >
-                        <legend class="px-2 text-sm font-semibold">
-                            {{ t('ticketForm.blocker') }}
-                        </legend>
-                        <div class="min-h-control flex items-center gap-3">
-                            <input
-                                id="is_blocked"
-                                v-model="form.is_blocked"
-                                type="checkbox"
-                                :aria-invalid="Boolean(form.errors.is_blocked)"
-                                aria-describedby="is_blocked-error"
-                                class="border-input text-primary focus-visible:ring-ring size-4 rounded focus-visible:ring-2"
-                            />
-                            <Label for="is_blocked">{{
-                                t('ticketDetail.blocked')
-                            }}</Label>
-                        </div>
-                        <InputError
-                            id="is_blocked-error"
-                            :message="form.errors.is_blocked"
-                        />
-                        <TicketFormField
-                            id="blocked_comment"
-                            v-model="form.blocked_comment"
-                            kind="textarea"
-                            :rows="3"
-                            :label="t('ticketDetail.blockerComment')"
-                            :placeholder="t('ticketDetail.blockerPlaceholder')"
-                            :error="form.errors.blocked_comment"
-                            :required="form.is_blocked"
-                        />
-                    </fieldset>
                     <fieldset
                         class="grid min-w-0 gap-4 rounded-xl border p-4 sm:p-5"
                         :disabled="

resources/js/components/tickets/detail/TicketDetailHeader.vue

@@ -15,6 +15,7 @@ const sections = [
     'description',
     'checklist',
     'metadata',
+    'blocker',
     'relationships',
     'history',
     'git',

resources/js/components/tickets/detail/TicketDetailHistory.vue

@@ -8,11 +8,21 @@ import {
 } from '@/components/ui/card';
 
 import { Badge } from '@/components/ui/badge';
+import { UserAvatar } from '@/components/ui/avatar';
 import type { TicketDetailHistoryProps } from '@/types/ticket-detail';
+import type { TranslationKey } from '@/types/localization';
+import type { TicketWorklogEntryType } from '@/types/models/ticket-worklog-entry-model';
 defineProps<TicketDetailHistoryProps>();
 const { t, date } = useLocalization();
 const formatDateTime = (value: string): string =>
     date(new Date(value), { dateStyle: 'medium', timeStyle: 'short' });
+const entryTypeLabels: Record<TicketWorklogEntryType, TranslationKey> = {
+    created: 'ticketDetail.historyType.created',
+    link_removed: 'ticketDetail.historyType.linkRemoved',
+    link_updated: 'ticketDetail.historyType.linkUpdated',
+    status_changed: 'ticketDetail.historyType.statusChanged',
+    updated: 'ticketDetail.historyType.updated',
+};
 </script>
 
 <template>
@@ -39,31 +49,70 @@ const formatDateTime = (value: string): string =>
                     {{ t('ticketDetail.noHistory') }}
                 </div>
 
-                <div v-else class="flex flex-col gap-4">
+                <ol v-else class="relative grid gap-0" role="list">
-                    <div
+                    <li
                         v-for="worklogEntry in ticket.worklog_entries"
                         :key="worklogEntry.id"
-                        class="border-border rounded-xl border px-4 py-4"
+                        class="border-border relative grid min-w-0 grid-cols-[2.5rem_minmax(0,1fr)] gap-3 border-l pb-6 last:border-transparent last:pb-0 sm:grid-cols-[3rem_minmax(0,1fr)] sm:gap-4"
                     >
-                        <div class="flex flex-wrap items-center gap-2">
+                        <div
-                            <Badge variant="outline">
+                            class="bg-card relative -left-px flex size-10 -translate-x-1/2 items-center justify-center rounded-full sm:size-12"
-                                {{ worklogEntry.entry_type }}
+                        >
-                            </Badge>
+                            <UserAvatar
-                            <span class="text-foreground text-sm font-medium">
+                                v-if="worklogEntry.actor"
-                                {{
+                                :user="worklogEntry.actor"
-                                    worklogEntry.actor?.name ??
+                                size="lg"
-                                    t('ticketDetail.system')
+                            />
-                                }}
+                            <span
+                                v-else
+                                aria-hidden="true"
+                                class="bg-muted text-muted-foreground flex size-10 items-center justify-center rounded-full border text-sm font-semibold"
+                            >
+                                S
                             </span>
                         </div>
-                        <p class="text-foreground mt-3 text-sm">
+                        <article
-                            {{ worklogEntry.summary }}
+                            class="bg-muted/20 min-w-0 rounded-xl border p-4"
-                        </p>
+                        >
-                        <p class="text-muted-foreground mt-2 text-xs">
+                            <div
-                            {{ formatDateTime(worklogEntry.created_at) }}
+                                class="flex min-w-0 flex-col gap-2 sm:flex-row sm:items-start sm:justify-between"
-                        </p>
+                            >
-                    </div>
+                                <div
-                </div>
+                                    class="flex min-w-0 flex-wrap items-center gap-2"
+                                >
+                                    <span
+                                        class="text-foreground text-sm font-semibold"
+                                    >
+                                        {{
+                                            worklogEntry.actor?.name ??
+                                            t('ticketDetail.system')
+                                        }}
+                                    </span>
+                                    <Badge variant="outline">
+                                        {{
+                                            t(
+                                                entryTypeLabels[
+                                                    worklogEntry.entry_type
+                                                ],
+                                            )
+                                        }}
+                                    </Badge>
+                                </div>
+                                <time
+                                    :datetime="worklogEntry.created_at"
+                                    class="text-muted-foreground shrink-0 text-xs"
+                                >
+                                    {{
+                                        formatDateTime(worklogEntry.created_at)
+                                    }}
+                                </time>
+                            </div>
+                            <p class="text-foreground mt-3 text-sm leading-6">
+                                {{ worklogEntry.summary }}
+                            </p>
+                        </article>
+                    </li>
+                </ol>
             </CardContent>
         </Card>
     </section>

resources/js/components/tickets/detail/TicketDetailRelationships.vue

@@ -1,76 +1,33 @@
 <script setup lang="ts">
-import { Link, useForm } from '@inertiajs/vue3';
+import { useLocalization } from '@/composables/useLocalization';
-import { ArrowRight, GitFork, Link2, Plus } from 'lucide-vue-next';
+import {
-import { computed, nextTick, useTemplateRef } from 'vue';
+    Card,
-import { store } from '@/actions/App/Http/Controllers/ProjectTicketLinkController';
+    CardContent,
-import FormFeedback from '@/components/FormFeedback.vue';
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+
+import { Form, Link } from '@inertiajs/vue3';
+import { computed } from 'vue';
+import ProjectTicketLinkController from '@/actions/App/Http/Controllers/ProjectTicketLinkController';
+import InputError from '@/components/InputError.vue';
 import TicketTreeList from '@/components/TicketTreeList.vue';
-import TicketFormField from '@/components/tickets/TicketFormField.vue';
-import TicketRelationshipLink from '@/components/tickets/detail/TicketRelationshipLink.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
-import { useFormProtection } from '@/composables/useFormProtection';
-import { useLocalization } from '@/composables/useLocalization';
 import { show as showTicket } from '@/routes/projects/tickets';
 import type { TicketDetailRelationshipsProps } from '@/types/ticket-detail';
-
 const props = defineProps<TicketDetailRelationshipsProps>();
-defineEmits<{ editParent: [] }>();
 const { t } = useLocalization();
-const linksHeading = useTemplateRef<HTMLHeadingElement>('linksHeading');
 const currentParentTicket = computed(
     () =>
         props.ticket.parent_ticket ??
         props.parentTicketOptions.find(
-            (parent) => parent.id === props.ticket.parent_ticket_id,
+            (parentTicket) => parentTicket.id === props.ticket.parent_ticket_id,
         ) ??
         null,
 );
-const canAddLink = computed(
-    () =>
-        props.canEditTicket &&
-        props.ticketLinkTypes.length > 0 &&
-        props.ticketLinkOptions.length > 0,
-);
-const form = useForm({
-    ticket_link_type_id: props.ticketLinkTypes[0]?.id ?? '',
-    linked_ticket_id: '',
-});
-const protection = useFormProtection(form, {
-    isDirty: () => props.canEditTicket && form.isDirty,
-});
-const selectedType = computed(() =>
-    props.ticketLinkTypes.find(
-        (type) => String(type.id) === String(form.ticket_link_type_id),
-    ),
-);
-const selectedTicket = computed(() =>
-    props.ticketLinkOptions.find(
-        (ticket) => String(ticket.id) === String(form.linked_ticket_id),
-    ),
-);
-
-async function focusLinks(): Promise<void> {
-    await nextTick();
-    linksHeading.value?.focus();
-}
-function submit(): void {
-    if (!canAddLink.value) {
-        return;
-    }
-    protection.submit(
-        store({ project: props.project.id, ticket: props.ticket.id }),
-        {
-            preserveScroll: true,
-            onSuccess: () => {
-                form.linked_ticket_id = '';
-                form.clearErrors();
-                void focusLinks();
-            },
-        },
-    );
-}
 </script>
 
 <template>
@@ -82,223 +39,184 @@ function submit(): void {
         <h2 id="ticket-relationships-title" class="text-lg font-semibold">
             {{ t('ticketDetail.relationships') }}
         </h2>
-        <Card class="min-w-0 gap-5 overflow-hidden">
+        <Card v-if="ticket.ticket_type?.is_parent" class="h-fit">
-            <CardHeader
+            <CardHeader>
-                class="flex flex-wrap items-center justify-between gap-3"
+                <CardTitle>{{ t('ticketDetail.children') }}</CardTitle>
-            >
+                <CardDescription>{{
-                <h3 class="flex items-center gap-2 font-semibold">
+                    t('ticketDetail.childrenDescription')
-                    <GitFork class="text-primary size-5" aria-hidden="true" />{{
+                }}</CardDescription>
-                        t('ticketRelationships.hierarchy')
-                    }}
-                </h3>
-                <Button
-                    v-if="canEditTicket"
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    @click="$emit('editParent')"
-                    >{{ t('ticketRelationships.editParent') }}</Button
-                >
             </CardHeader>
-            <CardContent class="grid min-w-0 gap-5">
+
-                <div class="grid min-w-0 gap-2">
+            <CardContent>
-                    <h4
-                        class="text-muted-foreground text-xs font-semibold uppercase tracking-wide"
-                    >
-                        {{ t('ticketDetail.parent') }}
-                    </h4>
-                    <Link
-                        v-if="currentParentTicket"
-                        :href="
-                            showTicket({
-                                project: project.id,
-                                ticket: currentParentTicket.id,
-                            })
-                        "
-                        class="border-primary/20 bg-primary/5 hover:border-primary focus-visible:ring-ring/35 group grid min-w-0 gap-2 rounded-xl border p-4 outline-none transition-colors focus-visible:ring-2"
-                    >
-                        <span
-                            class="text-primary font-mono text-xs font-semibold"
-                            >{{ currentParentTicket.ticket_key }}</span
-                        >
-                        <span
-                            class="group-hover:text-primary text-sm font-medium"
-                            >{{ currentParentTicket.title }}</span
-                        >
-                    </Link>
-                    <p
-                        v-else
-                        class="text-muted-foreground rounded-xl border border-dashed p-4 text-sm"
-                    >
-                        {{ t('ticketDetail.noParent') }}
-                    </p>
-                    <p
-                        v-if="canEditTicket"
-                        class="text-muted-foreground text-xs"
-                    >
-                        {{ t('ticketRelationships.parentHelp') }}
-                    </p>
-                </div>
                 <div
-                    v-if="ticket.ticket_type?.is_parent"
+                    v-if="childTicketTree.length === 0"
-                    class="grid min-w-0 gap-3 border-t pt-5"
+                    class="border-border text-muted-foreground rounded-xl border border-dashed px-4 py-6 text-sm"
                 >
-                    <div class="flex flex-wrap items-center gap-2">
+                    {{ t('ticketDetail.noChildren') }}
-                        <h4 class="text-sm font-semibold">
-                            {{ t('ticketDetail.children') }}
-                        </h4>
-                        <Badge variant="secondary">{{
-                            childTicketTree.length
-                        }}</Badge>
-                    </div>
-                    <p class="text-muted-foreground text-xs">
-                        {{ t('ticketRelationships.childrenHelp') }}
-                    </p>
-                    <p
-                        v-if="childTicketTree.length === 0"
-                        class="text-muted-foreground rounded-xl border border-dashed p-4 text-sm"
-                    >
-                        {{ t('ticketDetail.noChildren') }}
-                    </p>
-                    <TicketTreeList
-                        v-else
-                        :nodes="childTicketTree"
-                        :project-id="project.id"
-                    />
                 </div>
+
+                <TicketTreeList
+                    v-else
+                    :nodes="childTicketTree"
+                    :project-id="project.id"
+                />
             </CardContent>
         </Card>
-        <Card class="min-w-0 gap-5 overflow-hidden">
+
+        <Card v-else-if="currentParentTicket !== null" class="h-fit">
             <CardHeader>
-                <h3
+                <CardTitle>{{ t('ticketDetail.parent') }}</CardTitle>
-                    ref="linksHeading"
+                <CardDescription>{{
-                    tabindex="-1"
+                    t('ticketDetail.parentDescription')
-                    class="focus-visible:ring-ring/35 flex flex-wrap items-center gap-2 rounded-md font-semibold outline-none focus-visible:ring-2"
+                }}</CardDescription>
-                >
-                    <Link2 class="text-primary size-5" aria-hidden="true" />{{
-                        t('ticketDetail.linkedTickets')
-                    }}<Badge variant="secondary">{{
-                        linkedTickets.length
-                    }}</Badge>
-                </h3>
-                <p class="text-muted-foreground text-sm">
-                    {{ t('ticketDetail.linkedTicketsDescription') }}
-                </p>
             </CardHeader>
-            <CardContent class="grid min-w-0 gap-5">
+
-                <p
+            <CardContent>
+                <Link
+                    :href="
+                        showTicket({
+                            project: project.id,
+                            ticket: currentParentTicket.id,
+                        })
+                    "
+                    class="border-border hover:border-primary/60 block rounded-xl border px-4 py-4 transition"
+                >
+                    <div class="font-medium">
+                        {{ currentParentTicket.ticket_key }}
+                    </div>
+                    <div class="text-muted-foreground mt-1 text-sm">
+                        {{ currentParentTicket.title }}
+                    </div>
+                </Link>
+            </CardContent>
+        </Card>
+
+        <Card class="h-fit">
+            <CardHeader>
+                <CardTitle>{{ t('ticketDetail.linkedTickets') }}</CardTitle>
+                <CardDescription>{{
+                    t('ticketDetail.linkedTicketsDescription')
+                }}</CardDescription>
+            </CardHeader>
+
+            <CardContent class="space-y-4">
+                <Form
+                    v-if="
+                        canEditTicket &&
+                        ticketLinkTypes.length > 0 &&
+                        ticketLinkOptions.length > 0
+                    "
+                    v-bind="
+                        ProjectTicketLinkController.store.form({
+                            project: project.id,
+                            ticket: ticket.id,
+                        })
+                    "
+                    class="border-border grid gap-4 rounded-xl border border-dashed p-4"
+                    v-slot="{ errors, processing }"
+                >
+                    <div class="grid min-w-0 gap-2">
+                        <Label for="ticket_link_type_id">{{
+                            t('ticketDetail.linkType')
+                        }}</Label>
+                        <select
+                            id="ticket_link_type_id"
+                            name="ticket_link_type_id"
+                            class="min-h-control border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 w-full min-w-0 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
+                        >
+                            <option
+                                v-for="ticketLinkType in ticketLinkTypes"
+                                :key="ticketLinkType.id"
+                                :value="ticketLinkType.id"
+                            >
+                                {{ ticketLinkType.label }}
+                            </option>
+                        </select>
+                        <InputError :message="errors.ticket_link_type_id" />
+                    </div>
+
+                    <div class="grid min-w-0 gap-2">
+                        <Label for="linked_ticket_id">{{
+                            t('ticketDetail.linkedTicket')
+                        }}</Label>
+                        <select
+                            id="linked_ticket_id"
+                            name="linked_ticket_id"
+                            class="min-h-control border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 w-full min-w-0 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
+                        >
+                            <option
+                                v-for="ticketLinkOption in ticketLinkOptions"
+                                :key="ticketLinkOption.id"
+                                :value="ticketLinkOption.id"
+                            >
+                                {{
+                                    `${ticketLinkOption.ticket_key} - ${ticketLinkOption.title}`
+                                }}
+                            </option>
+                        </select>
+                        <InputError :message="errors.linked_ticket_id" />
+                    </div>
+
+                    <Button type="submit" :disabled="processing">{{
+                        t('ticketDetail.saveLink')
+                    }}</Button>
+                </Form>
+
+                <div
                     v-if="linkedTickets.length === 0"
-                    class="text-muted-foreground rounded-xl border border-dashed p-4 text-sm"
+                    class="border-border text-muted-foreground rounded-xl border border-dashed px-4 py-6 text-sm"
                 >
                     {{ t('ticketDetail.noLinks') }}
-                </p>
+                </div>
-                <ul v-else class="grid min-w-0 gap-3">
+
-                    <TicketRelationshipLink
+                <div v-else class="space-y-3">
-                        v-for="link in linkedTickets"
+                    <div
-                        :key="link.id"
+                        v-for="linkedTicket in linkedTickets"
-                        :link="link"
+                        :key="linkedTicket.id"
-                        :project-id="project.id"
+                        class="border-border rounded-xl border px-4 py-4"
-                        :ticket-id="ticket.id"
-                        :ticket-key="ticket.ticket_key"
-                        :can-edit="canEditTicket"
-                        @removed="focusLinks"
-                    />
-                </ul>
-                <form
-                    v-if="canAddLink"
-                    class="bg-muted/30 grid min-w-0 gap-4 rounded-xl border p-4"
-                    @submit.prevent="submit"
-                >
-                    <h4 class="flex items-center gap-2 text-sm font-semibold">
-                        <Plus class="size-4" aria-hidden="true" />{{
-                            t('ticketRelationships.addLink')
-                        }}
-                    </h4>
-                    <FormFeedback
-                        :state="protection.state.value"
-                        @retry="submit"
-                    />
-                    <fieldset
-                        :disabled="form.processing"
-                        class="grid min-w-0 gap-4 sm:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]"
                     >
-                        <TicketFormField
+                        <div class="flex flex-wrap items-center gap-2">
-                            id="ticket_link_type_id"
+                            <Badge variant="secondary">
-                            v-model="form.ticket_link_type_id"
+                                {{ linkedTicket.ticket_link_type.label }}
-                            kind="select"
+                            </Badge>
-                            :label="t('ticketDetail.linkType')"
+                            <Link
-                            :options="
+                                :href="
-                                ticketLinkTypes.map((type) => ({
+                                    showTicket({
-                                    value: type.id,
+                                        project: project.id,
-                                    label: type.label,
+                                        ticket: linkedTicket.linked_ticket.id,
-                                }))
+                                    })
+                                "
+                                class="text-foreground hover:text-primary font-medium transition"
+                            >
+                                {{ linkedTicket.linked_ticket.ticket_key }}
+                            </Link>
+                        </div>
+                        <p class="text-muted-foreground mt-2 text-sm">
+                            {{ linkedTicket.linked_ticket.title }}
+                        </p>
+
+                        <Form
+                            v-if="canEditTicket"
+                            v-bind="
+                                ProjectTicketLinkController.destroy.form({
+                                    project: project.id,
+                                    ticket: ticket.id,
+                                    ticketLink: linkedTicket.id,
+                                })
                             "
-                            :error="form.errors.ticket_link_type_id"
+                            class="mt-3 flex justify-end"
-                            :disabled="form.processing"
+                            v-slot="{ processing: deleting }"
-                            required
-                        />
-                        <TicketFormField
-                            id="linked_ticket_id"
-                            v-model="form.linked_ticket_id"
-                            kind="select"
-                            :label="t('ticketDetail.linkedTicket')"
-                            :options="[
-                                {
-                                    value: '',
-                                    label: t(
-                                        'ticketRelationships.selectTicket',
-                                    ),
-                                },
-                                ...ticketLinkOptions.map((ticket) => ({
-                                    value: ticket.id,
-                                    label: `${ticket.ticket_key} — ${ticket.title}`,
-                                })),
-                            ]"
-                            :error="form.errors.linked_ticket_id"
-                            :disabled="form.processing"
-                            required
-                        />
-                    </fieldset>
-                    <p
-                        v-if="selectedType && selectedTicket"
-                        aria-live="polite"
-                        class="text-muted-foreground flex flex-wrap items-center gap-2 text-sm"
-                    >
-                        <span class="font-mono text-xs">{{
-                            ticket.ticket_key
-                        }}</span
-                        ><span>{{ selectedType.label }}</span
-                        ><ArrowRight class="size-4" aria-hidden="true" /><span
-                            class="font-mono text-xs"
-                            >{{ selectedTicket.ticket_key }}</span
                         >
-                    </p>
+                            <Button
-                    <p class="text-muted-foreground text-xs">
+                                type="submit"
-                        {{ t('ticketRelationships.directionHelp') }}
+                                variant="destructive"
-                    </p>
+                                size="sm"
-                    <Button
+                                :disabled="deleting"
-                        type="submit"
+                                >{{ t('ticketDetail.removeLink') }}</Button
-                        :disabled="form.processing || !selectedTicket"
+                            >
-                        class="sm:justify-self-start"
+                        </Form>
-                        >{{
+                    </div>
-                            form.processing
+                </div>
-                                ? t('forms.saving')
-                                : t('ticketDetail.saveLink')
-                        }}</Button
-                    >
-                </form>
-                <p
-                    v-else-if="canEditTicket"
-                    class="text-muted-foreground text-sm"
-                >
-                    {{
-                        t(
-                            ticketLinkTypes.length === 0
-                                ? 'ticketRelationships.noTypes'
-                                : 'ticketRelationships.noTargets',
-                        )
-                    }}
-                </p>
             </CardContent>
         </Card>
     </section>

resources/js/components/tickets/detail/TicketRelationshipLink.vue

@@ -1,116 +0,0 @@
-<script setup lang="ts">
-import { Link, useForm } from '@inertiajs/vue3';
-import { ArrowDownLeft, ArrowUpRight, Unlink } from 'lucide-vue-next';
-import { computed } from 'vue';
-import { destroy } from '@/actions/App/Http/Controllers/ProjectTicketLinkController';
-import FormFeedback from '@/components/FormFeedback.vue';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { useFormProtection } from '@/composables/useFormProtection';
-import { useLocalization } from '@/composables/useLocalization';
-import { show } from '@/routes/projects/tickets';
-import type { TicketLinkModel } from '@/types/models/ticket-link-model';
-
-const props = defineProps<{
-    link: TicketLinkModel;
-    projectId: number;
-    ticketId: number;
-    ticketKey: string;
-    canEdit: boolean;
-}>();
-const emit = defineEmits<{ removed: [] }>();
-const { t } = useLocalization();
-const outgoing = computed(() => props.link.source_ticket_id === props.ticketId);
-const form = useForm({});
-const protection = useFormProtection(form);
-function remove(): void {
-    if (!props.canEdit) {
-        return;
-    }
-    protection.submit(
-        destroy({
-            project: props.projectId,
-            ticket: props.ticketId,
-            ticketLink: props.link.id,
-        }),
-        {
-            preserveScroll: true,
-            onSuccess: () => emit('removed'),
-        },
-    );
-}
-</script>
-
-<template>
-    <li
-        class="grid min-w-0 gap-3 rounded-xl border p-4"
-        :data-ticket-link="link.id"
-    >
-        <div class="flex min-w-0 flex-wrap items-center gap-2">
-            <Badge
-                variant="outline"
-                class="text-muted-foreground max-w-full whitespace-normal"
-            >
-                <ArrowUpRight
-                    v-if="outgoing"
-                    class="size-3.5 shrink-0"
-                    aria-hidden="true"
-                /><ArrowDownLeft
-                    v-else
-                    class="size-3.5 shrink-0"
-                    aria-hidden="true"
-                />
-                {{
-                    t(
-                        outgoing
-                            ? 'ticketRelationships.outgoing'
-                            : 'ticketRelationships.incoming',
-                    )
-                }}
-            </Badge>
-            <span class="text-muted-foreground font-mono text-xs">{{
-                ticketKey
-            }}</span>
-            <span class="text-sm font-medium">{{
-                link.ticket_link_type.label
-            }}</span>
-        </div>
-        <div class="flex min-w-0 flex-wrap items-start justify-between gap-3">
-            <Link
-                :href="
-                    show({ project: projectId, ticket: link.linked_ticket.id })
-                "
-                class="hover:text-primary focus-visible:ring-ring/35 grid min-w-0 flex-1 basis-40 gap-1 rounded-md outline-none transition-colors focus-visible:ring-2"
-            >
-                <span class="text-primary font-mono text-xs font-semibold">{{
-                    link.linked_ticket.ticket_key
-                }}</span>
-                <span class="wrap-anywhere text-sm font-medium">{{
-                    link.linked_ticket.title
-                }}</span>
-            </Link>
-            <form v-if="canEdit" @submit.prevent="remove">
-                <Button
-                    type="submit"
-                    variant="ghost"
-                    size="sm"
-                    class="text-muted-foreground hover:text-destructive"
-                    :aria-label="
-                        t('ticketRelationships.removeLink', {
-                            key: link.linked_ticket.ticket_key,
-                        })
-                    "
-                    :disabled="form.processing"
-                    ><Unlink class="size-4" aria-hidden="true" />{{
-                        t('ticketDetail.removeLink')
-                    }}</Button
-                >
-            </form>
-        </div>
-        <FormFeedback
-            v-if="canEdit"
-            :state="protection.state.value"
-            @retry="remove"
-        />
-    </li>
-</template>

resources/js/lib/acceptance-criteria.ts

@@ -5,76 +5,6 @@ import type {
 
 const MAX_INDENT_LEVEL = 8;
 
-export const canIndentAcceptanceCriterion = (
-    items: AcceptanceCriteriaModel,
-    index: number,
-): boolean => {
-    const item = items[index];
-    const previous = items[index - 1];
-    if (!item || !previous || item.indent > previous.indent) {
-        return false;
-    }
-    return items
-        .slice(index, acceptanceCriteriaSubtreeEnd(items, index))
-        .every((descendant) => descendant.indent < MAX_INDENT_LEVEL);
-};
-
-const acceptanceCriteriaSubtreeEnd = (
-    items: AcceptanceCriteriaModel,
-    index: number,
-): number => {
-    let end = index + 1;
-    while (end < items.length && items[end].indent > items[index].indent) {
-        end++;
-    }
-    return end;
-};
-
-export const indentAcceptanceCriterion = (
-    items: AcceptanceCriteriaModel,
-    index: number,
-    direction: 1 | -1,
-): AcceptanceCriteriaModel => {
-    if (
-        !items[index] ||
-        (direction === 1
-            ? !canIndentAcceptanceCriterion(items, index)
-            : items[index].indent === 0)
-    ) {
-        return items;
-    }
-    const end = acceptanceCriteriaSubtreeEnd(items, index);
-    return items.map((item, position) =>
-        position >= index && position < end
-            ? { ...item, indent: item.indent + direction }
-            : item,
-    );
-};
-
-/** Remove only the selected criterion, promoting its children without losing them. */
-export const removeAcceptanceCriterion = (
-    items: AcceptanceCriteriaModel,
-    index: number,
-): AcceptanceCriteriaModel => {
-    if (!items[index]) {
-        return items;
-    }
-    const end = acceptanceCriteriaSubtreeEnd(items, index);
-    return items.flatMap((item, position) =>
-        position === index
-            ? []
-            : [
-                  {
-                      ...item,
-                      indent:
-                          position > index && position < end
-                              ? item.indent - 1
-                              : item.indent,
-                  },
-              ],
-    );
-};
-
 export type AcceptanceCriteriaEditorState = {
     checklist: string;
 };

resources/js/lib/backlog.ts

@@ -1,114 +0,0 @@
-import type {
-    BacklogFilterState,
-    BacklogTicketTreeNode,
-} from '@/types/backlog';
-import type { TicketModel } from '@/types/models/ticket-model';
-
-export function buildBacklogTicketTree(
-    tickets: TicketModel[],
-): BacklogTicketTreeNode[] {
-    const nodesByTicketId = new Map<number, BacklogTicketTreeNode>();
-
-    for (const ticket of tickets) {
-        nodesByTicketId.set(ticket.id, {
-            children: [],
-            matchesFilters: true,
-            ticket,
-        });
-    }
-
-    const roots: BacklogTicketTreeNode[] = [];
-
-    for (const ticket of tickets) {
-        const node = nodesByTicketId.get(ticket.id);
-
-        if (!node) {
-            continue;
-        }
-
-        const parentNode =
-            ticket.parent_ticket_id === null
-                ? undefined
-                : nodesByTicketId.get(ticket.parent_ticket_id);
-
-        if (parentNode) {
-            parentNode.children.push(node);
-        } else {
-            roots.push(node);
-        }
-    }
-
-    return roots;
-}
-
-export function filterBacklogTicketTree(
-    nodes: BacklogTicketTreeNode[],
-    filters: BacklogFilterState,
-): BacklogTicketTreeNode[] {
-    return nodes.flatMap((node) => {
-        const children = filterBacklogTicketTree(node.children, filters);
-        const matchesFilters = ticketMatchesFilters(node.ticket, filters);
-
-        if (!matchesFilters && children.length === 0) {
-            return [];
-        }
-
-        return [
-            {
-                ...node,
-                children,
-                matchesFilters,
-            },
-        ];
-    });
-}
-
-export function countBacklogTreeTickets(
-    nodes: BacklogTicketTreeNode[],
-): number {
-    return nodes.reduce(
-        (count, node) => count + 1 + countBacklogTreeTickets(node.children),
-        0,
-    );
-}
-
-export function expandableBacklogTicketIds(
-    nodes: BacklogTicketTreeNode[],
-): number[] {
-    return nodes.flatMap((node) => [
-        ...(node.children.length > 0 ? [node.ticket.id] : []),
-        ...expandableBacklogTicketIds(node.children),
-    ]);
-}
-
-function ticketMatchesFilters(
-    ticket: TicketModel,
-    filters: BacklogFilterState,
-): boolean {
-    const query = filters.query.trim().toLocaleLowerCase();
-    const searchableText = [
-        ticket.ticket_key,
-        ticket.title,
-        ticket.description,
-        ticket.ticket_type.name,
-        ticket.ticket_priority.name,
-        ticket.ticket_status?.name,
-        ticket.assignee?.name,
-    ]
-        .filter((value): value is string => Boolean(value))
-        .join(' ')
-        .toLocaleLowerCase();
-
-    return (
-        (query === '' || searchableText.includes(query)) &&
-        (filters.typeId === '' || ticket.ticket_type_id === filters.typeId) &&
-        (filters.priorityId === '' ||
-            ticket.ticket_priority_id === filters.priorityId) &&
-        (filters.statusId === '' ||
-            ticket.ticket_status_id === filters.statusId) &&
-        (filters.assigneeId === '' ||
-            (filters.assigneeId === 'unassigned'
-                ? ticket.assignee_user_id === null
-                : ticket.assignee_user_id === filters.assigneeId))
-    );
-}

resources/js/locales/en.ts

@@ -1,23 +1,4 @@
 export const en = {
-    'criteria.title': 'Acceptance criteria',
-    'criteria.progress': '{completed} of {total} complete',
-    'criteria.empty': 'No acceptance criteria yet.',
-    'criteria.required': 'Enter a criterion or remove this row.',
-    'criteria.edit': 'Edit checklist',
-    'criteria.preview': 'Preview checklist',
-    'criteria.item': 'Criterion {number}',
-    'criteria.complete': 'Complete criterion {number}: {text}',
-    'criteria.indent': 'Indent criterion {number}',
-    'criteria.outdent': 'Outdent criterion {number}',
-    'criteria.remove': 'Remove criterion {number}',
-    'criteria.add': 'Add criterion',
-    'criteria.hint':
-        'Use the indent buttons or Alt + Left/Right in a text field to nest criteria. Checking a parent also checks its children. Removing a parent keeps its children.',
-    'criteria.unsaved': 'Checklist changes will be saved with the ticket.',
-    'criteria.saving': 'Saving checklist…',
-    'criteria.saveError':
-        'Checklist status could not be saved. Please try again.',
-
     'board.title': '{name} board',
     'board.description':
         'Work in your configured workflow. Tickets without a board column stay in the backlog.',
@@ -50,40 +31,6 @@ export const en = {
     'board.targetStatus': 'Destination status',
     'board.noMovesDescription':
         'This status does not allow moving anywhere else.',
-    'backlog.title': '{name} backlog',
-    'backlog.description':
-        'Shape incoming work without losing sight of parent and child tickets.',
-    'backlog.openBoard': 'Open board',
-    'backlog.backToProject': 'Project overview',
-    'backlog.moveTicket': 'Move {key}',
-    'backlog.filters.title': 'Find backlog tickets',
-    'backlog.filters.description':
-        'Filter this view locally. Matching child tickets keep their parent context visible.',
-    'backlog.filters.search': 'Search',
-    'backlog.filters.searchPlaceholder': 'Key, title, description, or metadata',
-    'backlog.filters.type': 'Type',
-    'backlog.filters.allTypes': 'All types',
-    'backlog.filters.priority': 'Priority',
-    'backlog.filters.allPriorities': 'All priorities',
-    'backlog.filters.status': 'Status',
-    'backlog.filters.allStatuses': 'All backlog statuses',
-    'backlog.filters.assignee': 'Assignee',
-    'backlog.filters.allAssignees': 'All assignees',
-    'backlog.filters.clear': 'Clear filters',
-    'backlog.filters.parentContext': 'Parent context',
-    'backlog.filters.empty.title': 'No tickets match these filters',
-    'backlog.filters.empty.description':
-        'Try a broader search or clear the filters to see the complete backlog.',
-    'backlog.results.title': 'Backlog tickets',
-    'backlog.results.count': 'Showing {count} of {total} tickets',
-    'backlog.empty.title': 'Your backlog is clear',
-    'backlog.empty.description':
-        'New tickets without a workflow column will appear here.',
-    'backlog.empty.action': 'Create the first ticket',
-    'backlog.tree.expand': 'Expand children of {key}',
-    'backlog.tree.collapse': 'Collapse children of {key}',
-    'backlog.tree.expandAll': 'Expand all',
-    'backlog.tree.collapseAll': 'Collapse all',
     'projectCreation.title': 'Create a project',
     'projectCreation.description':
         'Give your work a home. Start fresh or reuse a setup that already works for your team.',
@@ -409,8 +356,6 @@ export const en = {
     'tickets.noStatus': 'No status',
     'tickets.assignedTo': 'Assigned to {name}',
     'tickets.unassigned': 'Unassigned',
-    'tickets.tree.expand': 'Expand children of {key}',
-    'tickets.tree.collapse': 'Collapse children of {key}',
     'common.save': 'Save',
     'common.loading': 'Loading…',
     'common.error': 'Something went wrong.',
@@ -456,9 +401,24 @@ export const en = {
     'ticketDetail.checklistPlaceholder':
         '[ ] User can sign in\n  [x] Validation is shown for invalid credentials',
     'ticketDetail.blocked': 'Mark ticket as blocked',
+    'ticketDetail.blocker': 'Blocker',
+    'ticketDetail.blockerDescription':
+        'Record whether progress is blocked and why. Changes are added to the ticket worklog.',
+    'ticketDetail.blockerActive': 'Blocked',
+    'ticketDetail.blockerInactive': 'Not blocked',
+    'ticketDetail.blockerActiveDescription':
+        'A blocker reason is required while this ticket is blocked.',
+    'ticketDetail.blockerInactiveDescription':
+        'This ticket currently has no active blocker.',
     'ticketDetail.blockerComment': 'Blocker comment',
+    'ticketDetail.blockerCommentHelp':
+        'Explain the concrete dependency or decision preventing progress.',
     'ticketDetail.blockerPlaceholder':
         'Describe what currently blocks progress on this ticket.',
+    'ticketDetail.saveBlocker': 'Save blocker',
+    'ticketDetail.unblockTicket': 'Unblock ticket',
+    'ticketDetail.resetBlocker': 'Discard blocker changes',
+    'ticketDetail.savingBlocker': 'Saving blocker…',
     'ticketDetail.customFields': 'Custom fields',
     'ticketDetail.customFieldsDescription':
         'Project-configured fields can be tracked directly on the ticket.',
@@ -512,27 +472,15 @@ export const en = {
     'ticketDetail.noLinks':
         'No ticket links are configured for this ticket yet.',
     'ticketDetail.removeLink': 'Remove',
-    'ticketRelationships.hierarchy': 'Hierarchy',
-    'ticketRelationships.editParent': 'Change parent',
-    'ticketRelationships.parentHelp':
-        'Change parent to assign this ticket or choose “No parent ticket” to detach it.',
-    'ticketRelationships.childrenHelp':
-        'Open a child ticket to change its parent. Expand a group to see its descendants.',
-    'ticketRelationships.addLink': 'Add or update a link',
-    'ticketRelationships.selectTicket': 'Select a ticket',
-    'ticketRelationships.directionHelp':
-        'The selected relationship points from this ticket to the linked ticket. Saving an existing pair updates its type and direction.',
-    'ticketRelationships.outgoing': 'Outgoing',
-    'ticketRelationships.incoming': 'Incoming',
-    'ticketRelationships.removeLink': 'Remove link to {key}',
-    'ticketRelationships.noTypes':
-        'No link types are configured for this project.',
-    'ticketRelationships.noTargets':
-        'No other tickets are available to link in this project.',
     'ticketDetail.historyDescription':
         'Every tracked ticket change is recorded with actor and timestamp.',
     'ticketDetail.noHistory': 'No worklog entries exist for this ticket yet.',
     'ticketDetail.system': 'System',
+    'ticketDetail.historyType.created': 'Ticket created',
+    'ticketDetail.historyType.updated': 'Ticket updated',
+    'ticketDetail.historyType.statusChanged': 'Status changed',
+    'ticketDetail.historyType.linkUpdated': 'Link added',
+    'ticketDetail.historyType.linkRemoved': 'Link removed',
     'ticketDetail.sourceBranch': 'Source branch: {name}',
     'ticketForm.create': 'Create ticket',
     'ticketForm.pageTitle': 'Create {project} ticket',

resources/js/pages/projects/Backlog.vue

@@ -1,155 +1,70 @@
 <script setup lang="ts">
-import { Head, Link } from '@inertiajs/vue3';
+import { Form, Head, Link } from '@inertiajs/vue3';
-import {
+import ProjectBoardController from '@/actions/App/Http/Controllers/ProjectBoardController';
-    ArrowLeft,
+import Heading from '@/components/Heading.vue';
-    ChevronsDownUp,
+import { TicketListItem } from '@/components/tickets';
-    ChevronsUpDown,
-    Columns3,
-    Plus,
-    RotateCcw,
-    Search,
-} from 'lucide-vue-next';
-import { computed, reactive, ref, watch } from 'vue';
-import BacklogTicketTree from '@/components/BacklogTicketTree.vue';
-import FeedbackState from '@/components/FeedbackState.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { useLocalization } from '@/composables/useLocalization';
-import AppLayout from '@/layouts/AppLayout.vue';
 import {
-    buildBacklogTicketTree,
+    Card,
-    countBacklogTreeTickets,
+    CardContent,
-    expandableBacklogTicketIds,
+    CardDescription,
-    filterBacklogTicketTree,
+    CardHeader,
-} from '@/lib/backlog';
+    CardTitle,
+} from '@/components/ui/card';
+import AppLayout from '@/layouts/AppLayout.vue';
+import { ticketStatusLabel } from '@/lib/tickets';
 import { index as boardIndex } from '@/routes/projects/board';
 import { index as backlogIndex } from '@/routes/projects/backlog';
-import { index as projectIndex, show } from '@/routes/projects/index';
+import { index, show } from '@/routes/projects/index';
 import { create as createTicket } from '@/routes/projects/tickets';
-import type {
+import type { BreadcrumbItem, ProjectBacklogPageProps } from '@/types';
-    BacklogFilterState,
+import type { TicketModel } from '@/types/models/ticket-model';
-    BreadcrumbItem,
+import type { TicketStatusModel } from '@/types/models/ticket-status-model';
-    ProjectBacklogPageProps,
-} from '@/types';
 
 const props = defineProps<ProjectBacklogPageProps>();
-const { t } = useLocalization();
-const breadcrumbs = computed<BreadcrumbItem[]>(() => [
-    { title: t('navigation.projects'), href: projectIndex() },
-    { title: props.project.name, href: show(props.project.id) },
-    { title: t('navigation.backlog'), href: backlogIndex(props.project.id) },
-]);
 
-const filters = reactive<BacklogFilterState>({
+const breadcrumbs: BreadcrumbItem[] = [
-    assigneeId: '',
+    {
-    priorityId: '',
+        title: 'Projects',
-    query: '',
+        href: index(),
-    statusId: '',
-    typeId: '',
-});
-const collapsedTicketIds = reactive(new Set<number>());
-const pendingTicketId = ref<number | null>(null);
-const ticketTree = computed(() => buildBacklogTicketTree(props.tickets));
-const filteredTicketTree = computed(() =>
-    filterBacklogTicketTree(ticketTree.value, filters),
-);
-const visibleTicketCount = computed(() =>
-    countBacklogTreeTickets(filteredTicketTree.value),
-);
-const expandableTicketIds = computed(() =>
-    expandableBacklogTicketIds(filteredTicketTree.value),
-);
-const hasActiveFilters = computed(
-    () =>
-        filters.query.trim() !== '' ||
-        filters.typeId !== '' ||
-        filters.priorityId !== '' ||
-        filters.statusId !== '' ||
-        filters.assigneeId !== '',
-);
-const allVisibleBranchesCollapsed = computed(
-    () =>
-        expandableTicketIds.value.length > 0 &&
-        expandableTicketIds.value.every((ticketId) =>
-            collapsedTicketIds.has(ticketId),
-        ),
-);
-
-function clearFilters(): void {
-    filters.query = '';
-    filters.typeId = '';
-    filters.priorityId = '';
-    filters.statusId = '';
-    filters.assigneeId = '';
-}
-
-function toggleTicket(ticketId: number): void {
-    if (collapsedTicketIds.has(ticketId)) {
-        collapsedTicketIds.delete(ticketId);
-    } else {
-        collapsedTicketIds.add(ticketId);
-    }
-}
-
-function toggleAllBranches(): void {
-    if (allVisibleBranchesCollapsed.value) {
-        collapsedTicketIds.clear();
-
-        return;
-    }
-
-    for (const ticketId of expandableTicketIds.value) {
-        collapsedTicketIds.add(ticketId);
-    }
-}
-
-function finishMove(ticketId: number): void {
-    if (pendingTicketId.value === ticketId) {
-        pendingTicketId.value = null;
-    }
-}
-
-watch(
-    () => props.project.id,
-    () => {
-        clearFilters();
-        collapsedTicketIds.clear();
-        pendingTicketId.value = null;
     },
-);
+    {
+        title: props.project.name,
+        href: show(props.project.id),
+    },
+    {
+        title: 'Backlog',
+        href: backlogIndex(props.project.id),
+    },
+];
+
+const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
+    return (ticket.ticket_status?.allowed_target_statuses ?? []).filter(
+        (ticketStatus) => ticketStatus.id !== ticket.ticket_status_id,
+    );
+};
 </script>
 
 <template>
     <AppLayout :breadcrumbs="breadcrumbs">
-        <Head :title="t('backlog.title', { name: project.name })" />
+        <Head :title="`${project.name} backlog`" />
 
-        <div class="gap-page md:p-page flex min-w-0 flex-1 flex-col p-4">
+        <div class="flex flex-1 flex-col gap-6 p-4">
-            <header
+            <div
-                class="flex min-w-0 flex-col gap-4 xl:flex-row xl:items-start xl:justify-between"
+                class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
             >
-                <div class="grid min-w-0 gap-2">
+                <div class="space-y-3">
-                    <div class="flex min-w-0 flex-wrap items-center gap-3">
+                    <Badge variant="outline" class="px-3 py-1">
-                        <Badge
+                        {{ project.key }}
-                            variant="outline"
+                    </Badge>
-                            class="wrap-anywhere max-w-full whitespace-normal"
+                    <Heading
-                        >
+                        :title="`${project.name} backlog`"
-                            {{ project.key }}
+                        description="All newly created tickets start here before they move onto the board."
-                        </Badge>
+                    />
-                        <p class="text-caption text-muted-foreground">
-                            {{ t('tickets.count', { count: tickets.length }) }}
-                        </p>
-                    </div>
-                    <h1
-                        class="text-headline-mobile md:text-headline wrap-anywhere"
-                    >
-                        {{ t('backlog.title', { name: project.name }) }}
-                    </h1>
-                    <p class="text-caption text-muted-foreground max-w-2xl">
-                        {{ t('backlog.description') }}
-                    </p>
                 </div>
 
-                <div class="flex flex-wrap gap-2">
+                <div class="flex flex-wrap gap-3">
                     <Button v-if="canCreateTickets" as-child>
                         <Link
                             :href="
@@ -159,286 +74,138 @@ watch(
                                 )
                             "
                         >
-                            <Plus aria-hidden="true" />
+                            Create ticket
-                            {{ t('navigation.createTicket') }}
                         </Link>
                     </Button>
+
                     <Button as-child variant="outline">
-                        <Link :href="boardIndex(project.id)">
+                        <Link :href="boardIndex(project.id)">Open board</Link>
-                            <Columns3 aria-hidden="true" />
-                            {{ t('backlog.openBoard') }}
-                        </Link>
                     </Button>
-                    <Button as-child variant="ghost">
+
-                        <Link :href="show(project.id)">
+                    <Button as-child variant="outline">
-                            <ArrowLeft aria-hidden="true" />
+                        <Link :href="show(project.id)">Back to project</Link>
-                            {{ t('backlog.backToProject') }}
-                        </Link>
                     </Button>
                 </div>
-            </header>
+            </div>
 
-            <FeedbackState v-if="status" state="success" :title="status" />
+            <div
-
+                v-if="status"
-            <section
+                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
-                aria-labelledby="backlog-filter-title"
-                class="bg-card gap-card p-card grid min-w-0 rounded-md border"
             >
-                <div
+                {{ status }}
-                    class="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"
+            </div>
-                >
-                    <div class="grid min-w-0 gap-1">
-                        <h2 id="backlog-filter-title" class="text-title">
-                            {{ t('backlog.filters.title') }}
-                        </h2>
-                        <p class="text-caption text-muted-foreground">
-                            {{ t('backlog.filters.description') }}
-                        </p>
-                    </div>
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        :disabled="!hasActiveFilters"
-                        @click="clearFilters"
-                    >
-                        <RotateCcw aria-hidden="true" />
-                        {{ t('backlog.filters.clear') }}
-                    </Button>
-                </div>
 
-                <div
+            <Card class="gap-0 overflow-hidden">
-                    class="grid min-w-0 gap-3 sm:grid-cols-2 xl:grid-cols-[minmax(14rem,2fr)_repeat(4,minmax(9rem,1fr))]"
+                <CardHeader class="border-b">
-                >
+                    <CardTitle>Backlog tickets</CardTitle>
+                    <CardDescription>
+                        Tickets remain here while their status belongs to
+                        backlog.
+                    </CardDescription>
+                </CardHeader>
+
+                <CardContent class="p-0">
                     <div
-                        class="grid min-w-0 gap-1.5 sm:col-span-2 xl:col-span-1"
+                        v-if="tickets.length === 0"
+                        class="text-muted-foreground p-6 text-sm"
                     >
-                        <label
+                        No backlog tickets exist yet.
-                            for="backlog-query"
-                            class="text-caption font-semibold"
-                        >
-                            {{ t('backlog.filters.search') }}
-                        </label>
-                        <div class="relative min-w-0">
-                            <Search
-                                class="text-muted-foreground pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2"
-                                aria-hidden="true"
-                            />
-                            <input
-                                id="backlog-query"
-                                v-model="filters.query"
-                                type="search"
-                                class="border-input bg-card text-body min-h-control focus-visible:ring-ring/35 w-full min-w-0 rounded-md border py-2 pl-9 pr-3 focus-visible:outline-none focus-visible:ring-2"
-                                :placeholder="
-                                    t('backlog.filters.searchPlaceholder')
-                                "
-                            />
-                        </div>
                     </div>
 
-                    <div class="grid min-w-0 gap-1.5">
+                    <ul v-else class="gap-column grid p-4">
-                        <label
+                        <TicketListItem
-                            for="backlog-type"
+                            v-for="ticket in tickets"
-                            class="text-caption font-semibold"
+                            :key="ticket.id"
+                            :project-id="project.id"
+                            :ticket="ticket"
                         >
-                            {{ t('backlog.filters.type') }}
+                            <template v-if="canEditTickets" #actions>
-                        </label>
+                                <Form
-                        <select
+                                    v-bind="
-                            id="backlog-type"
+                                        ProjectBoardController.move.form({
-                            v-model="filters.typeId"
+                                            project: project.id,
-                            class="border-input bg-card text-body min-h-control focus-visible:ring-ring/35 w-full min-w-0 rounded-md border px-3 py-2 focus-visible:outline-none focus-visible:ring-2"
+                                            ticket: ticket.id,
-                        >
+                                        })
-                            <option value="">
+                                    "
-                                {{ t('backlog.filters.allTypes') }}
+                                    class="flex w-full flex-col gap-2"
-                            </option>
+                                    v-slot="{ processing }"
-                            <option
+                                >
-                                v-for="ticketType in ticketTypes"
+                                    <input
-                                :key="ticketType.id"
+                                        type="hidden"
-                                :value="ticketType.id"
+                                        name="redirect_to"
-                            >
+                                        value="backlog"
-                                {{ ticketType.name }}
+                                    />
-                            </option>
+                                    <label
-                        </select>
+                                        :for="`backlog-ticket-status-${ticket.id}`"
-                    </div>
+                                        class="text-label text-muted-foreground uppercase"
-
+                                    >
-                    <div class="grid min-w-0 gap-1.5">
+                                        Move to status
-                        <label
+                                    </label>
-                            for="backlog-priority"
+                                    <div
-                            class="text-caption font-semibold"
+                                        class="flex flex-col gap-2 sm:flex-row"
-                        >
+                                    >
-                            {{ t('backlog.filters.priority') }}
+                                        <select
-                        </label>
+                                            :id="`backlog-ticket-status-${ticket.id}`"
-                        <select
+                                            name="ticket_status_id"
-                            id="backlog-priority"
+                                            :disabled="
-                            v-model="filters.priorityId"
+                                                allowedTargetStatuses(ticket)
-                            class="border-input bg-card text-body min-h-control focus-visible:ring-ring/35 w-full min-w-0 rounded-md border px-3 py-2 focus-visible:outline-none focus-visible:ring-2"
+                                                    .length === 0 || processing
-                        >
+                                            "
-                            <option value="">
+                                            class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 min-h-control min-w-0 flex-1 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
-                                {{ t('backlog.filters.allPriorities') }}
+                                        >
-                            </option>
+                                            <option
-                            <option
+                                                v-if="
-                                v-for="priority in ticketPriorities"
+                                                    allowedTargetStatuses(
-                                :key="priority.id"
+                                                        ticket,
-                                :value="priority.id"
+                                                    ).length === 0
-                            >
+                                                "
-                                {{ priority.name }}
+                                                value=""
-                            </option>
+                                            >
-                        </select>
+                                                No allowed moves
-                    </div>
+                                            </option>
-
+                                            <option
-                    <div class="grid min-w-0 gap-1.5">
+                                                v-for="ticketStatus in allowedTargetStatuses(
-                        <label
+                                                    ticket,
-                            for="backlog-status"
+                                                )"
-                            class="text-caption font-semibold"
+                                                :key="ticketStatus.id"
-                        >
+                                                :value="ticketStatus.id"
-                            {{ t('backlog.filters.status') }}
+                                            >
-                        </label>
+                                                {{
-                        <select
+                                                    ticketStatusLabel(
-                            id="backlog-status"
+                                                        ticketStatus,
-                            v-model="filters.statusId"
+                                                        'Unknown status',
-                            class="border-input bg-card text-body min-h-control focus-visible:ring-ring/35 w-full min-w-0 rounded-md border px-3 py-2 focus-visible:outline-none focus-visible:ring-2"
+                                                    )
-                        >
+                                                }}
-                            <option value="">
+                                            </option>
-                                {{ t('backlog.filters.allStatuses') }}
+                                        </select>
-                            </option>
+                                        <Button
-                            <option
+                                            type="submit"
-                                v-for="ticketStatus in backlogTicketStatuses"
+                                            size="sm"
-                                :key="ticketStatus.id"
+                                            :disabled="
-                                :value="ticketStatus.id"
+                                                processing ||
-                            >
+                                                allowedTargetStatuses(ticket)
-                                {{ ticketStatus.name }}
+                                                    .length === 0
-                            </option>
+                                            "
-                        </select>
+                                        >
-                    </div>
+                                            Move
-
+                                        </Button>
-                    <div class="grid min-w-0 gap-1.5">
+                                    </div>
-                        <label
+                                    <p
-                            for="backlog-assignee"
+                                        v-if="
-                            class="text-caption font-semibold"
+                                            allowedTargetStatuses(ticket)
-                        >
+                                                .length === 0
-                            {{ t('backlog.filters.assignee') }}
+                                        "
-                        </label>
+                                        class="text-caption text-muted-foreground"
-                        <select
+                                    >
-                            id="backlog-assignee"
+                                        This status does not allow moving
-                            v-model="filters.assigneeId"
+                                        anywhere else.
-                            class="border-input bg-card text-body min-h-control focus-visible:ring-ring/35 w-full min-w-0 rounded-md border px-3 py-2 focus-visible:outline-none focus-visible:ring-2"
+                                    </p>
-                        >
+                                </Form>
-                            <option value="">
+                            </template>
-                                {{ t('backlog.filters.allAssignees') }}
+                        </TicketListItem>
-                            </option>
+                    </ul>
-                            <option value="unassigned">
+                </CardContent>
-                                {{ t('tickets.unassigned') }}
+            </Card>
-                            </option>
-                            <option
-                                v-for="user in users"
-                                :key="user.id"
-                                :value="user.id"
-                            >
-                                {{ user.name }}
-                            </option>
-                        </select>
-                    </div>
-                </div>
-            </section>
-
-            <div
-                v-if="tickets.length === 0"
-                class="grid justify-items-start gap-3"
-            >
-                <FeedbackState
-                    state="empty"
-                    :title="t('backlog.empty.title')"
-                    :description="t('backlog.empty.description')"
-                />
-                <Button v-if="canCreateTickets" as-child size="sm">
-                    <Link
-                        :href="
-                            createTicket(
-                                { project: project.id },
-                                { query: { source: 'backlog' } },
-                            )
-                        "
-                    >
-                        <Plus aria-hidden="true" />
-                        {{ t('backlog.empty.action') }}
-                    </Link>
-                </Button>
-            </div>
-
-            <div
-                v-else-if="visibleTicketCount === 0"
-                class="grid justify-items-start gap-3"
-            >
-                <FeedbackState
-                    state="empty"
-                    :title="t('backlog.filters.empty.title')"
-                    :description="t('backlog.filters.empty.description')"
-                />
-                <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    @click="clearFilters"
-                >
-                    <RotateCcw aria-hidden="true" />
-                    {{ t('backlog.filters.clear') }}
-                </Button>
-            </div>
-
-            <section
-                v-else
-                aria-labelledby="backlog-results-title"
-                class="grid min-w-0 gap-3"
-            >
-                <div
-                    class="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
-                >
-                    <div class="grid min-w-0 gap-1">
-                        <h2 id="backlog-results-title" class="text-title">
-                            {{ t('backlog.results.title') }}
-                        </h2>
-                        <p class="text-caption text-muted-foreground">
-                            {{
-                                t('backlog.results.count', {
-                                    count: visibleTicketCount,
-                                    total: tickets.length,
-                                })
-                            }}
-                        </p>
-                    </div>
-                    <Button
-                        v-if="expandableTicketIds.length > 0"
-                        type="button"
-                        variant="outline"
-                        size="sm"
-                        @click="toggleAllBranches"
-                    >
-                        <ChevronsUpDown
-                            v-if="allVisibleBranchesCollapsed"
-                            aria-hidden="true"
-                        />
-                        <ChevronsDownUp v-else aria-hidden="true" />
-                        {{
-                            t(
-                                allVisibleBranchesCollapsed
-                                    ? 'backlog.tree.expandAll'
-                                    : 'backlog.tree.collapseAll',
-                            )
-                        }}
-                    </Button>
-                </div>
-
-                <BacklogTicketTree
-                    :nodes="filteredTicketTree"
-                    :project-id="project.id"
-                    :can-edit-tickets="canEditTickets"
-                    :collapsed-ticket-ids="collapsedTicketIds"
-                    :pending-ticket-id="pendingTicketId"
-                    @toggle="toggleTicket"
-                    @move-start="pendingTicketId = $event"
-                    @move-finish="finishMove"
-                />
-            </section>
         </div>
     </AppLayout>
 </template>

resources/js/pages/projects/Ticket.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Head } from '@inertiajs/vue3';
-import { computed, useTemplateRef } from 'vue';
+import { computed } from 'vue';
+import TicketDetailBlocker from '@/components/tickets/detail/TicketDetailBlocker.vue';
 import TicketDetailContent from '@/components/tickets/detail/TicketDetailContent.vue';
 import TicketDetailGit from '@/components/tickets/detail/TicketDetailGit.vue';
 import TicketDetailHeader from '@/components/tickets/detail/TicketDetailHeader.vue';
@@ -14,7 +15,6 @@ import { show as showTicket } from '@/routes/projects/tickets';
 import type { BreadcrumbItem, ProjectTicketPageProps } from '@/types';
 const props = defineProps<ProjectTicketPageProps>();
 const { t } = useLocalization();
-const ticketContent = useTemplateRef('ticketContent');
 const breadcrumbs = computed<BreadcrumbItem[]>(() => [
     { title: t('navigation.projects'), href: projectIndex() },
     { title: props.project.name, href: show(props.project.id) },
@@ -50,7 +50,6 @@ const breadcrumbs = computed<BreadcrumbItem[]>(() => [
                 class="grid min-w-0 items-start gap-6 xl:grid-cols-[minmax(0,1fr)_20rem]"
             >
                 <TicketDetailContent
-                    ref="ticketContent"
                     :ticket="ticket"
                     :project="project"
                     :can-edit-ticket="canEditTicket"
@@ -64,7 +63,7 @@ const breadcrumbs = computed<BreadcrumbItem[]>(() => [
                 />
                 <aside
                     :aria-label="t('ticketDetail.metadata')"
-                    class="min-w-0 xl:col-start-2 xl:row-span-4 xl:row-start-1"
+                    class="min-w-0 xl:col-start-2 xl:row-span-5 xl:row-start-1"
                 >
                     <TicketDetailMetadata
                         :ticket="ticket"
@@ -73,6 +72,12 @@ const breadcrumbs = computed<BreadcrumbItem[]>(() => [
                         :ticket-field-definitions="ticketFieldDefinitions"
                     />
                 </aside>
+                <TicketDetailBlocker
+                    :ticket="ticket"
+                    :project="project"
+                    :can-edit-ticket="canEditTicket"
+                    class="xl:col-start-1"
+                />
                 <TicketDetailRelationships
                     :ticket="ticket"
                     :project="project"
@@ -82,7 +87,6 @@ const breadcrumbs = computed<BreadcrumbItem[]>(() => [
                     :linked-tickets="linkedTickets"
                     :ticket-link-types="ticketLinkTypes"
                     :ticket-link-options="ticketLinkOptions"
-                    @edit-parent="ticketContent?.editParent()"
                     class="xl:col-start-1"
                 />
                 <TicketDetailHistory :ticket="ticket" class="xl:col-start-1" />

resources/js/pages/projects/TicketCreate.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { Head, Link, useForm } from '@inertiajs/vue3';
+import { Head, Link, useForm, useRemember } from '@inertiajs/vue3';
-import { useSessionStorage } from '@vueuse/core';
+import { computed, toRef, unref } from 'vue';
-import { computed } from 'vue';
 import ProjectTicketController from '@/actions/App/Http/Controllers/ProjectTicketController';
+import TicketFormField from '@/components/tickets/TicketFormField.vue';
 import TicketFormFields from '@/components/tickets/TicketFormFields.vue';
 import { useLocalization } from '@/composables/useLocalization';
 import FormFeedback from '@/components/FormFeedback.vue';
@@ -17,8 +17,10 @@ import {
     CardTitle,
 } from '@/components/ui/card';
 import AppLayout from '@/layouts/AppLayout.vue';
-import AcceptanceCriteriaChecklist from '@/components/tickets/AcceptanceCriteriaChecklist.vue';
+import {
-import type { AcceptanceCriteriaModel } from '@/types/models/acceptance-criteria-model';
+    buildAcceptanceCriteria,
+    parseChecklistLines,
+} from '@/lib/acceptance-criteria';
 import { index as backlogIndex } from '@/routes/projects/backlog';
 import { index as boardIndex } from '@/routes/projects/board';
 import { index, show } from '@/routes/projects/index';
@@ -69,9 +71,19 @@ const hasTicketMetadata = computed(
 );
 
 const draftKey = `projects:${props.project.id}:tickets:create`;
-const draftGeneration = useSessionStorage(`${draftKey}:generation`, 0);
+const acceptanceCriteriaDraft = useRemember(
-const form = useForm(`${draftKey}:${draftGeneration.value}`, {
+    { checklist: '' },
-    acceptance_criteria: [] as AcceptanceCriteriaModel,
+    `${draftKey}:checklist`,
+);
+const acceptanceCriteriaChecklist = toRef(
+    unref(acceptanceCriteriaDraft),
+    'checklist',
+);
+
+const form = useForm(draftKey, {
+    acceptance_criteria: buildAcceptanceCriteria(
+        acceptanceCriteriaChecklist.value,
+    ),
     assignee_user_id: '',
     description: '',
     parent_ticket_id: '',
@@ -84,17 +96,24 @@ const form = useForm(`${draftKey}:${draftGeneration.value}`, {
     title: '',
 });
 
-const isDirty = computed(() => form.isDirty);
+const isDirty = computed(
-const protection = useFormProtection(form);
+    () => form.isDirty || acceptanceCriteriaChecklist.value !== '',
+);
+const protection = useFormProtection(form, { isDirty: () => isDirty.value });
 const reset = (): void => {
     if (form.processing || !protection.confirmLeave()) {
         return;
     }
     form.reset();
     form.clearErrors();
+    acceptanceCriteriaChecklist.value = '';
     protection.clearFeedback();
 };
 
+const acceptanceCriteriaPreviewItems = computed(() =>
+    parseChecklistLines(acceptanceCriteriaChecklist.value),
+);
+
 const acceptanceCriteriaError = computed(() => {
     return (
         form.errors.acceptance_criteria ??
@@ -109,19 +128,17 @@ const submit = (): void => {
     if (!hasTicketMetadata.value || form.processing) {
         return;
     }
+    form.acceptance_criteria = buildAcceptanceCriteria(
+        acceptanceCriteriaChecklist.value,
+    );
 
     protection.submit(
         ProjectTicketController.store({ project: props.project.id }),
         {
             preserveScroll: true,
             onSuccess: () => {
-                // The source page is unmounted before this callback, so its storage watcher has stopped.
-                window.sessionStorage.setItem(
-                    `${draftKey}:generation`,
-                    String(draftGeneration.value + 1),
-                );
-                draftGeneration.value++;
                 form.reset();
+                acceptanceCriteriaChecklist.value = '';
             },
         },
     );
@@ -207,11 +224,46 @@ const submit = (): void => {
                             autofocus
                         >
                             <template #content>
-                                <AcceptanceCriteriaChecklist
+                                <TicketFormField
-                                    v-model="form.acceptance_criteria"
+                                    id="acceptance_criteria_checklist"
-                                    :disabled="form.processing"
+                                    v-model="acceptanceCriteriaChecklist"
+                                    kind="textarea"
+                                    :label="t('ticketDetail.checklistEditor')"
+                                    :hint="t('ticketForm.checklistHelp')"
+                                    :placeholder="
+                                        t('ticketDetail.checklistPlaceholder')
+                                    "
                                     :error="acceptanceCriteriaError"
+                                    :disabled="form.processing"
                                 />
+                                <div
+                                    v-if="acceptanceCriteriaPreviewItems.length"
+                                    class="bg-muted/30 min-w-0 rounded-xl border p-4 text-sm"
+                                >
+                                    <p class="mb-3 font-medium">
+                                        {{ t('ticketForm.checklistPreview') }}
+                                    </p>
+                                    <ul class="space-y-2">
+                                        <li
+                                            v-for="(
+                                                item, index
+                                            ) in acceptanceCriteriaPreviewItems"
+                                            :key="index"
+                                            :style="{
+                                                marginInlineStart: `${item.indent * 0.75}rem`,
+                                            }"
+                                            class="flex min-w-0 items-start gap-2"
+                                        >
+                                            <span aria-hidden="true">{{
+                                                item.checked ? '☑' : '☐'
+                                            }}</span>
+                                            <span
+                                                class="wrap-anywhere min-w-0"
+                                                >{{ item.text }}</span
+                                            >
+                                        </li>
+                                    </ul>
+                                </div>
                             </template>
                         </TicketFormFields>
                         <div

resources/js/types/backlog.ts

@@ -1,31 +0,0 @@
-import type { TicketModel } from '@/types/models/ticket-model';
-
-export type BacklogAssigneeFilter = '' | 'unassigned' | number;
-
-export type BacklogFilterState = {
-    assigneeId: BacklogAssigneeFilter;
-    priorityId: '' | number;
-    query: string;
-    statusId: '' | number;
-    typeId: '' | number;
-};
-
-export type BacklogTicketTreeNode = {
-    children: BacklogTicketTreeNode[];
-    matchesFilters: boolean;
-    ticket: TicketModel;
-};
-
-export type BacklogTicketTreeProps = {
-    canEditTickets: boolean;
-    collapsedTicketIds: Set<number>;
-    nodes: BacklogTicketTreeNode[];
-    pendingTicketId: number | null;
-    projectId: number;
-};
-
-export type BacklogTicketTreeEmits = {
-    moveFinish: [ticketId: number];
-    moveStart: [ticketId: number];
-    toggle: [ticketId: number];
-};

resources/js/types/index.ts

@@ -1,6 +1,4 @@
 export * from './auth';
-export * from './backlog';
 export * from './navigation';
 export * from './page-props';
-export * from './ticket-tree';
 export * from './ui';

resources/js/types/ticket-detail.ts

@@ -15,6 +15,10 @@ export type TicketDetailContentProps = Pick<
     | 'ticketTypes'
     | 'users'
 >;
+export type TicketDetailBlockerProps = Pick<
+    ProjectTicketPageProps,
+    'ticket' | 'project' | 'canEditTicket'
+>;
 export type TicketDetailMetadataProps = Pick<
     ProjectTicketPageProps,
     'ticket' | 'project' | 'canManageProject' | 'ticketFieldDefinitions'

resources/js/types/ticket-presentation.ts

@@ -1,7 +1,6 @@
 import type { TicketModel } from '@/types/models/ticket-model';
 
 export type TicketPresentationProps = {
-    layout?: 'card' | 'list';
     projectId: number;
     showDescription?: boolean;
     showStatus?: boolean;

resources/js/types/ticket-tree.ts

@@ -1,6 +0,0 @@
-import type { TicketTreeNodeModel } from '@/types/models/ticket-tree-node-model';
-
-export type TicketTreeListProps = {
-    nodes: TicketTreeNodeModel[];
-    projectId: number;
-};

tests/Feature/AcceptanceCriteriaChecklistTest.php

@@ -1,19 +0,0 @@
-<?php
-
-namespace Tests\Feature;
-
-use Symfony\Component\Process\Process;
-use Tests\TestCase;
-
-class AcceptanceCriteriaChecklistTest extends TestCase
-{
-    public function test_checklist_preserves_hierarchy_identity_and_accessible_controls(): void
-    {
-        $process = new Process(['node', 'tests/Fixtures/acceptance-criteria.mjs'], base_path());
-        $process->setTimeout(60);
-        $process->run();
-
-        $this->assertTrue($process->isSuccessful(), $process->getOutput().$process->getErrorOutput());
-        $this->assertStringContainsString('Acceptance criteria behavior checks passed.', $process->getOutput());
-    }
-}

tests/Feature/Projects/ProjectBacklogTest.php

@@ -71,110 +71,6 @@ class ProjectBacklogTest extends TestCase
             );
     }
 
-    /**
-     * Ensure the backlog payload supports nested tickets and their allowed status moves.
-     */
-    public function test_backlog_includes_nested_tickets_and_allowed_status_moves(): void
-    {
-        $editor = User::factory()->create();
-        $project = Project::factory()->create([
-            'key' => 'TREE',
-        ]);
-
-        app(InitializeProjectTicketMetadata::class)->handle($project);
-
-        $backlogStatus = $project->ticketStatuses()
-            ->whereNull('board_column_id')
-            ->firstOrFail();
-        $boardColumn = BoardColumn::factory()->for($project)->create([
-            'name' => 'Todo',
-            'position' => 1,
-        ]);
-        $boardStatus = TicketStatus::factory()
-            ->for($project)
-            ->for($boardColumn)
-            ->create([
-                'name' => 'Ready',
-                'position' => 1,
-            ]);
-        $backlogStatus->allowedTargetStatuses()->sync([$boardStatus->id]);
-
-        $parentType = $project->ticketTypes()
-            ->where('is_parent', true)
-            ->firstOrFail();
-        $taskType = $project->ticketTypes()
-            ->where('is_parent', false)
-            ->firstOrFail();
-        $priority = $project->ticketPriorities()->firstOrFail();
-
-        $parentTicket = Ticket::factory()->create([
-            'project_id' => $project->id,
-            'sequence_number' => 1,
-            'ticket_key' => 'TREE-1',
-            'ticket_priority_id' => $priority->id,
-            'ticket_status_id' => $backlogStatus->id,
-            'ticket_type_id' => $parentType->id,
-            'title' => 'Parent ticket',
-        ]);
-        $childTicket = Ticket::factory()->create([
-            'parent_ticket_id' => $parentTicket->id,
-            'project_id' => $project->id,
-            'sequence_number' => 2,
-            'ticket_key' => 'TREE-2',
-            'ticket_priority_id' => $priority->id,
-            'ticket_status_id' => $backlogStatus->id,
-            'ticket_type_id' => $taskType->id,
-            'title' => 'Child ticket',
-        ]);
-
-        $this->syncProjectPermissions($project, $editor, ['edit', 'view']);
-
-        $this->actingAs($editor)
-            ->get(route('projects.backlog.index', $project))
-            ->assertOk()
-            ->assertInertia(fn (Assert $page) => $page
-                ->component('projects/Backlog')
-                ->where('canEditTickets', true)
-                ->has('tickets', 2)
-                ->where('tickets.0.id', $childTicket->id)
-                ->where('tickets.0.parent_ticket_id', $parentTicket->id)
-                ->where('tickets.0.ticket_status.allowed_target_statuses.0.id', $boardStatus->id)
-                ->where('tickets.1.id', $parentTicket->id)
-                ->where('tickets.1.parent_ticket_id', null)
-                ->where('tickets.1.ticket_status.allowed_target_statuses.0.id', $boardStatus->id),
-            );
-
-        $this->assertDatabaseHas('tickets', [
-            'id' => $parentTicket->id,
-            'ticket_status_id' => $backlogStatus->id,
-        ]);
-        $this->assertDatabaseHas('tickets', [
-            'id' => $childTicket->id,
-            'parent_ticket_id' => $parentTicket->id,
-            'ticket_status_id' => $backlogStatus->id,
-        ]);
-    }
-
-    /**
-     * Ensure projects without backlog tickets receive an empty collection.
-     */
-    public function test_projects_without_backlog_tickets_receive_an_empty_collection(): void
-    {
-        $viewer = User::factory()->create();
-        $project = Project::factory()->create();
-
-        app(InitializeProjectTicketMetadata::class)->handle($project);
-        $this->syncProjectPermissions($project, $viewer, ['view']);
-
-        $this->actingAs($viewer)
-            ->get(route('projects.backlog.index', $project))
-            ->assertOk()
-            ->assertInertia(fn (Assert $page) => $page
-                ->component('projects/Backlog')
-                ->where('tickets', []),
-            );
-    }
-
     /**
      * Ensure creating tickets requires the project write permission.
      */

tests/Fixtures/acceptance-criteria-browser.mjs

@@ -1,182 +0,0 @@
-import assert from 'node:assert/strict';
-import process from 'node:process';
-const { chromium } = await import(
-    process.env.PLAYWRIGHT_MODULE ?? 'playwright'
-);
-const browser = await chromium.launch({ channel: 'chrome', headless: true });
-const base = 'http://127.0.0.1:4176';
-const context = await browser.newContext({
-    viewport: { width: 1280, height: 900 },
-    hasTouch: true,
-});
-const page = await context.newPage();
-page.setDefaultTimeout(10000);
-page.on('dialog', (dialog) => dialog.accept());
-const errors = [];
-page.on('pageerror', (error) => errors.push(error.message));
-const checklist = () =>
-    page
-        .locator('form')
-        .first()
-        .getByRole('region', { name: 'Acceptance criteria' });
-const savedChecklist = () => page.locator('#ticket-checklist');
-const field = (number) =>
-    page.getByRole('textbox', { name: `Criterion ${number}`, exact: true });
-const button = (name) => page.getByRole('button', { name, exact: true });
-const setResult = (value) =>
-    context.addCookies([{ name: 'feedback_test_result', value, url: base }]);
-const waitState = (value) =>
-    page.locator(`[data-form-state="${value}"]`).first().waitFor();
-const save = async () => {
-    await button('Save changes').click();
-    await waitState('success');
-};
-try {
-    await page.goto(`${base}/projects/7/tickets/31`);
-    await savedChecklist().waitFor();
-    const boxes = savedChecklist().getByRole('checkbox');
-    await setResult('server');
-    await boxes.first().focus();
-    await page.keyboard.press('Space');
-    await page
-        .getByText('Checklist status could not be saved. Please try again.')
-        .waitFor();
-    assert.equal(
-        await boxes.first().isChecked(),
-        false,
-        'Failure must restore saved checkbox',
-    );
-    await setResult('success');
-    let payload;
-    page.on('request', (request) => {
-        if (request.method() === 'PATCH') {
-            payload = request.postDataJSON();
-        }
-    });
-    await boxes.first().tap();
-    await page.waitForFunction(
-        () =>
-            document.querySelectorAll('section[aria-busy="true"]').length === 0,
-    );
-    await savedChecklist().getByText('3 of 4 complete').waitFor();
-    assert.deepEqual(
-        payload.acceptance_criteria.map((item) => item.checked),
-        [true, true, true, false],
-    );
-    assert.deepEqual(
-        payload.acceptance_criteria.map((item) => item.id),
-        [11, 12, 13, 14],
-    );
-    await page.locator('#ticket-edit > summary').click();
-    await field(2).fill('Edited child');
-    await field(2).press('Alt+ArrowLeft');
-    assert.deepEqual(
-        await checklist()
-            .locator('li')
-            .evaluateAll((items) =>
-                items.map((item) => Number(item.dataset.indent)),
-            ),
-        [0, 0, 1, 0],
-    );
-    await button('Indent criterion 2').tap();
-    await button('Remove criterion 1').tap();
-    assert.equal(await field(1).inputValue(), 'Edited child');
-    assert.equal(
-        await field(1).evaluate((el) => el === document.activeElement),
-        true,
-    );
-    await button('Add criterion').focus();
-    await page.keyboard.press('Enter');
-    assert.equal(
-        await field(4).evaluate((el) => el === document.activeElement),
-        true,
-    );
-    await field(4).fill('New criterion');
-    await button('Indent criterion 4').click();
-    await setResult('validation');
-    await button('Save changes').click();
-    await waitState('validation');
-    assert.equal(await field(1).inputValue(), 'Edited child');
-    await setResult('success');
-    await save();
-    assert.deepEqual(
-        payload.acceptance_criteria.map((item) => item.id),
-        [12, 13, 14, undefined],
-    );
-    assert.deepEqual(
-        payload.acceptance_criteria.map((item) => item.indent),
-        [0, 1, 0, 1],
-    );
-    await page.reload();
-    await page.locator('#ticket-edit > summary').click();
-    assert.equal(await field(1).inputValue(), 'Edited child');
-    assert.equal(await field(4).inputValue(), 'New criterion');
-    // Blank/whitespace text cannot silently delete a persisted criterion.
-    await field(1).fill('   ');
-    assert.equal(await field(1).evaluate((el) => el.checkValidity()), false);
-    const beforeInvalidSave = payload;
-    await button('Save changes').click();
-    assert.equal(payload, beforeInvalidSave);
-    await button('Discard changes').click();
-    assert.equal(await field(1).inputValue(), 'Edited child');
-    assert.equal(await field(1).evaluate((el) => el.checkValidity()), true);
-    for (const width of [1280, 390, 320]) {
-        await page.setViewportSize({ width, height: 900 });
-        for (const theme of ['light', 'dark']) {
-            await page.emulateMedia({ colorScheme: theme });
-            await page.evaluate(
-                (theme) =>
-                    document.documentElement.classList.toggle(
-                        'dark',
-                        theme === 'dark',
-                    ),
-                theme,
-            );
-            assert.equal(
-                await checklist().evaluate(
-                    (el) => el.scrollWidth <= el.clientWidth,
-                ),
-                true,
-            );
-            await checklist().screenshot({
-                path: `/private/tmp/kan32-checklist-${width}-${theme}.png`,
-            });
-            await button('Outdent criterion 4').tap();
-            await button('Indent criterion 4').tap();
-        }
-    }
-    await page.goto(`${base}/projects/7/tickets/31?readonly=1`);
-    await savedChecklist().waitFor();
-    assert.equal(await savedChecklist().getByRole('textbox').count(), 0);
-    assert.equal(await savedChecklist().getByRole('button').count(), 0);
-    assert.equal(
-        await savedChecklist().getByRole('checkbox').first().isDisabled(),
-        true,
-    );
-    await page.goto(`${base}/projects/7/tickets/create`);
-    await page.locator('#title').fill('Created with criteria');
-    for (const text of ['First', 'Second']) {
-        await button('Add criterion').click();
-        await page.locator('textarea').last().fill(text);
-    }
-    await button('Indent criterion 2').tap();
-    await checklist().getByRole('checkbox').first().focus();
-    await page.keyboard.press('Space');
-    const request = page.waitForRequest(
-        (request) =>
-            request.method() === 'POST' && request.url().endsWith('/tickets'),
-    );
-    await button('Create ticket').click();
-    const created = (await request).postDataJSON();
-    assert.deepEqual(created.acceptance_criteria, [
-        { text: 'First', checked: true, indent: 0 },
-        { text: 'Second', checked: true, indent: 1 },
-    ]);
-    await page.getByRole('heading', { name: 'Destination' }).waitFor();
-    assert.deepEqual(errors, []);
-    console.log(
-        'Acceptance criteria browser checks passed: persistence, errors, keyboard, touch, readonly, creation, mobile and themes.',
-    );
-} finally {
-    await browser.close();
-}

tests/Fixtures/acceptance-criteria.mjs

@@ -1,103 +0,0 @@
-import assert from 'node:assert/strict';
-import { fileURLToPath } from 'node:url';
-import vue from '@vitejs/plugin-vue';
-import { createServer } from 'vite';
-import { createSSRApp, h } from 'vue';
-import { renderToString } from 'vue/server-renderer';
-
-const server = await createServer({
-    configFile: false,
-    cacheDir: 'node_modules/.vite/acceptance-criteria-fixture',
-    plugins: [vue()],
-    resolve: {
-        alias: {
-            '@': fileURLToPath(new URL('../../resources/js', import.meta.url)),
-        },
-    },
-    server: { middlewareMode: true, hmr: false, watch: null },
-});
-try {
-    const {
-        canIndentAcceptanceCriterion: canIndent,
-        indentAcceptanceCriterion: indent,
-        removeAcceptanceCriterion: remove,
-        syncAcceptanceCriteriaDescendantCheckedState: toggle,
-        normalizeAcceptanceCriteria: normalize,
-    } = await server.ssrLoadModule('/resources/js/lib/acceptance-criteria.ts');
-    const items = [
-        { id: 11, text: 'Parent', indent: 0, checked: false },
-        { id: 12, text: 'Child', indent: 1, checked: true },
-        { id: 13, text: 'Grandchild', indent: 2, checked: false },
-        { id: 14, text: 'Next', indent: 0, checked: false },
-    ];
-    const original = structuredClone(items);
-    assert.equal(canIndent(items, 0), false);
-    assert.equal(canIndent(items, 1), false);
-    assert.equal(canIndent(items, 3), true);
-    assert.deepEqual(
-        indent(items, 1, -1).map((item) => item.indent),
-        [0, 0, 1, 0],
-    );
-    assert.deepEqual(indent(indent(items, 1, -1), 1, 1), items);
-    assert.deepEqual(indent(items, 0, -1), items);
-    assert.deepEqual(indent(items, -1, 1), items);
-    assert.deepEqual(remove(items, 0), [
-        { ...items[1], indent: 0 },
-        { ...items[2], indent: 1 },
-        items[3],
-    ]);
-    assert.deepEqual(remove(items, 1), [
-        items[0],
-        { ...items[2], indent: 1 },
-        items[3],
-    ]);
-    assert.deepEqual(remove(items, 99), items);
-    assert.deepEqual(
-        toggle(items, 0, true).map((item) => item.checked),
-        [true, true, true, false],
-    );
-    assert.deepEqual(
-        toggle(items, 1, false).map((item) => item.checked),
-        [false, false, false, false],
-    );
-    const deep = Array.from({ length: 9 }, (_, indent) => ({
-        text: 'Deep',
-        checked: false,
-        indent,
-    }));
-    assert.equal(
-        canIndent([{ text: 'Before', indent: 0, checked: false }, ...deep], 1),
-        false,
-    );
-    assert.deepEqual(
-        normalize(remove(items, 0)).map((item) => item.id),
-        [12, 13, 14],
-    );
-    assert.deepEqual(items, original, 'Editing must not mutate saved criteria');
-    const { default: Checklist } = await server.ssrLoadModule(
-        '/resources/js/components/tickets/AcceptanceCriteriaChecklist.vue',
-    );
-    const { createLocalization } = await server.ssrLoadModule(
-        '/resources/js/lib/localization.ts',
-    );
-    const render = (props) =>
-        renderToString(
-            createSSRApp({ render: () => h(Checklist, props) }).use(
-                createLocalization(),
-            ),
-        );
-    const editable = await render({ modelValue: items });
-    assert.equal((editable.match(/<textarea/g) ?? []).length, 4);
-    assert.match(editable, /Indent criterion 4/);
-    assert.match(editable, /1 of 4 complete/);
-    const readonly = await render({ modelValue: items, readonly: true });
-    assert.doesNotMatch(readonly, /<textarea|Add criterion|Edit checklist/);
-    assert.equal((readonly.match(/type="checkbox" disabled/g) ?? []).length, 4);
-    assert.match(
-        await render({ modelValue: [], error: 'Server validation' }),
-        /Server validation/,
-    );
-    console.log('Acceptance criteria behavior checks passed.');
-} finally {
-    await server.close();
-}

tests/Fixtures/feedback-browser.mjs

@@ -320,18 +320,15 @@ try {
     await page.goto(`${base}/projects/7/tickets/create`);
     await page.locator('#title').fill('New ticket draft');
     await page.locator('#description').fill('Keep this description');
-    await page.getByRole('button', { name: 'Add criterion' }).click();
     await page
-        .getByRole('textbox', { name: 'Criterion 1', exact: true })
+        .locator('#acceptance_criteria_checklist')
-        .fill('Keep this checklist');
+        .fill('[ ] Keep this checklist');
     await setResult('validation');
     await page.locator('form button[type="submit"]').first().click();
     await state('validation');
     assert.equal(
-        await page
+        await page.locator('#acceptance_criteria_checklist').inputValue(),
-            .getByRole('textbox', { name: 'Criterion 1', exact: true })
+        '[ ] Keep this checklist',
-            .inputValue(),
-        'Keep this checklist',
     );
     await page.route('**/projects/7/tickets', (route) => route.abort('failed'));
     await page.locator('form button[type="submit"]').first().click();
@@ -352,10 +349,8 @@ try {
     await page.locator('#title').waitFor();
     assert.equal(await page.locator('#title').inputValue(), 'New ticket draft');
     assert.equal(
-        await page
+        await page.locator('#acceptance_criteria_checklist').inputValue(),
-            .getByRole('textbox', { name: 'Criterion 1', exact: true })
+        '[ ] Keep this checklist',
-            .inputValue(),
-        'Keep this checklist',
     );
     await setResult('success');
     await page.locator('form button[type="submit"]').first().click();
@@ -364,10 +359,9 @@ try {
     await page.goto(`${base}/projects/7/tickets/31`);
     await page.locator('#ticket-edit > summary').click();
     await page.locator('#title').fill('Updated ticket draft');
-    await page.getByRole('button', { name: 'Add criterion' }).click();
     await page
-        .getByRole('textbox', { name: 'Criterion 1', exact: true })
+        .locator('#acceptance_criteria_checklist')
-        .fill('Edited checklist');
+        .fill('[ ] Edited checklist');
     await setResult('server');
     await page.locator('form button[type="submit"]').first().click();
     await state('server');
@@ -376,10 +370,8 @@ try {
         'Updated ticket draft',
     );
     assert.equal(
-        await page
+        await page.locator('#acceptance_criteria_checklist').inputValue(),
-            .getByRole('textbox', { name: 'Criterion 1', exact: true })
+        '[ ] Edited checklist',
-            .inputValue(),
-        'Edited checklist',
     );
     await setResult('success');
     await page.getByRole('button', { name: 'Try again' }).click();

tests/Fixtures/feedback-server.mjs

@@ -1,5 +1,4 @@
 import { fileURLToPath } from 'node:url';
-import process from 'node:process';
 import vue from '@vitejs/plugin-vue';
 import tailwind from '@tailwindcss/vite';
 import { createServer } from 'vite';
@@ -37,19 +36,7 @@ let ticket = {
     ticket_status: status,
     is_blocked: false,
     story_points: 0,
-    acceptance_criteria: process.env.CRITERIA_FIXTURE
+    acceptance_criteria: [],
-        ? [
-              { id: 11, text: 'Parent criterion', indent: 0, checked: false },
-              { id: 12, text: 'Nested criterion', indent: 1, checked: true },
-              { id: 13, text: 'Deep criterion', indent: 2, checked: false },
-              {
-                  id: 14,
-                  text: 'Independent criterion',
-                  indent: 0,
-                  checked: false,
-              },
-          ]
-        : [],
     field_values: [],
     worklog_entries: [],
     created_at: '2026-09-10T12:00:00Z',
@@ -138,7 +125,7 @@ server.middlewares.use(async (request, response, next) => {
             ticketStatusOptions: [status],
             users: [],
             parentTicketOptions: [],
-            canEditTicket: !url.searchParams.has('readonly'),
+            canEditTicket: true,
             canManageProject: true,
             childTicketTree: [],
             linkedTickets: [],

tests/Fixtures/ticket-detail-browser.mjs

@@ -101,34 +101,83 @@ try {
     }
     await page.setViewportSize({ width: 390, height: 1000 });
     await visit();
+    const blocker = content().locator('#ticket-blocker');
+    const blockerToggle = blocker.getByRole('checkbox', {
+        name: 'Mark ticket as blocked',
+        exact: true,
+    });
+    const blockerComment = blocker.getByLabel('Blocker comment', {
+        exact: true,
+    });
+    assert.equal(await blockerToggle.isChecked(), true);
+    assert.equal(
+        await blocker.getByText('Alex Morgan', { exact: true }).count(),
+        0,
+    );
+    assert.equal(
+        await content()
+            .locator('#ticket-history')
+            .getByText('Alex Morgan', { exact: true })
+            .count(),
+        1,
+    );
+    assert.equal(
+        await content()
+            .locator('#ticket-history')
+            .getByText('Status changed', { exact: true })
+            .count(),
+        1,
+    );
+    await blockerComment.fill('');
+    assert.equal(
+        await blockerComment.evaluate(
+            (element) => element.validity.valueMissing,
+        ),
+        true,
+    );
+    await blockerComment.fill('Waiting for a production decision.');
+    await blocker.getByRole('button', { name: 'Save blocker' }).click();
+    await page.getByText('Ticket updated.', { exact: true }).waitFor();
+    assert.equal(
+        await blockerComment.inputValue(),
+        'Waiting for a production decision.',
+    );
+    assert.equal(
+        await content()
+            .locator('#ticket-metadata')
+            .getByText('Alex Morgan', { exact: true })
+            .count(),
+        2,
+    );
+    await blockerToggle.uncheck();
+    await blocker.getByRole('button', { name: 'Unblock ticket' }).click();
+    await blocker
+        .getByText('This ticket currently has no active blocker.', {
+            exact: true,
+        })
+        .waitFor();
+    assert.equal(await blocker.getByLabel('Blocker comment').count(), 0);
+    await visit();
     await tabTo(edit());
     await page.keyboard.press('Enter');
     await page.getByLabel('Title', { exact: true }).fill('Unsaved title draft');
     await page
-        .locator('#ticket-checklist')
+        .getByRole('checkbox', { name: 'Cache requests safely', exact: true })
-        .getByRole('checkbox', {
+        .check();
-            name: 'Complete criterion 1: Cache requests safely',
-            exact: true,
-        })
-        .click();
     await page.waitForFunction(
-        () =>
+        () => document.querySelector('#acceptance-criteria-11').checked,
-            document.querySelectorAll(
-                '#ticket-checklist input[type=checkbox]',
-            )[1].checked,
     );
     assert.equal(
         await page.getByLabel('Title', { exact: true }).inputValue(),
         'Unsaved title draft',
     );
     await page
-        .getByLabel('Criterion 1', { exact: true })
+        .getByLabel('Acceptance criteria checklist', { exact: true })
-        .fill('A draft checklist item');
+        .fill('[ ] A draft checklist item');
     assert.equal(
         await page
-            .locator('#ticket-checklist')
             .getByRole('checkbox', {
-                name: 'Complete criterion 1: Cache requests safely',
+                name: 'Cache requests safely',
                 exact: true,
             })
             .isDisabled(),
@@ -163,8 +212,10 @@ try {
         'Unsaved title draft',
     );
     assert.equal(
-        await page.getByLabel('Criterion 1', { exact: true }).inputValue(),
+        await page
-        'A draft checklist item',
+            .getByLabel('Acceptance criteria checklist', { exact: true })
+            .inputValue(),
+        '[ ] A draft checklist item',
     );
     await visit('?reject');
     await edit().click();
@@ -202,21 +253,16 @@ try {
     await page.getByText('Ticket updated.', { exact: true }).waitFor();
     await visit('?rejectToggle');
     await page
-        .locator('#ticket-checklist')
+        .getByRole('checkbox', { name: 'Cache requests safely', exact: true })
-        .getByRole('checkbox', {
+        .check();
-            name: 'Complete criterion 1: Cache requests safely',
-            exact: true,
-        })
-        .click();
     await page
         .getByRole('alert')
         .filter({ hasText: 'Checklist status could not be saved' })
         .waitFor();
     assert.equal(
         await page
-            .locator('#ticket-checklist')
             .getByRole('checkbox', {
-                name: 'Complete criterion 1: Cache requests safely',
+                name: 'Cache requests safely',
                 exact: true,
             })
             .isChecked(),
@@ -251,20 +297,15 @@ try {
             response.url().includes('/tickets/42/links') &&
             response.request().method() === 'POST',
     );
-    await page.getByLabel('Linked ticket', { exact: true }).selectOption('41');
     await page.getByRole('button', { name: 'Save link', exact: true }).click();
     assert.equal((await linkSaved).status(), 303);
-    await page
+    await page.getByRole('button', { name: 'Remove', exact: true }).waitFor();
-        .getByRole('button', { name: 'Remove link to ENG-41', exact: true })
-        .waitFor();
     const linkRemoved = page.waitForResponse(
         (response) =>
-            response.url().includes('/tickets/42/links/3') &&
+            response.url().includes('/tickets/42/links/3?_method=DELETE') &&
-            response.request().method() === 'DELETE',
+            response.request().method() === 'POST',
     );
-    await page
+    await page.getByRole('button', { name: 'Remove', exact: true }).click();
-        .getByRole('button', { name: 'Remove link to ENG-41', exact: true })
-        .click();
     assert.equal((await linkRemoved).status(), 303);
     await visit('?readonly&hideAuthor&hidePoints');
     assert.equal(await content().locator('form').count(), 0);
@@ -278,12 +319,7 @@ try {
             .count(),
         0,
     );
-    await tabTo(
+    await tabTo(content().getByRole('link', { name: 'ENG-41', exact: true }));
-        content().getByRole('link', {
-            name: 'ENG-41 Related infrastructure',
-            exact: true,
-        }),
-    );
     await page.keyboard.press('Enter');
     await page.waitForURL('**/tickets/41');
     await page

tests/Fixtures/ticket-detail.mjs

@@ -108,9 +108,18 @@ const ticket = {
         },
     ],
     worklog_entries: [
+        {
+            id: 2,
+            actor: null,
+            actor_id: null,
+            entry_type: 'status_changed',
+            summary: 'Moved from Backlog to Delivery / In progress.',
+            created_at: '2026-09-11T13:00:00Z',
+        },
         {
             id: 1,
             actor: user,
+            actor_id: user.id,
             entry_type: 'created',
             summary: 'Ticket created in the project backlog.',
             created_at: '2026-09-11T12:00:00Z',
@@ -182,35 +191,30 @@ function makePage(url) {
         encryptHistory: false,
         props: {
             name: 'KanbanGit',
-            errors: params.has('linkRejected')
+            errors: params.has('rejected')
                 ? {
-                      ticket_link_type_id: 'Invalid relationship type.',
+                      title: 'This title is not allowed.',
-                      linked_ticket_id: 'Choose another ticket.',
+                      ...(params.has('allErrors')
+                          ? {
+                                description: 'Invalid description.',
+                                ticket_type_id: 'Invalid type.',
+                                ticket_priority_id: 'Invalid priority.',
+                                ticket_status_id: 'Invalid status.',
+                                assignee_user_id: 'Invalid assignee.',
+                                author_user_id: 'Invalid author.',
+                                parent_ticket_id: 'Invalid parent.',
+                                story_points: 'Invalid points.',
+                                'acceptance_criteria.0.text':
+                                    'Invalid checklist.',
+                                blocked_comment: 'Invalid blocker.',
+                                'field_values.0.value_number':
+                                    'Invalid number.',
+                                'field_values.1.value_user_id':
+                                    'Invalid reviewer.',
+                            }
+                          : {}),
                   }
-                : params.has('rejected')
+                : {},
-                  ? {
-                        title: 'This title is not allowed.',
-                        ...(params.has('allErrors')
-                            ? {
-                                  description: 'Invalid description.',
-                                  ticket_type_id: 'Invalid type.',
-                                  ticket_priority_id: 'Invalid priority.',
-                                  ticket_status_id: 'Invalid status.',
-                                  assignee_user_id: 'Invalid assignee.',
-                                  author_user_id: 'Invalid author.',
-                                  parent_ticket_id: 'Invalid parent.',
-                                  story_points: 'Invalid points.',
-                                  'acceptance_criteria.0.text':
-                                      'Invalid checklist.',
-                                  blocked_comment: 'Invalid blocker.',
-                                  'field_values.0.value_number':
-                                      'Invalid number.',
-                                  'field_values.1.value_user_id':
-                                      'Invalid reviewer.',
-                              }
-                            : {}),
-                    }
-                  : {},
             sidebarOpen: true,
             auth: {
                 user,
@@ -255,45 +259,25 @@ function makePage(url) {
                 ? [
                       {
                           ...linked,
-                          ticket_type_name: 'Epic',
+                          ticket_type: { is_parent: false },
-                          children: [
+                          children: [],
-                              {
-                                  id: 43,
-                                  ticket_key: 'ENG-43',
-                                  title: 'Nested child with a long title that must wrap on mobile',
-                                  ticket_type_name: 'Task',
-                                  children: [],
-                              },
-                          ],
                           children_count: 0,
                       },
                   ]
                 : [],
-            linkedTickets:
+            linkedTickets: params.has('empty')
-                params.has('empty') || params.has('noLinks')
-                    ? []
-                    : [
-                          {
-                              id: 3,
-                              source_ticket_id: params.has('incoming')
-                                  ? 41
-                                  : 42,
-                              target_ticket_id: params.has('incoming')
-                                  ? 42
-                                  : 41,
-                              ticket_link_type: {
-                                  id: 1,
-                                  label: params.has('incoming')
-                                      ? 'Blocked by'
-                                      : 'Blocks',
-                              },
-                              linked_ticket: linked,
-                          },
-                      ],
-            ticketLinkOptions: params.has('noTargets') ? [] : [linked],
-            ticketLinkTypes: params.has('noTypes')
                 ? []
-                : [{ id: 1, label: 'Blocks', counterpart_label: 'Blocked by' }],
+                : [
+                      {
+                          id: 3,
+                          ticket_link_type: { id: 1, label: 'Blocks' },
+                          linked_ticket: linked,
+                      },
+                  ],
+            ticketLinkOptions: [linked],
+            ticketLinkTypes: [
+                { id: 1, label: 'Blocks', counterpart_label: 'Blocked by' },
+            ],
             repositoryBranches: params.has('empty')
                 ? []
                 : [
@@ -342,7 +326,7 @@ if (serve) {
             for await (const chunk of request) {
                 body += chunk;
             }
-            const data = body ? JSON.parse(body) : {};
+            const data = JSON.parse(body);
             const previous = new URL(request.headers.referer);
             const params = previous.searchParams;
             if (params.has('serverError')) {
@@ -375,17 +359,8 @@ if (serve) {
             } else if (request.url.includes('/links')) {
                 assert.ok(
                     request.url.endsWith('/links/3?_method=DELETE') ||
-                        request.method === 'DELETE' ||
                         Number(data.linked_ticket_id) === 41,
                 );
-                if (params.has('rejectLink')) {
-                    params.set('linkRejected', '1');
-                } else if (request.method === 'DELETE') {
-                    params.set('noLinks', '1');
-                } else {
-                    params.delete('noLinks');
-                    params.delete('linkRejected');
-                }
             } else {
                 assert.ok(
                     (request.method === 'POST' || 'field_values' in data) &&
@@ -395,7 +370,19 @@ if (serve) {
                 if (params.has('reject')) {
                     params.set('rejected', '1');
                 } else {
-                    savedForm = data;
+                    savedForm = {
+                        ...data,
+                        blocked_comment: data.is_blocked
+                            ? data.blocked_comment
+                            : null,
+                        field_values: data.field_values.map((fieldValue) => ({
+                            ...fieldValue,
+                            user_value:
+                                Number(fieldValue.value_user_id) === user.id
+                                    ? user
+                                    : null,
+                        })),
+                    };
                     params.set('saved', data.title);
                 }
             }
@@ -476,6 +463,9 @@ if (serve) {
             'feature/ENG-42-cache',
             'Cache implementation',
             'Ticket created in the project backlog.',
+            'Ticket created',
+            'Status changed',
+            'System',
         ]) {
             assert.ok(
                 html.includes(text),
@@ -486,6 +476,7 @@ if (serve) {
             'description',
             'checklist',
             'metadata',
+            'blocker',
             'relationships',
             'history',
             'git',
@@ -512,6 +503,7 @@ if (serve) {
             'story_points',
             'parent_ticket_id',
             'description',
+            'acceptance_criteria_checklist',
             'is_blocked',
             'blocked_comment',
             'field-1',
@@ -522,19 +514,8 @@ if (serve) {
                 `Missing editor: ${field}`,
             );
         }
-        assert.match(html, /aria-label="Criterion 1"/);
-        assert.match(html, /Add criterion/);
         assert.match(html, /Create branch/);
         assert.match(html, /Save link/);
-        assert.match(html, /Outgoing/);
-        const incoming = await render('?incoming');
-        assert.match(incoming, /Incoming/);
-        assert.match(incoming, /Blocked by/);
-        assert.match(await render('?noTypes'), /No link types are configured/);
-        assert.match(
-            await render('?noTargets'),
-            /No other tickets are available/,
-        );
         assert.match(html, /Remove/);
         const readOnly = await render('?readonly');
         assert.doesNotMatch(
@@ -549,7 +530,7 @@ if (serve) {
         const empty = await render('?empty');
         for (const text of [
             'No description has been added yet.',
-            'No acceptance criteria yet.',
+            'No acceptance criteria have been added yet.',
             'No status',
             'Unassigned',
             'No author',
@@ -560,11 +541,7 @@ if (serve) {
         ]) {
             assert.ok(empty.includes(text), `Missing empty state: ${text}`);
         }
-        const hierarchy = await render('?parent');
+        assert.match(await render('?parent'), /Child tickets/);
-        assert.match(hierarchy, /Child tickets/);
-        assert.match(hierarchy, /Platform delivery/);
-        assert.match(hierarchy, /Nested child/);
-        assert.match(hierarchy, /Change parent/);
         assert.match(await render('?noAccess'), /Open Git connections/);
         assert.match(
             await render('?gitError'),
@@ -588,10 +565,6 @@ if (serve) {
         assert.match(unavailable, /Ticket creation needs at least one type/);
         for (const creating of [false, true]) {
             const invalid = await render('?rejected&allErrors', creating);
-            assert.match(
-                invalid,
-                /aria-describedby="[^"]+-hint [^"]+-error"|No acceptance criteria yet/,
-            );
             for (const id of [
                 'title',
                 'description',
@@ -600,6 +573,7 @@ if (serve) {
                 'assignee_user_id',
                 'parent_ticket_id',
                 'story_points',
+                'acceptance_criteria_checklist',
             ]) {
                 assert.ok(invalid.includes(`id="${id}-error"`));
             }

tests/Fixtures/ticket-forms-browser.mjs

@@ -10,7 +10,7 @@ page.setDefaultTimeout(10000);
 const base = 'http://127.0.0.1:4185/projects/7/tickets';
 const errors = [];
 page.on('pageerror', (error) => errors.push(error.message));
-const field = (label) => form().getByLabel(label, { exact: true });
+const field = (label) => page.getByLabel(label, { exact: true });
 const form = () => page.locator('form').first();
 const state = (value) =>
     form().locator(`[data-form-state="${value}"]`).waitFor();
@@ -29,19 +29,9 @@ async function fill(create) {
     await field('Assignee').selectOption('2');
     await field('Parent ticket').selectOption('40');
     await field('Estimated story points').fill('0');
-    if (create) {
+    await field('Acceptance criteria checklist').fill(
-        await button('Add criterion').click();
+        '[ ] Main criterion\n  [x] Nested criterion',
-        await button('Add criterion').click();
+    );
-        await button('Indent criterion 2').click();
-    }
-    await field('Criterion 1').fill('Main criterion');
-    await field('Criterion 2').fill('Nested criterion');
-    await form()
-        .getByRole('checkbox', {
-            name: 'Complete criterion 2: Nested criterion',
-            exact: true,
-        })
-        .check();
     if (create) {
         await field('Status').selectOption('4');
     } else {
@@ -164,7 +154,7 @@ try {
             'Assignee',
             'Parent ticket',
             'Estimated story points',
-            'Criterion 1',
+            'Acceptance criteria checklist',
             ...(create
                 ? ['Status']
                 : ['Author', 'Blocker comment', 'Impact score', 'Reviewer']),
@@ -241,12 +231,12 @@ try {
             .waitFor();
         if (create) {
             await page.goBack();
-            await page
-                .getByRole('heading', { name: 'Create ticket', exact: true })
-                .waitFor();
             await field('Title').waitFor();
             assert.equal(await field('Title').inputValue(), '');
-            assert.equal(await field('Criterion 1').count(), 0);
+            assert.equal(
+                await field('Acceptance criteria checklist').inputValue(),
+                '',
+            );
         } else {
             await form()
                 .getByText('All changes saved', { exact: true })

tests/Fixtures/ticket-relationships-browser.mjs

@@ -1,223 +0,0 @@
-import assert from 'node:assert/strict';
-import process from 'node:process';
-const { chromium } = await import(
-    process.env.PLAYWRIGHT_MODULE ?? 'playwright'
-);
-const browser = await chromium.launch({ channel: 'chrome', headless: true });
-const page = await browser.newPage();
-page.setDefaultTimeout(10000);
-const base = 'http://127.0.0.1:4185/projects/7/tickets/42';
-const section = () => page.locator('#ticket-relationships');
-const errors = [];
-page.on('pageerror', (error) => errors.push(error.message));
-async function visit(query = '') {
-    await page.goto(base + query);
-    await section().waitFor();
-}
-const control = (label) => section().getByLabel(label, { exact: true });
-const save = () =>
-    section().getByRole('button', { name: 'Save link', exact: true });
-const remove = () =>
-    section().getByRole('button', {
-        name: 'Remove link to ENG-41',
-        exact: true,
-    });
-try {
-    for (const width of [1440, 390, 320]) {
-        await page.setViewportSize({ width, height: 1000 });
-        for (const theme of ['light', 'dark']) {
-            await page.emulateMedia({
-                colorScheme: theme,
-                reducedMotion: 'reduce',
-            });
-            await visit('?parent&incoming');
-            assert.equal(
-                await page
-                    .locator('html')
-                    .evaluate((el) => el.classList.contains('dark')),
-                theme === 'dark',
-            );
-            for (const text of [
-                'Platform delivery',
-                'Child tickets',
-                'Nested child with a long title that must wrap on mobile',
-                'Incoming',
-                'Blocked by',
-            ]) {
-                assert.equal(
-                    await section()
-                        .getByText(text, { exact: true })
-                        .isVisible(),
-                    true,
-                    text,
-                );
-            }
-            const collapse = section().getByRole('button', {
-                name: 'Collapse children of ENG-41',
-            });
-            await collapse.focus();
-            await page.keyboard.press('Enter');
-            assert.equal(
-                await section()
-                    .getByText(
-                        'Nested child with a long title that must wrap on mobile',
-                        { exact: true },
-                    )
-                    .count(),
-                0,
-            );
-            await page.keyboard.press('Space');
-            assert.equal(await collapse.getAttribute('aria-expanded'), 'true');
-            await control('Link type').focus();
-            await page.keyboard.press('Tab');
-            assert.equal(
-                await control('Linked ticket').evaluate(
-                    (el) =>
-                        el === document.activeElement &&
-                        el.matches(':focus-visible'),
-                ),
-                true,
-            );
-            await control('Linked ticket').selectOption('41');
-            await section()
-                .locator('form')
-                .last()
-                .getByText('ENG-42', { exact: true })
-                .waitFor();
-            assert.equal(
-                await page.evaluate(
-                    () => document.documentElement.scrollWidth <= innerWidth,
-                ),
-                true,
-                `Overflow ${width}/${theme}`,
-            );
-            await section().screenshot({
-                path: `/private/tmp/kan33-relationships-${width}-${theme}.png`,
-            });
-            await section()
-                .getByRole('button', { name: 'Change parent', exact: true })
-                .click();
-            assert.equal(
-                await page
-                    .locator('#parent_ticket_id')
-                    .evaluate((el) => el === document.activeElement),
-                true,
-            );
-            assert.equal(
-                await page.locator('#ticket-edit').evaluate((el) => el.open),
-                true,
-            );
-        }
-    }
-    await visit('?noLinks');
-    assert.equal(await save().isDisabled(), true);
-    await control('Linked ticket').selectOption('41');
-    let request = page.waitForRequest(
-        (r) => r.method() === 'POST' && r.url().endsWith('/links'),
-    );
-    await save().click();
-    assert.deepEqual((await request).postDataJSON(), {
-        ticket_link_type_id: 1,
-        linked_ticket_id: 41,
-    });
-    await section().getByText('Outgoing', { exact: true }).waitFor();
-    await page.waitForFunction(
-        () => document.querySelector('#linked_ticket_id')?.value === '',
-    );
-    await page.waitForFunction(() =>
-        document.activeElement?.textContent.includes('Linked tickets'),
-    );
-    request = page.waitForRequest(
-        (r) => r.method() === 'DELETE' && r.url().endsWith('/links/3'),
-    );
-    await remove().click();
-    await request;
-    await section()
-        .getByText('No ticket links are configured for this ticket yet.', {
-            exact: true,
-        })
-        .waitFor();
-    await page.waitForFunction(() =>
-        document.activeElement?.textContent.includes('Linked tickets'),
-    );
-
-    await visit('?rejectLink');
-    await control('Linked ticket').selectOption('41');
-    await save().click();
-    await section()
-        .getByText('Choose another ticket.', { exact: true })
-        .waitFor();
-    assert.equal(await control('Linked ticket').inputValue(), '41');
-    for (const label of ['Link type', 'Linked ticket']) {
-        assert.equal(await control(label).getAttribute('aria-invalid'), 'true');
-    }
-    await page.route('**/tickets/42/links', (route) => route.abort('failed'));
-    await save().click();
-    await section().locator('[data-form-state="network"]').waitFor();
-    assert.equal(await control('Linked ticket').inputValue(), '41');
-    await page.unrouteAll();
-
-    await visit('?serverError');
-    await remove().click();
-    await section().locator('[data-form-state="server"]').waitFor();
-    assert.equal(await section().locator('[data-ticket-link]').count(), 1);
-    let pending;
-    await page.route('**/tickets/42/links/3', (route) => {
-        pending = route;
-    });
-    await section()
-        .getByRole('button', { name: 'Try again', exact: true })
-        .click();
-    await section().locator('[data-form-state="loading"]').waitFor();
-    assert.equal(await remove().isDisabled(), true);
-    await pending.abort();
-    await section().locator('[data-form-state="network"]').waitFor();
-    await page.unrouteAll();
-
-    await visit();
-    await section()
-        .getByRole('button', { name: 'Change parent', exact: true })
-        .click();
-    await page.getByLabel('Parent ticket', { exact: true }).selectOption('');
-    request = page.waitForRequest(
-        (r) => r.method() === 'PATCH' && r.url().endsWith('/tickets/42'),
-    );
-    await page
-        .getByRole('button', { name: 'Save changes', exact: true })
-        .click();
-    assert.equal((await request).postDataJSON().parent_ticket_id, '');
-    await page.getByText('Ticket updated.', { exact: true }).waitFor();
-
-    await visit('?readonly&parent&incoming');
-    assert.equal(await section().locator('form').count(), 0);
-    assert.equal(
-        await section()
-            .getByRole('button', { name: 'Change parent', exact: true })
-            .count(),
-        0,
-    );
-    assert.equal(
-        await section().getByText('Blocked by', { exact: true }).isVisible(),
-        true,
-    );
-    for (const [query, message] of [
-        ['?noTypes', 'No link types are configured for this project.'],
-        [
-            '?noTargets',
-            'No other tickets are available to link in this project.',
-        ],
-    ]) {
-        await visit(query);
-        assert.equal(
-            await section().getByText(message, { exact: true }).isVisible(),
-            true,
-        );
-        assert.equal(await save().count(), 0);
-    }
-    assert.deepEqual(errors, []);
-    console.log(
-        'Ticket relationships browser checks passed: hierarchy, direction, add/remove, validation, retries, permissions, keyboard, mobile and themes.',
-    );
-} finally {
-    await browser.close();
-}