From 8c70d094b8590f5653073e7522201b3ff33fc49a Mon Sep 17 00:00:00 2001
From: Twyco <twyco@icloud.com>
Date: Sat, 18 Jul 2026 19:50:50 +0200
Subject: [PATCH] Redesign ticket details with inline editing

---
 .../Controllers/ProjectTicketController.php   |    4 +
 .../projects/AcceptanceCriteriaEditor.vue     |  490 +++
 .../components/projects/InlineSaveStatus.vue  |   30 +
 .../components/projects/InlineTextEditor.vue  |  205 ++
 resources/js/lib/acceptance-criteria.ts       |  224 +-
 resources/js/pages/projects/Ticket.vue        | 2736 ++++++++++-------
 resources/js/pages/projects/TicketCreate.vue  |   88 +-
 .../js/types/acceptance-criteria-editor.ts    |   28 +
 resources/js/types/index.ts                   |    2 +
 resources/js/types/ticket-inline-edit.ts      |   76 +
 .../Projects/ProjectTicketControllerTest.php  |   73 +
 11 files changed, 2712 insertions(+), 1244 deletions(-)
 create mode 100644 resources/js/components/projects/AcceptanceCriteriaEditor.vue
 create mode 100644 resources/js/components/projects/InlineSaveStatus.vue
 create mode 100644 resources/js/components/projects/InlineTextEditor.vue
 create mode 100644 resources/js/types/acceptance-criteria-editor.ts
 create mode 100644 resources/js/types/ticket-inline-edit.ts

diff --git a/app/Http/Controllers/ProjectTicketController.php b/app/Http/Controllers/ProjectTicketController.php
index 4e54698..2d7ca63 100644
--- a/app/Http/Controllers/ProjectTicketController.php
+++ b/app/Http/Controllers/ProjectTicketController.php
@@ -6,6 +6,7 @@ use App\Actions\Permissions\PermissionService;
 use App\Actions\Projects\BuildProjectTicketDetailPayload;
 use App\Actions\Projects\BuildProjectTicketOptionsPayload;
 use App\Actions\Tickets\CreateProjectTicket;
+use App\Actions\Tickets\Support\AcceptanceCriteriaChecklistMapper;
 use App\Actions\Tickets\UpdateProjectTicket;
 use App\Enums\Permission;
 use App\Http\Requests\StoreProjectTicketRequest;
@@ -115,6 +116,9 @@ class ProjectTicketController extends Controller
 
         if ($request->expectsJson()) {
             return response()->json([
+                'acceptance_criteria' => AcceptanceCriteriaChecklistMapper::fromModelsWithIds(
+                    $ticket->acceptanceCriteria()->get(),
+                ),
                 'message' => $statusMessage,
                 'updated' => $wasUpdated,
             ]);
diff --git a/resources/js/components/projects/AcceptanceCriteriaEditor.vue b/resources/js/components/projects/AcceptanceCriteriaEditor.vue
new file mode 100644
index 0000000..073022a
--- /dev/null
+++ b/resources/js/components/projects/AcceptanceCriteriaEditor.vue
@@ -0,0 +1,490 @@
+<script setup lang="ts">
+import {
+    ArrowDown,
+    ArrowUp,
+    Check,
+    CircleAlert,
+    IndentDecrease,
+    IndentIncrease,
+    LoaderCircle,
+    Plus,
+    Trash2,
+} from 'lucide-vue-next';
+import { nextTick, ref } from 'vue';
+import {
+    addAcceptanceCriterionAfter,
+    indentAcceptanceCriterionSubtree,
+    moveAcceptanceCriterionSubtree,
+    nextAcceptanceCriteriaSiblingIndex,
+    outdentAcceptanceCriterionSubtree,
+    previousAcceptanceCriteriaSiblingIndex,
+    removeAcceptanceCriterion,
+    syncAcceptanceCriteriaDescendantCheckedState,
+} from '@/lib/acceptance-criteria';
+import { Button } from '@/components/ui/button';
+import type {
+    AcceptanceCriteriaEditorEmits,
+    AcceptanceCriteriaEditorProps,
+} from '@/types';
+import type { AcceptanceCriteriaModel } from '@/types/models/acceptance-criteria-model';
+
+const props = withDefaults(defineProps<AcceptanceCriteriaEditorProps>(), {
+    disabled: false,
+    error: '',
+    saveState: 'idle',
+});
+const emit = defineEmits<AcceptanceCriteriaEditorEmits>();
+
+const editorRoot = ref<HTMLElement | null>(null);
+const editingIndex = ref<number | null>(null);
+const originalText = ref<{ index: number; text: string } | null>(null);
+const skippedBlurIndex = ref<number | null>(null);
+
+const emitUpdate = (items: AcceptanceCriteriaModel): void => {
+    emit('update:modelValue', items);
+};
+
+const emitCommit = (
+    items: AcceptanceCriteriaModel,
+    source: 'check' | 'delete' | 'indent' | 'move' | 'text',
+): void => {
+    emitUpdate(items);
+    emit('commit', { items, source });
+};
+
+const focusRow = (index: number): void => {
+    editingIndex.value = index;
+
+    void nextTick(() => {
+        editorRoot.value
+            ?.querySelector<HTMLInputElement>(`[data-ac-row-index="${index}"]`)
+            ?.focus();
+    });
+};
+
+const startTextEdit = (index: number): void => {
+    if (!props.editable || props.disabled) {
+        return;
+    }
+
+    rememberText(index);
+    focusRow(index);
+};
+
+const addCriterion = (index: number | null): void => {
+    if (!props.editable || props.disabled) {
+        return;
+    }
+
+    const emptyCriterionIndex = props.modelValue.findIndex(
+        (criterion) => criterion.text.trim() === '',
+    );
+
+    if (emptyCriterionIndex !== -1) {
+        focusRow(emptyCriterionIndex);
+
+        return;
+    }
+
+    const result = addAcceptanceCriterionAfter(props.modelValue, index);
+
+    emitUpdate(result.items);
+    focusRow(result.index);
+};
+
+const updateText = (index: number, event: Event): void => {
+    const target = event.target;
+
+    if (!(target instanceof HTMLInputElement)) {
+        return;
+    }
+
+    const items = props.modelValue.map((item, itemIndex) => ({
+        ...item,
+        text: itemIndex === index ? target.value : item.text,
+    }));
+
+    emitUpdate(items);
+};
+
+const rememberText = (index: number): void => {
+    originalText.value = {
+        index,
+        text: props.modelValue[index]?.text ?? '',
+    };
+};
+
+const commitText = (index: number): void => {
+    if (skippedBlurIndex.value === index) {
+        skippedBlurIndex.value = null;
+        editingIndex.value = null;
+        originalText.value = null;
+
+        return;
+    }
+
+    const item = props.modelValue[index];
+
+    if (item === undefined) {
+        return;
+    }
+
+    const trimmedText = item.text.trim();
+
+    if (trimmedText === '') {
+        const items = removeAcceptanceCriterion(props.modelValue, index);
+
+        if (item.id === undefined) {
+            emitUpdate(items);
+        } else {
+            emitCommit(items, 'delete');
+        }
+
+        originalText.value = null;
+        editingIndex.value = null;
+
+        return;
+    }
+
+    const items = props.modelValue.map((criterion, criterionIndex) => ({
+        ...criterion,
+        text: criterionIndex === index ? trimmedText : criterion.text,
+    }));
+    const previousText =
+        originalText.value?.index === index
+            ? originalText.value.text
+            : item.text;
+
+    if (trimmedText !== previousText || props.error !== '') {
+        emitCommit(items, 'text');
+    } else if (trimmedText !== item.text) {
+        emitUpdate(items);
+    }
+
+    originalText.value = null;
+    editingIndex.value = null;
+};
+
+const cancelTextEdit = (index: number, event: KeyboardEvent): void => {
+    const target = event.target;
+
+    if (!(target instanceof HTMLInputElement)) {
+        return;
+    }
+
+    const fallbackText =
+        originalText.value?.index === index ? originalText.value.text : '';
+    const items = props.modelValue.map((item, itemIndex) => ({
+        ...item,
+        text: itemIndex === index ? fallbackText : item.text,
+    }));
+
+    skippedBlurIndex.value = index;
+    emitUpdate(items);
+    target.blur();
+};
+
+const insertAfterCurrent = (index: number, event: KeyboardEvent): void => {
+    event.preventDefault();
+    const item = props.modelValue[index];
+    const trimmedText = item?.text.trim() ?? '';
+
+    if (item === undefined || trimmedText === '') {
+        return;
+    }
+
+    const committedItems = props.modelValue.map(
+        (criterion, criterionIndex) => ({
+            ...criterion,
+            text: criterionIndex === index ? trimmedText : criterion.text,
+        }),
+    );
+    const result = addAcceptanceCriterionAfter(committedItems, index);
+
+    originalText.value = null;
+    emitUpdate(result.items);
+    emit('commit', { items: committedItems, source: 'text' });
+    focusRow(result.index);
+};
+
+const toggleCriterion = (index: number, event: Event): void => {
+    const target = event.target;
+
+    if (!(target instanceof HTMLInputElement)) {
+        return;
+    }
+
+    emitCommit(
+        syncAcceptanceCriteriaDescendantCheckedState(
+            props.modelValue,
+            index,
+            target.checked,
+        ),
+        'check',
+    );
+};
+
+const indentCriterion = (index: number): void => {
+    emitCommit(
+        indentAcceptanceCriterionSubtree(props.modelValue, index),
+        'indent',
+    );
+};
+
+const outdentCriterion = (index: number): void => {
+    emitCommit(
+        outdentAcceptanceCriterionSubtree(props.modelValue, index),
+        'indent',
+    );
+};
+
+const moveCriterion = (index: number, direction: 'down' | 'up'): void => {
+    emitCommit(
+        moveAcceptanceCriterionSubtree(props.modelValue, index, direction),
+        'move',
+    );
+};
+
+const deleteCriterion = (index: number): void => {
+    emitCommit(removeAcceptanceCriterion(props.modelValue, index), 'delete');
+};
+
+const handleIndentKeyboard = (index: number, event: KeyboardEvent): void => {
+    event.preventDefault();
+
+    if (event.shiftKey) {
+        outdentCriterion(index);
+    } else {
+        indentCriterion(index);
+    }
+};
+</script>
+
+<template>
+    <div ref="editorRoot" class="space-y-3">
+        <div
+            v-if="modelValue.length === 0"
+            class="border-outline-variant bg-surface-container-low flex min-h-28 flex-col items-center justify-center gap-3 rounded border border-dashed px-4 py-6 text-center"
+        >
+            <p class="text-muted-foreground text-sm">
+                No acceptance criteria have been added yet.
+            </p>
+            <Button
+                v-if="editable"
+                type="button"
+                variant="outline"
+                size="sm"
+                :disabled="disabled"
+                @click="addCriterion(null)"
+            >
+                <Plus class="size-4" />
+                Add criterion
+            </Button>
+        </div>
+
+        <ol v-else class="space-y-1.5">
+            <li
+                v-for="(item, index) in modelValue"
+                :key="item.id ?? `draft-${index}`"
+                class="group/ac-row"
+                :style="{ paddingLeft: `${item.indent * 1.1}rem` }"
+            >
+                <div
+                    class="border-outline-variant/80 bg-background hover:border-primary/35 focus-within:border-primary/50 focus-within:bg-primary/[0.025] flex min-h-10 flex-wrap items-start gap-2 rounded border px-2.5 py-2 transition sm:flex-nowrap"
+                >
+                    <input
+                        type="checkbox"
+                        :checked="item.checked"
+                        :disabled="!editable || disabled"
+                        class="border-input text-primary focus:ring-ring mt-0.5 size-4 shrink-0 rounded"
+                        :aria-label="`Mark ${item.text || 'criterion'} as complete`"
+                        @change="toggleCriterion(index, $event)"
+                    />
+
+                    <input
+                        v-if="editable && editingIndex === index"
+                        :data-ac-row-index="index"
+                        :value="item.text"
+                        type="text"
+                        :disabled="disabled"
+                        class="placeholder:text-muted-foreground/70 min-w-0 flex-1 border-0 bg-transparent p-0 text-sm leading-5 outline-none disabled:cursor-not-allowed"
+                        placeholder="Describe a verifiable outcome"
+                        @input="updateText(index, $event)"
+                        @blur="commitText(index)"
+                        @keydown.enter="insertAfterCurrent(index, $event)"
+                        @keydown.esc="cancelTextEdit(index, $event)"
+                        @keydown.tab="handleIndentKeyboard(index, $event)"
+                    />
+                    <button
+                        v-else-if="editable"
+                        type="button"
+                        class="placeholder:text-muted-foreground/70 hover:text-primary focus-visible:ring-ring min-w-0 flex-1 whitespace-normal rounded text-left text-sm leading-5 outline-none focus-visible:ring-2"
+                        :disabled="disabled"
+                        @click="startTextEdit(index)"
+                    >
+                        <span
+                            :class="
+                                item.checked
+                                    ? 'text-muted-foreground line-through'
+                                    : ''
+                            "
+                        >
+                            {{ item.text || 'Describe a verifiable outcome' }}
+                        </span>
+                    </button>
+                    <span
+                        v-else
+                        class="min-w-0 flex-1 text-sm leading-5"
+                        :class="
+                            item.checked
+                                ? 'text-muted-foreground line-through'
+                                : 'text-foreground'
+                        "
+                    >
+                        {{ item.text }}
+                    </span>
+
+                    <div
+                        v-if="editable"
+                        class="flex w-full shrink-0 items-center justify-end gap-0.5 pl-6 opacity-100 transition sm:w-auto sm:pl-0 sm:opacity-0 sm:group-focus-within/ac-row:opacity-100 sm:group-hover/ac-row:opacity-100"
+                    >
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            class="size-6"
+                            :disabled="disabled"
+                            aria-label="Add criterion below"
+                            title="Add below"
+                            @mousedown.prevent
+                            @click="addCriterion(index)"
+                        >
+                            <Plus class="size-3.5" />
+                        </Button>
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            class="size-6"
+                            :disabled="disabled || item.indent === 0"
+                            aria-label="Outdent criterion"
+                            title="Outdent (Shift+Tab)"
+                            @mousedown.prevent
+                            @click="outdentCriterion(index)"
+                        >
+                            <IndentDecrease class="size-3.5" />
+                        </Button>
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            class="size-6"
+                            :disabled="
+                                disabled ||
+                                previousAcceptanceCriteriaSiblingIndex(
+                                    modelValue,
+                                    index,
+                                ) === null
+                            "
+                            aria-label="Indent criterion"
+                            title="Indent (Tab)"
+                            @mousedown.prevent
+                            @click="indentCriterion(index)"
+                        >
+                            <IndentIncrease class="size-3.5" />
+                        </Button>
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            class="size-6"
+                            :disabled="
+                                disabled ||
+                                previousAcceptanceCriteriaSiblingIndex(
+                                    modelValue,
+                                    index,
+                                ) === null
+                            "
+                            aria-label="Move criterion up"
+                            title="Move up"
+                            @mousedown.prevent
+                            @click="moveCriterion(index, 'up')"
+                        >
+                            <ArrowUp class="size-3.5" />
+                        </Button>
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            class="size-6"
+                            :disabled="
+                                disabled ||
+                                nextAcceptanceCriteriaSiblingIndex(
+                                    modelValue,
+                                    index,
+                                ) === null
+                            "
+                            aria-label="Move criterion down"
+                            title="Move down"
+                            @mousedown.prevent
+                            @click="moveCriterion(index, 'down')"
+                        >
+                            <ArrowDown class="size-3.5" />
+                        </Button>
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            class="text-destructive hover:text-destructive size-6"
+                            :disabled="disabled"
+                            aria-label="Delete criterion"
+                            title="Delete"
+                            @mousedown.prevent
+                            @click="deleteCriterion(index)"
+                        >
+                            <Trash2 class="size-3.5" />
+                        </Button>
+                    </div>
+                </div>
+            </li>
+        </ol>
+
+        <div class="flex min-h-5 items-center justify-between gap-3">
+            <Button
+                v-if="editable && modelValue.length > 0"
+                type="button"
+                variant="ghost"
+                size="sm"
+                class="h-7 px-2 text-xs"
+                :disabled="disabled"
+                @click="addCriterion(null)"
+            >
+                <Plus class="size-3.5" />
+                Add criterion
+            </Button>
+            <span v-else />
+
+            <span
+                v-if="saveState === 'saving'"
+                class="text-muted-foreground flex items-center gap-1.5 text-xs"
+            >
+                <LoaderCircle class="size-3.5 animate-spin" />
+                Saving
+            </span>
+            <span
+                v-else-if="saveState === 'saved'"
+                class="text-primary flex items-center gap-1.5 text-xs"
+            >
+                <Check class="size-3.5" />
+                Saved
+            </span>
+            <span
+                v-else-if="saveState === 'error' || error"
+                class="text-destructive flex items-center gap-1.5 text-xs"
+            >
+                <CircleAlert class="size-3.5" />
+                {{ error || 'Could not save changes.' }}
+            </span>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/components/projects/InlineSaveStatus.vue b/resources/js/components/projects/InlineSaveStatus.vue
new file mode 100644
index 0000000..ada224a
--- /dev/null
+++ b/resources/js/components/projects/InlineSaveStatus.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { Check, CircleAlert, LoaderCircle } from 'lucide-vue-next';
+import type { InlineSaveStatusProps } from '@/types';
+
+withDefaults(defineProps<InlineSaveStatusProps>(), {
+    error: '',
+});
+</script>
+
+<template>
+    <div
+        v-if="state !== 'idle' || error"
+        class="flex items-center gap-1.5 pt-1 text-[11px]"
+    >
+        <template v-if="state === 'saving'">
+            <LoaderCircle class="text-muted-foreground size-3 animate-spin" />
+            <span class="text-muted-foreground">Saving</span>
+        </template>
+        <template v-else-if="state === 'saved'">
+            <Check class="text-primary size-3" />
+            <span class="text-primary">Saved</span>
+        </template>
+        <template v-else-if="state === 'error' || error">
+            <CircleAlert class="text-destructive size-3" />
+            <span class="text-destructive">{{
+                error || 'Could not save.'
+            }}</span>
+        </template>
+    </div>
+</template>
diff --git a/resources/js/components/projects/InlineTextEditor.vue b/resources/js/components/projects/InlineTextEditor.vue
new file mode 100644
index 0000000..40f8337
--- /dev/null
+++ b/resources/js/components/projects/InlineTextEditor.vue
@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import { Check, CircleAlert, LoaderCircle, Pencil } from 'lucide-vue-next';
+import { nextTick, ref } from 'vue';
+import type {
+    InlineTextEditorEmits,
+    InlineTextEditorProps,
+    InlineTextEditorValue,
+} from '@/types';
+
+const props = withDefaults(defineProps<InlineTextEditorProps>(), {
+    disabled: false,
+    error: '',
+    inputType: 'text',
+    multiline: false,
+    saveState: 'idle',
+    variant: 'body',
+});
+const emit = defineEmits<InlineTextEditorEmits>();
+
+const isEditing = ref(false);
+const originalValue = ref<InlineTextEditorValue>(null);
+const skipNextBlur = ref(false);
+const editor = ref<HTMLInputElement | HTMLTextAreaElement | null>(null);
+
+const startEditing = (): void => {
+    if (!props.editable || props.disabled) {
+        return;
+    }
+
+    originalValue.value = props.value;
+    isEditing.value = true;
+
+    void nextTick(() => {
+        editor.value?.focus();
+
+        if (editor.value instanceof HTMLInputElement) {
+            editor.value.select();
+        }
+    });
+};
+
+const updateValue = (event: Event): void => {
+    const target = event.target;
+
+    if (
+        !(target instanceof HTMLInputElement) &&
+        !(target instanceof HTMLTextAreaElement)
+    ) {
+        return;
+    }
+
+    emit('update:value', target.value);
+};
+
+const finishEditing = (): void => {
+    if (skipNextBlur.value) {
+        skipNextBlur.value = false;
+        isEditing.value = false;
+
+        return;
+    }
+
+    isEditing.value = false;
+
+    if (props.value !== originalValue.value || props.error !== '') {
+        emit('commit');
+    }
+};
+
+const cancelEditing = (): void => {
+    skipNextBlur.value = true;
+    emit('update:value', originalValue.value);
+    editor.value?.blur();
+};
+
+const handleKeydown = (event: KeyboardEvent): void => {
+    if (event.key === 'Escape') {
+        event.preventDefault();
+        cancelEditing();
+
+        return;
+    }
+
+    if (
+        (!props.multiline && event.key === 'Enter') ||
+        (props.multiline &&
+            event.key === 'Enter' &&
+            (event.metaKey || event.ctrlKey))
+    ) {
+        event.preventDefault();
+        editor.value?.blur();
+    }
+};
+
+const displayValue = (): string => {
+    if (props.value === null || props.value === '') {
+        return props.placeholder;
+    }
+
+    return String(props.value);
+};
+</script>
+
+<template>
+    <div class="min-w-0">
+        <div v-if="isEditing" class="space-y-1.5">
+            <textarea
+                v-if="multiline"
+                ref="editor"
+                :value="value ?? ''"
+                rows="5"
+                :disabled="disabled"
+                class="border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 min-h-32 w-full resize-y rounded border px-3 py-2 text-sm leading-6 outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
+                @input="updateValue"
+                @blur="finishEditing"
+                @keydown="handleKeydown"
+            />
+            <input
+                v-else
+                ref="editor"
+                :value="value ?? ''"
+                :type="inputType"
+                :disabled="disabled"
+                class="border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 w-full rounded border px-3 py-2 text-sm outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
+                @input="updateValue"
+                @blur="finishEditing"
+                @keydown="handleKeydown"
+            />
+            <p class="text-muted-foreground text-[11px]">
+                {{
+                    multiline
+                        ? 'Cmd/Ctrl+Enter to save · Escape to cancel'
+                        : 'Enter to save · Escape to cancel'
+                }}
+            </p>
+        </div>
+
+        <button
+            v-else-if="editable"
+            type="button"
+            class="group/inline hover:bg-primary/5 focus-visible:ring-ring relative -m-1 flex w-[calc(100%+0.5rem)] min-w-0 items-start gap-2 rounded p-1 text-left outline-none transition focus-visible:ring-2"
+            :disabled="disabled"
+            @click="startEditing"
+        >
+            <span
+                class="min-w-0 flex-1 whitespace-pre-wrap"
+                :class="[
+                    variant === 'title'
+                        ? 'text-2xl font-semibold leading-tight tracking-tight sm:text-[1.75rem]'
+                        : variant === 'property'
+                          ? 'text-sm font-medium'
+                          : 'text-sm leading-6',
+                    value === null || value === ''
+                        ? 'text-muted-foreground italic'
+                        : 'text-foreground',
+                ]"
+            >
+                {{ displayValue() }}
+            </span>
+            <Pencil
+                class="text-muted-foreground mt-0.5 size-3.5 shrink-0 opacity-0 transition group-hover/inline:opacity-100 group-focus-visible/inline:opacity-100"
+            />
+        </button>
+
+        <div v-else>
+            <p
+                class="whitespace-pre-wrap"
+                :class="[
+                    variant === 'title'
+                        ? 'text-2xl font-semibold leading-tight tracking-tight sm:text-[1.75rem]'
+                        : variant === 'property'
+                          ? 'text-sm font-medium'
+                          : 'text-sm leading-6',
+                    value === null || value === ''
+                        ? 'text-muted-foreground italic'
+                        : 'text-foreground',
+                ]"
+            >
+                {{ displayValue() }}
+            </p>
+        </div>
+
+        <div
+            v-if="saveState !== 'idle' || error"
+            class="mt-1 flex items-center gap-1.5 text-[11px]"
+        >
+            <template v-if="saveState === 'saving'">
+                <LoaderCircle
+                    class="text-muted-foreground size-3 animate-spin"
+                />
+                <span class="text-muted-foreground">Saving</span>
+            </template>
+            <template v-else-if="saveState === 'saved'">
+                <Check class="text-primary size-3" />
+                <span class="text-primary">Saved</span>
+            </template>
+            <template v-else-if="saveState === 'error' || error">
+                <CircleAlert class="text-destructive size-3" />
+                <span class="text-destructive">{{
+                    error || 'Could not save.'
+                }}</span>
+            </template>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/lib/acceptance-criteria.ts b/resources/js/lib/acceptance-criteria.ts
index 3224291..d96dbe6 100644
--- a/resources/js/lib/acceptance-criteria.ts
+++ b/resources/js/lib/acceptance-criteria.ts
@@ -96,6 +96,226 @@ export const syncAcceptanceCriteriaDescendantCheckedState = (
     });
 };
 
+export const acceptanceCriteriaSubtreeEnd = (
+    items: AcceptanceCriteriaModel,
+    index: number,
+): number => {
+    const indent = items[index]?.indent;
+
+    if (indent === undefined) {
+        return index;
+    }
+
+    let end = index + 1;
+
+    while (end < items.length && items[end].indent > indent) {
+        end++;
+    }
+
+    return end;
+};
+
+export const previousAcceptanceCriteriaSiblingIndex = (
+    items: AcceptanceCriteriaModel,
+    index: number,
+): number | null => {
+    const indent = items[index]?.indent;
+
+    if (indent === undefined) {
+        return null;
+    }
+
+    for (
+        let candidateIndex = index - 1;
+        candidateIndex >= 0;
+        candidateIndex--
+    ) {
+        const candidateIndent = items[candidateIndex].indent;
+
+        if (candidateIndent < indent) {
+            return null;
+        }
+
+        if (candidateIndent === indent) {
+            return candidateIndex;
+        }
+    }
+
+    return null;
+};
+
+export const nextAcceptanceCriteriaSiblingIndex = (
+    items: AcceptanceCriteriaModel,
+    index: number,
+): number | null => {
+    const indent = items[index]?.indent;
+    const candidateIndex = acceptanceCriteriaSubtreeEnd(items, index);
+
+    if (
+        indent === undefined ||
+        candidateIndex >= items.length ||
+        items[candidateIndex].indent !== indent
+    ) {
+        return null;
+    }
+
+    return candidateIndex;
+};
+
+export const addAcceptanceCriterionAfter = (
+    items: AcceptanceCriteriaModel,
+    index: number | null,
+): { index: number; items: AcceptanceCriteriaModel } => {
+    const nextItems = items.map((item) => ({ ...item }));
+    const insertionIndex =
+        index === null
+            ? nextItems.length
+            : acceptanceCriteriaSubtreeEnd(nextItems, index);
+    const indent = index === null ? 0 : (nextItems[index]?.indent ?? 0);
+
+    nextItems.splice(insertionIndex, 0, {
+        checked: false,
+        indent,
+        text: '',
+    });
+
+    return {
+        index: insertionIndex,
+        items: nextItems,
+    };
+};
+
+export const indentAcceptanceCriterionSubtree = (
+    items: AcceptanceCriteriaModel,
+    index: number,
+): AcceptanceCriteriaModel => {
+    const previousSiblingIndex = previousAcceptanceCriteriaSiblingIndex(
+        items,
+        index,
+    );
+    const item = items[index];
+
+    if (
+        item === undefined ||
+        item.indent >= MAX_INDENT_LEVEL ||
+        previousSiblingIndex === null
+    ) {
+        return items;
+    }
+
+    const subtreeEnd = acceptanceCriteriaSubtreeEnd(items, index);
+
+    return items.map((criterion, criterionIndex) => ({
+        ...criterion,
+        indent:
+            criterionIndex >= index && criterionIndex < subtreeEnd
+                ? criterion.indent + 1
+                : criterion.indent,
+    }));
+};
+
+export const outdentAcceptanceCriterionSubtree = (
+    items: AcceptanceCriteriaModel,
+    index: number,
+): AcceptanceCriteriaModel => {
+    const item = items[index];
+
+    if (item === undefined || item.indent === 0) {
+        return items;
+    }
+
+    const subtreeEnd = acceptanceCriteriaSubtreeEnd(items, index);
+
+    return items.map((criterion, criterionIndex) => ({
+        ...criterion,
+        indent:
+            criterionIndex >= index && criterionIndex < subtreeEnd
+                ? criterion.indent - 1
+                : criterion.indent,
+    }));
+};
+
+export const removeAcceptanceCriterion = (
+    items: AcceptanceCriteriaModel,
+    index: number,
+): AcceptanceCriteriaModel => {
+    const item = items[index];
+
+    if (item === undefined) {
+        return items;
+    }
+
+    const subtreeEnd = acceptanceCriteriaSubtreeEnd(items, index);
+
+    return items
+        .filter((_criterion, criterionIndex) => criterionIndex !== index)
+        .map((criterion, criterionIndex) => {
+            const originalIndex =
+                criterionIndex >= index ? criterionIndex + 1 : criterionIndex;
+
+            return {
+                ...criterion,
+                indent:
+                    originalIndex > index && originalIndex < subtreeEnd
+                        ? criterion.indent - 1
+                        : criterion.indent,
+            };
+        });
+};
+
+export const moveAcceptanceCriterionSubtree = (
+    items: AcceptanceCriteriaModel,
+    index: number,
+    direction: 'down' | 'up',
+): AcceptanceCriteriaModel => {
+    const subtreeEnd = acceptanceCriteriaSubtreeEnd(items, index);
+    const currentSubtree = items
+        .slice(index, subtreeEnd)
+        .map((item) => ({ ...item }));
+
+    if (direction === 'up') {
+        const previousSiblingIndex = previousAcceptanceCriteriaSiblingIndex(
+            items,
+            index,
+        );
+
+        if (previousSiblingIndex === null) {
+            return items;
+        }
+
+        return [
+            ...items
+                .slice(0, previousSiblingIndex)
+                .map((item) => ({ ...item })),
+            ...currentSubtree,
+            ...items
+                .slice(previousSiblingIndex, index)
+                .map((item) => ({ ...item })),
+            ...items.slice(subtreeEnd).map((item) => ({ ...item })),
+        ];
+    }
+
+    const nextSiblingIndex = nextAcceptanceCriteriaSiblingIndex(items, index);
+
+    if (nextSiblingIndex === null) {
+        return items;
+    }
+
+    const nextSubtreeEnd = acceptanceCriteriaSubtreeEnd(
+        items,
+        nextSiblingIndex,
+    );
+
+    return [
+        ...items.slice(0, index).map((item) => ({ ...item })),
+        ...items
+            .slice(nextSiblingIndex, nextSubtreeEnd)
+            .map((item) => ({ ...item })),
+        ...currentSubtree,
+        ...items.slice(nextSubtreeEnd).map((item) => ({ ...item })),
+    ];
+};
+
 export const acceptanceCriteriaToEditorState = (
     value: AcceptanceCriteriaModel | null | undefined,
 ): AcceptanceCriteriaEditorState => {
@@ -121,9 +341,7 @@ const parseChecklistLine = (
         return null;
     }
 
-    const indentLevel = clampIndent(
-        Math.floor(match.groups.indent.length / 2),
-    );
+    const indentLevel = clampIndent(Math.floor(match.groups.indent.length / 2));
     let content = match.groups.content.trim();
     let checked = false;
 
diff --git a/resources/js/pages/projects/Ticket.vue b/resources/js/pages/projects/Ticket.vue
index 5fba327..4d3010c 100644
--- a/resources/js/pages/projects/Ticket.vue
+++ b/resources/js/pages/projects/Ticket.vue
@@ -1,30 +1,40 @@
 <script setup lang="ts">
 import { Form, useForm, Head, Link, usePage } from '@inertiajs/vue3';
-import { CheckCircle2, GitBranchPlus, XCircle } from 'lucide-vue-next';
-import { computed, ref, watch } from 'vue';
 import {
-    acceptanceCriteriaToEditorState,
-    buildAcceptanceCriteria,
-    formatChecklistLines,
-    normalizeAcceptanceCriteria,
-    syncAcceptanceCriteriaDescendantCheckedState,
-} from '@/lib/acceptance-criteria';
+    AlignLeft,
+    CheckCircle2,
+    ChevronDown,
+    CircleAlert,
+    Clock3,
+    GitBranch,
+    GitBranchPlus,
+    GitPullRequest,
+    Link2,
+    ListChecks,
+    Network,
+    SlidersHorizontal,
+    XCircle,
+} from 'lucide-vue-next';
+import { computed, ref, watch } from 'vue';
+import { normalizeAcceptanceCriteria } from '@/lib/acceptance-criteria';
 import ProjectTicketBranchController from '@/actions/App/Http/Controllers/ProjectTicketBranchController';
 import ProjectTicketLinkController from '@/actions/App/Http/Controllers/ProjectTicketLinkController';
 import ProjectTicketController from '@/actions/App/Http/Controllers/ProjectTicketController';
-import Heading from '@/components/Heading.vue';
 import InputError from '@/components/InputError.vue';
+import AcceptanceCriteriaEditor from '@/components/projects/AcceptanceCriteriaEditor.vue';
+import InlineSaveStatus from '@/components/projects/InlineSaveStatus.vue';
+import InlineTextEditor from '@/components/projects/InlineTextEditor.vue';
 import ProjectTabs from '@/components/projects/ProjectTabs.vue';
 import TicketTreeList from '@/components/TicketTreeList.vue';
+import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+
 import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardHeader,
-    CardTitle,
-} from '@/components/ui/card';
+    Collapsible,
+    CollapsibleContent,
+    CollapsibleTrigger,
+} from '@/components/ui/collapsible';
 import {
     Dialog,
     DialogContent,
@@ -42,7 +52,18 @@ import { index as projectIndex } from '@/routes/projects/index';
 import { show as showTicket } from '@/routes/projects/tickets';
 import type { BranchNameValidationModel } from '@/types/models/branch-name-validation-model';
 import type { RepositoryConnectionModel } from '@/types/models/repository-connection-model';
-import type { BreadcrumbItem, ProjectTicketPageProps } from '@/types';
+import type {
+    AcceptanceCriteriaEditorCommit,
+    AcceptanceCriteriaSaveState,
+    BreadcrumbItem,
+    ProjectTicketPageProps,
+    ProjectTicketUpdatePayload,
+    QueuedTicketAutosave,
+    TicketAutosaveErrorResponse,
+    TicketAutosaveResponse,
+    TicketEditableField,
+} from '@/types';
+import type { AcceptanceCriteriaModel } from '@/types/models/acceptance-criteria-model';
 
 const props = defineProps<ProjectTicketPageProps>();
 const page = usePage();
@@ -85,15 +106,6 @@ const activeProjectSection = computed(() =>
     props.ticket.ticket_status?.board_column_id === null ? 'backlog' : 'board',
 );
 
-const currentParentTicket = computed(
-    () =>
-        props.ticket.parent_ticket ??
-        props.parentTicketOptions.find(
-            (parentTicket) => parentTicket.id === props.ticket.parent_ticket_id,
-        ) ??
-        null,
-);
-
 const defaultBranchRepositoryConnectionId = computed(() =>
     String(
         linkedRepositoryConnections.value.find(
@@ -122,21 +134,9 @@ const breadcrumbs: BreadcrumbItem[] = [
     },
 ];
 
-const acceptanceCriteriaEditorState = acceptanceCriteriaToEditorState(
-    props.ticket.acceptance_criteria,
-);
-const acceptanceCriteriaChecklist = ref(
-    acceptanceCriteriaEditorState.checklist,
-);
-const savedAcceptanceCriteria = ref(
-    normalizeAcceptanceCriteria(props.ticket.acceptance_criteria),
-);
-const isPersistingAcceptanceCriteriaToggle = ref(false);
-const acceptanceCriteriaToggleError = ref('');
-
-const form = useForm({
-    acceptance_criteria: buildAcceptanceCriteria(
-        acceptanceCriteriaChecklist.value,
+const form = useForm<ProjectTicketUpdatePayload>({
+    acceptance_criteria: normalizeAcceptanceCriteria(
+        props.ticket.acceptance_criteria,
     ),
     assignee_user_id: props.ticket.assignee_user_id ?? '',
     author_user_id: props.ticket.author_user_id ?? '',
@@ -163,25 +163,75 @@ const form = useForm({
     story_points: props.ticket.story_points,
 });
 
-const acceptanceCriteriaPreviewItems = computed(
-    () => savedAcceptanceCriteria.value,
-);
+const queuedAutosave = ref<QueuedTicketAutosave | null>(null);
+const isAutosaveRequestActive = ref(false);
+const savingField = ref<TicketEditableField | null>(null);
+const recentlySavedField = ref<TicketEditableField | null>(null);
+const autosaveErrors = ref<Partial<Record<TicketEditableField, string>>>({});
+const activeSelectField = ref<TicketEditableField | null>(null);
 
-const hasUnsavedAcceptanceCriteriaDraft = computed(
+let recentlySavedTimeout: number | undefined;
+
+const currentTicketType = computed(
     () =>
-        acceptanceCriteriaChecklist.value !==
-        formatChecklistLines(savedAcceptanceCriteria.value),
+        props.ticketTypes.find(
+            (ticketType) => ticketType.id === Number(form.ticket_type_id),
+        ) ?? props.ticket.ticket_type,
+);
+const currentTicketPriority = computed(
+    () =>
+        props.ticketPriorities.find(
+            (ticketPriority) =>
+                ticketPriority.id === Number(form.ticket_priority_id),
+        ) ?? props.ticket.ticket_priority,
+);
+const currentAssignee = computed(
+    () =>
+        props.users.find((user) => user.id === Number(form.assignee_user_id)) ??
+        null,
+);
+const currentAuthor = computed(
+    () =>
+        props.users.find((user) => user.id === Number(form.author_user_id)) ??
+        null,
+);
+const currentParentTicketOption = computed(
+    () =>
+        props.parentTicketOptions.find(
+            (parentTicket) => parentTicket.id === Number(form.parent_ticket_id),
+        ) ?? null,
+);
+const currentParentTicket = computed(() => currentParentTicketOption.value);
+const branchCount = computed(() =>
+    visibleRepositoryBranches.value.reduce(
+        (count, repositoryBranch) => count + repositoryBranch.branches.length,
+        0,
+    ),
+);
+const pullRequestCount = computed(() =>
+    visibleRepositoryPullRequests.value.reduce(
+        (count, repositoryPullRequest) =>
+            count + repositoryPullRequest.pull_requests.length,
+        0,
+    ),
+);
+const relationshipCount = computed(
+    () =>
+        props.linkedTickets.length +
+        props.childTicketTree.length +
+        (currentParentTicket.value === null ? 0 : 1),
+);
+const worklogCount = computed(() => props.ticket.worklog_entries?.length ?? 0);
+const visibleAcceptanceCriteria = computed(() =>
+    form.acceptance_criteria.filter(
+        (criterion) => criterion.text.trim() !== '',
+    ),
+);
+const completedAcceptanceCriteriaCount = computed(
+    () =>
+        visibleAcceptanceCriteria.value.filter((criterion) => criterion.checked)
+            .length,
 );
-
-const acceptanceCriteriaError = computed(() => {
-    return (
-        form.errors.acceptance_criteria ??
-        Object.entries(form.errors).find(([key]) =>
-            key.startsWith('acceptance_criteria.'),
-        )?.[1] ??
-        ''
-    );
-});
 
 const isCreateBranchDialogOpen = ref(false);
 const isCheckingBranchName = ref(false);
@@ -365,67 +415,88 @@ const submitBranchCreation = (): void => {
     );
 };
 
-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,
-) => ({
-    acceptance_criteria: acceptanceCriteria,
-    assignee_user_id: props.ticket.assignee_user_id,
-    author_user_id: props.ticket.author_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 buildTicketPayload = (
+    acceptanceCriteria = form.acceptance_criteria,
+): ProjectTicketUpdatePayload => ({
+    acceptance_criteria: normalizeAcceptanceCriteria(acceptanceCriteria),
+    assignee_user_id: form.assignee_user_id,
+    author_user_id: form.author_user_id,
+    blocked_comment: form.blocked_comment,
+    description: form.description,
+    field_values: form.field_values.map((fieldValue) => ({ ...fieldValue })),
+    is_blocked: form.is_blocked,
+    parent_ticket_id: form.parent_ticket_id,
+    story_points: form.story_points,
+    ticket_priority_id: form.ticket_priority_id,
+    ticket_type_id: form.ticket_type_id,
+    title: form.title,
 });
 
-const persistAcceptanceCriteriaToggle = async (
-    index: number,
-    checked: boolean,
-): Promise<void> => {
+const acceptanceCriteriaSignature = (
+    acceptanceCriteria: AcceptanceCriteriaModel,
+): string =>
+    JSON.stringify(
+        normalizeAcceptanceCriteria(acceptanceCriteria).map((item) => ({
+            checked: item.checked,
+            indent: item.indent,
+            text: item.text,
+        })),
+    );
+
+const clearAutosaveError = (field: TicketEditableField): void => {
+    const nextErrors = { ...autosaveErrors.value };
+
+    delete nextErrors[field];
+    autosaveErrors.value = nextErrors;
+};
+
+const markFieldAsSaved = (field: TicketEditableField): void => {
+    recentlySavedField.value = field;
+
+    if (recentlySavedTimeout !== undefined) {
+        window.clearTimeout(recentlySavedTimeout);
+    }
+
+    recentlySavedTimeout = window.setTimeout(() => {
+        if (recentlySavedField.value === field) {
+            recentlySavedField.value = null;
+        }
+    }, 1800);
+};
+
+const extractAutosaveError = async (response: Response): Promise<string> => {
+    try {
+        const body = (await response.json()) as TicketAutosaveErrorResponse;
+        const firstValidationError = Object.values(body.errors ?? {})[0]?.[0];
+
+        return (
+            firstValidationError ??
+            body.message ??
+            'The ticket change could not be saved.'
+        );
+    } catch (_error) {
+        return 'The ticket change could not be saved.';
+    }
+};
+
+const runAutosaveQueue = async (): Promise<void> => {
     if (
-        !props.canEditTicket ||
-        isPersistingAcceptanceCriteriaToggle.value ||
-        hasUnsavedAcceptanceCriteriaDraft.value
+        isAutosaveRequestActive.value ||
+        queuedAutosave.value === null ||
+        !props.canEditTicket
     ) {
         return;
     }
 
-    const nextAcceptanceCriteria = syncAcceptanceCriteriaDescendantCheckedState(
-        savedAcceptanceCriteria.value,
-        index,
-        checked,
-    );
-    const previousChecklist = formatChecklistLines(
-        savedAcceptanceCriteria.value,
-    );
-    const nextChecklist = formatChecklistLines(nextAcceptanceCriteria);
+    const request = queuedAutosave.value;
     const csrfToken = document
         .querySelector('meta[name="csrf-token"]')
         ?.getAttribute('content');
 
-    isPersistingAcceptanceCriteriaToggle.value = true;
-    acceptanceCriteriaToggleError.value = '';
+    queuedAutosave.value = null;
+    isAutosaveRequestActive.value = true;
+    savingField.value = request.field;
+    clearAutosaveError(request.field);
 
     try {
         const response = await fetch(
@@ -442,58 +513,114 @@ const persistAcceptanceCriteriaToggle = async (
                     'X-CSRF-TOKEN': csrfToken ?? '',
                     'X-Requested-With': 'XMLHttpRequest',
                 },
-                body: JSON.stringify(
-                    buildSavedTicketPayload(nextAcceptanceCriteria),
-                ),
+                body: JSON.stringify(request.payload),
             },
         );
 
         if (!response.ok) {
-            throw new Error('Checklist toggle update failed.');
+            throw new Error(await extractAutosaveError(response));
         }
 
-        savedAcceptanceCriteria.value = nextAcceptanceCriteria;
+        const result = (await response.json()) as TicketAutosaveResponse;
 
-        if (acceptanceCriteriaChecklist.value === previousChecklist) {
-            acceptanceCriteriaChecklist.value = nextChecklist;
+        if (
+            request.field === 'acceptance_criteria' &&
+            form.acceptance_criteria.every(
+                (criterion) => criterion.text.trim() !== '',
+            ) &&
+            acceptanceCriteriaSignature(form.acceptance_criteria) ===
+                acceptanceCriteriaSignature(request.payload.acceptance_criteria)
+        ) {
+            form.acceptance_criteria = normalizeAcceptanceCriteria(
+                result.acceptance_criteria,
+            );
         }
-    } catch (_error) {
-        acceptanceCriteriaToggleError.value =
-            'Checklist status could not be saved right now.';
+
+        markFieldAsSaved(request.field);
+    } catch (error) {
+        autosaveErrors.value = {
+            ...autosaveErrors.value,
+            [request.field]:
+                error instanceof Error
+                    ? error.message
+                    : 'The ticket change could not be saved.',
+        };
     } finally {
-        isPersistingAcceptanceCriteriaToggle.value = false;
+        isAutosaveRequestActive.value = false;
+        savingField.value = null;
+
+        if (queuedAutosave.value !== null) {
+            void runAutosaveQueue();
+        }
     }
 };
 
-const onAcceptanceCriteriaCheckboxChange = (
-    index: number,
-    event: Event,
+const requestTicketAutosave = (
+    field: TicketEditableField,
+    acceptanceCriteria = form.acceptance_criteria,
 ): void => {
-    const target = event.target;
-
-    if (!(target instanceof HTMLInputElement)) {
-        return;
-    }
-
-    void persistAcceptanceCriteriaToggle(index, target.checked);
-};
-
-const submit = (): void => {
     if (!props.canEditTicket) {
         return;
     }
 
-    form.acceptance_criteria = buildAcceptanceCriteriaForSubmit();
+    clearAutosaveError(field);
+    queuedAutosave.value = {
+        field,
+        payload: buildTicketPayload(acceptanceCriteria),
+    };
+    void runAutosaveQueue();
+};
 
-    form.submit(
-        ProjectTicketController.update({
-            project: props.project.id,
-            ticket: props.ticket.id,
-        }),
-        {
-            preserveScroll: true,
-        },
-    );
+const saveStateFor = (
+    field: TicketEditableField,
+): AcceptanceCriteriaSaveState => {
+    if (savingField.value === field) {
+        return 'saving';
+    }
+
+    if (autosaveErrors.value[field] !== undefined) {
+        return 'error';
+    }
+
+    return recentlySavedField.value === field ? 'saved' : 'idle';
+};
+
+const errorFor = (field: TicketEditableField): string =>
+    autosaveErrors.value[field] ?? '';
+
+const commitTextField = (
+    field: 'blocked_comment' | 'description' | 'story_points' | 'title',
+): void => {
+    if (field === 'title') {
+        form.title = form.title.trim();
+
+        if (form.title === '') {
+            autosaveErrors.value = {
+                ...autosaveErrors.value,
+                title: 'Title is required.',
+            };
+
+            return;
+        }
+    }
+
+    requestTicketAutosave(field);
+};
+
+const commitSelectField = (field: TicketEditableField): void => {
+    activeSelectField.value = null;
+    requestTicketAutosave(field);
+};
+
+const commitAcceptanceCriteria = (
+    commit: AcceptanceCriteriaEditorCommit,
+): void => {
+    requestTicketAutosave('acceptance_criteria', commit.items);
+};
+
+const toggleBlocked = (): void => {
+    form.is_blocked = !form.is_blocked;
+    requestTicketAutosave('is_blocked');
 };
 
 const formatDateTime = (value: string): string => {
@@ -509,33 +636,55 @@ const formatDateTime = (value: string): string => {
         <Head :title="ticket.ticket_key" />
 
         <div class="app-page max-w-none gap-5">
-            <div
+            <header
                 class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
             >
-                <div class="space-y-3">
+                <div class="min-w-0 flex-1 space-y-3">
                     <div class="flex flex-wrap items-center gap-2">
-                        <Badge variant="outline" class="px-3 py-1">
+                        <Badge
+                            variant="outline"
+                            class="rounded px-2.5 py-1 font-semibold"
+                        >
                             {{ ticket.ticket_key }}
                         </Badge>
-                        <Badge variant="secondary">
-                            {{ ticket.ticket_type.name }}
+                        <Badge variant="secondary" class="rounded">
+                            {{ currentTicketType.name }}
                         </Badge>
-                        <Badge variant="secondary">
-                            {{ ticket.ticket_priority.name }}
-                        </Badge>
-                        <Badge v-if="ticket.ticket_status" variant="outline">
+                        <Badge
+                            v-if="ticket.ticket_status"
+                            variant="outline"
+                            class="rounded"
+                        >
                             {{ ticket.ticket_status.name }}
                         </Badge>
-                        <Badge v-if="!canEditTicket" variant="outline">
+                        <Badge
+                            v-if="form.is_blocked"
+                            variant="destructive"
+                            class="rounded"
+                        >
+                            Blocked
+                        </Badge>
+                        <Badge
+                            v-if="!canEditTicket"
+                            variant="outline"
+                            class="rounded"
+                        >
                             Read only
                         </Badge>
                     </div>
-                    <Heading
-                        :title="ticket.title"
-                        description="Review ticket details, update tracked fields, and inspect the change timeline."
+
+                    <InlineTextEditor
+                        :value="form.title"
+                        :editable="canEditTicket"
+                        placeholder="Untitled ticket"
+                        variant="title"
+                        :save-state="saveStateFor('title')"
+                        :error="errorFor('title')"
+                        @update:value="form.title = String($event ?? '')"
+                        @commit="commitTextField('title')"
                     />
                 </div>
-            </div>
+            </header>
 
             <div class="overflow-x-auto">
                 <ProjectTabs
@@ -550,1114 +699,1371 @@ const formatDateTime = (value: string): string => {
             </div>
 
             <div
-                class="grid gap-6 xl:grid-cols-[minmax(0,2fr)_minmax(320px,1fr)]"
+                class="grid items-start gap-5 xl:grid-cols-[minmax(0,1fr)_20rem]"
             >
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Ticket details</CardTitle>
-                        <CardDescription>
-                            {{
-                                canEditTicket
-                                    ? 'Tracked ticket changes create worklog entries automatically.'
-                                    : 'You can review the tracked fields, but editing requires project edit permission.'
-                            }}
-                        </CardDescription>
-                    </CardHeader>
-
-                    <CardContent>
-                        <form class="grid gap-6" @submit.prevent="submit">
-                            <div class="grid gap-2">
-                                <Label for="title">Title</Label>
-                                <Input
-                                    id="title"
-                                    v-model="form.title"
-                                    :disabled="
-                                        !canEditTicket || form.processing
-                                    "
-                                />
-                                <InputError :message="form.errors.title" />
-                            </div>
-
-                            <div class="grid gap-2 md:grid-cols-2 md:gap-6">
-                                <div class="grid gap-2">
-                                    <Label for="ticket_type_id">Type</Label>
-                                    <select
-                                        id="ticket_type_id"
-                                        v-model="form.ticket_type_id"
-                                        :disabled="
-                                            !canEditTicket || form.processing
-                                        "
-                                        class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 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"
-                                    >
-                                        <option
-                                            v-for="ticketType in ticketTypes"
-                                            :key="ticketType.id"
-                                            :value="ticketType.id"
-                                        >
-                                            {{ ticketType.name }}
-                                        </option>
-                                    </select>
-                                    <InputError
-                                        :message="form.errors.ticket_type_id"
-                                    />
-                                </div>
-
-                                <div class="grid gap-2">
-                                    <Label for="ticket_priority_id">
-                                        Priority
-                                    </Label>
-                                    <select
-                                        id="ticket_priority_id"
-                                        v-model="form.ticket_priority_id"
-                                        :disabled="
-                                            !canEditTicket || form.processing
-                                        "
-                                        class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 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"
-                                    >
-                                        <option
-                                            v-for="ticketPriority in ticketPriorities"
-                                            :key="ticketPriority.id"
-                                            :value="ticketPriority.id"
-                                        >
-                                            {{ ticketPriority.name }}
-                                        </option>
-                                    </select>
-                                    <InputError
-                                        :message="
-                                            form.errors.ticket_priority_id
-                                        "
-                                    />
-                                </div>
-                            </div>
-
-                            <div class="grid gap-2 md:grid-cols-2 md:gap-6">
-                                <div class="grid gap-2">
-                                    <Label for="assignee_user_id">
-                                        Assignee
-                                    </Label>
-                                    <select
-                                        id="assignee_user_id"
-                                        v-model="form.assignee_user_id"
-                                        :disabled="
-                                            !canEditTicket || form.processing
-                                        "
-                                        class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 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"
-                                    >
-                                        <option value="">Unassigned</option>
-                                        <option
-                                            v-for="user in users"
-                                            :key="user.id"
-                                            :value="user.id"
-                                        >
-                                            {{ user.name }}
-                                        </option>
-                                    </select>
-                                    <InputError
-                                        :message="form.errors.assignee_user_id"
-                                    />
-                                </div>
-
-                                <div v-if="canViewAuthor" class="grid gap-2">
-                                    <Label for="author_user_id">Author</Label>
-                                    <select
-                                        id="author_user_id"
-                                        v-model="form.author_user_id"
-                                        :disabled="
-                                            !canEditAuthor || form.processing
-                                        "
-                                        class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 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"
-                                    >
-                                        <option value="">No author</option>
-                                        <option
-                                            v-for="user in users"
-                                            :key="user.id"
-                                            :value="user.id"
-                                        >
-                                            {{ user.name }}
-                                        </option>
-                                    </select>
-                                    <InputError
-                                        :message="form.errors.author_user_id"
-                                    />
-                                </div>
-                            </div>
-
-                            <div
-                                class="grid gap-2"
-                                v-if="project.show_story_points"
+                <main class="min-w-0 space-y-4">
+                    <section
+                        class="border-outline-variant bg-card overflow-hidden rounded border"
+                    >
+                        <div
+                            class="border-outline-variant bg-surface-container-low flex items-center gap-2 border-b px-4 py-2.5"
+                        >
+                            <AlignLeft class="text-primary size-4" />
+                            <h2
+                                class="text-foreground text-[11px] font-bold uppercase tracking-[0.12em]"
                             >
-                                <Label for="story_points">
-                                    Estimated story points
-                                </Label>
-                                <Input
-                                    id="story_points"
-                                    name="story_points"
-                                    v-model="form.story_points"
-                                    type="number"
-                                    step="1"
+                                Description
+                            </h2>
+                        </div>
+                        <div class="px-4 py-4 sm:px-5 sm:py-5">
+                            <InlineTextEditor
+                                :value="form.description"
+                                :editable="canEditTicket"
+                                multiline
+                                placeholder="Add a description with the relevant context and expected behavior."
+                                :save-state="saveStateFor('description')"
+                                :error="errorFor('description')"
+                                @update:value="
+                                    form.description = String($event ?? '')
+                                "
+                                @commit="commitTextField('description')"
+                            />
+                        </div>
+                    </section>
+
+                    <section
+                        v-if="form.is_blocked"
+                        class="overflow-hidden rounded border border-amber-300 bg-amber-50/80 dark:border-amber-900/70 dark:bg-amber-950/25"
+                    >
+                        <div
+                            class="flex items-start justify-between gap-4 px-4 py-3 sm:px-5"
+                        >
+                            <div class="flex min-w-0 flex-1 items-start gap-3">
+                                <CircleAlert
+                                    class="mt-0.5 size-4 shrink-0 text-amber-700 dark:text-amber-300"
                                 />
-                                <InputError
-                                    :message="form.errors.story_points"
+                                <div class="min-w-0 flex-1 space-y-1">
+                                    <p
+                                        class="text-[11px] font-bold uppercase tracking-[0.12em] text-amber-900 dark:text-amber-100"
+                                    >
+                                        Blocked
+                                    </p>
+                                    <InlineTextEditor
+                                        :value="form.blocked_comment"
+                                        :editable="canEditTicket"
+                                        multiline
+                                        placeholder="Describe what currently blocks this ticket."
+                                        :save-state="
+                                            saveStateFor('blocked_comment')
+                                        "
+                                        :error="errorFor('blocked_comment')"
+                                        @update:value="
+                                            form.blocked_comment = String(
+                                                $event ?? '',
+                                            )
+                                        "
+                                        @commit="
+                                            commitTextField('blocked_comment')
+                                        "
+                                    />
+                                </div>
+                            </div>
+                            <Button
+                                v-if="canEditTicket"
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                class="shrink-0"
+                                :disabled="
+                                    saveStateFor('is_blocked') === 'saving'
+                                "
+                                @click="toggleBlocked"
+                            >
+                                Unblock
+                            </Button>
+                        </div>
+                    </section>
+
+                    <section
+                        class="border-outline-variant bg-card overflow-hidden rounded border"
+                    >
+                        <div
+                            class="border-outline-variant bg-surface-container-low flex flex-wrap items-center justify-between gap-3 border-b px-4 py-2.5"
+                        >
+                            <div class="flex items-center gap-2">
+                                <ListChecks class="text-primary size-4" />
+                                <h2
+                                    class="text-foreground text-[11px] font-bold uppercase tracking-[0.12em]"
+                                >
+                                    Acceptance criteria
+                                </h2>
+                            </div>
+                            <span class="text-muted-foreground text-xs">
+                                {{ completedAcceptanceCriteriaCount }} /
+                                {{ visibleAcceptanceCriteria.length }} complete
+                            </span>
+                        </div>
+                        <div class="px-4 py-4 sm:px-5 sm:py-5">
+                            <AcceptanceCriteriaEditor
+                                v-model="form.acceptance_criteria"
+                                :editable="canEditTicket"
+                                :disabled="
+                                    savingField === 'acceptance_criteria'
+                                "
+                                :save-state="
+                                    saveStateFor('acceptance_criteria')
+                                "
+                                :error="errorFor('acceptance_criteria')"
+                                @commit="commitAcceptanceCriteria"
+                            />
+                        </div>
+                    </section>
+                </main>
+
+                <aside
+                    class="border-outline-variant bg-card overflow-hidden rounded border xl:sticky xl:top-20"
+                >
+                    <div
+                        class="border-outline-variant bg-surface-container-low flex items-center gap-2 border-b px-4 py-2.5"
+                    >
+                        <SlidersHorizontal class="text-primary size-4" />
+                        <h2
+                            class="text-foreground text-[11px] font-bold uppercase tracking-[0.12em]"
+                        >
+                            Properties
+                        </h2>
+                    </div>
+
+                    <div class="divide-outline-variant divide-y">
+                        <div
+                            class="grid grid-cols-[5.75rem_minmax(0,1fr)] gap-3 px-4 py-3"
+                        >
+                            <span class="text-muted-foreground text-xs"
+                                >Status</span
+                            >
+                            <span class="text-sm font-medium">{{
+                                ticket.ticket_status?.name ?? 'Backlog'
+                            }}</span>
+                        </div>
+
+                        <div
+                            class="grid grid-cols-[5.75rem_minmax(0,1fr)] gap-3 px-4 py-3"
+                        >
+                            <span class="text-muted-foreground pt-1 text-xs"
+                                >Assignee</span
+                            >
+                            <div class="min-w-0">
+                                <select
+                                    v-if="
+                                        activeSelectField === 'assignee_user_id'
+                                    "
+                                    v-model="form.assignee_user_id"
+                                    autofocus
+                                    class="border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 w-full rounded border px-2 py-1.5 text-sm outline-none focus-visible:ring-[3px]"
+                                    @change="
+                                        commitSelectField('assignee_user_id')
+                                    "
+                                    @blur="activeSelectField = null"
+                                >
+                                    <option value="">Unassigned</option>
+                                    <option
+                                        v-for="user in users"
+                                        :key="user.id"
+                                        :value="user.id"
+                                    >
+                                        {{ user.name }}
+                                    </option>
+                                </select>
+                                <button
+                                    v-else-if="canEditTicket"
+                                    type="button"
+                                    class="hover:text-primary focus-visible:ring-ring flex min-h-7 w-full items-center gap-2 rounded text-left text-sm font-medium outline-none focus-visible:ring-2"
+                                    @click="
+                                        activeSelectField = 'assignee_user_id'
+                                    "
+                                >
+                                    <UserAvatar
+                                        v-if="currentAssignee"
+                                        :user="currentAssignee"
+                                        class="size-6"
+                                    />
+                                    <span class="truncate">{{
+                                        currentAssignee?.name ?? 'Unassigned'
+                                    }}</span>
+                                </button>
+                                <div
+                                    v-else
+                                    class="flex min-h-7 items-center gap-2 text-sm font-medium"
+                                >
+                                    <UserAvatar
+                                        v-if="currentAssignee"
+                                        :user="currentAssignee"
+                                        class="size-6"
+                                    />
+                                    <span class="truncate">{{
+                                        currentAssignee?.name ?? 'Unassigned'
+                                    }}</span>
+                                </div>
+                                <InlineSaveStatus
+                                    :state="saveStateFor('assignee_user_id')"
+                                    :error="errorFor('assignee_user_id')"
                                 />
                             </div>
+                        </div>
 
-                            <div class="grid gap-2">
-                                <Label for="parent_ticket_id">
-                                    Parent ticket
-                                </Label>
+                        <div
+                            class="grid grid-cols-[5.75rem_minmax(0,1fr)] gap-3 px-4 py-3"
+                        >
+                            <span class="text-muted-foreground pt-1 text-xs"
+                                >Type</span
+                            >
+                            <div class="min-w-0">
                                 <select
-                                    id="parent_ticket_id"
-                                    v-model="form.parent_ticket_id"
-                                    :disabled="
-                                        !canEditTicket || form.processing
+                                    v-if="
+                                        activeSelectField === 'ticket_type_id'
                                     "
-                                    class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 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"
+                                    v-model="form.ticket_type_id"
+                                    autofocus
+                                    class="border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 w-full rounded border px-2 py-1.5 text-sm outline-none focus-visible:ring-[3px]"
+                                    @change="
+                                        commitSelectField('ticket_type_id')
+                                    "
+                                    @blur="activeSelectField = null"
                                 >
-                                    <option value="">No parent ticket</option>
+                                    <option
+                                        v-for="ticketType in ticketTypes"
+                                        :key="ticketType.id"
+                                        :value="ticketType.id"
+                                    >
+                                        {{ ticketType.name }}
+                                    </option>
+                                </select>
+                                <button
+                                    v-else-if="canEditTicket"
+                                    type="button"
+                                    class="hover:text-primary focus-visible:ring-ring min-h-7 w-full rounded text-left text-sm font-medium outline-none focus-visible:ring-2"
+                                    @click="
+                                        activeSelectField = 'ticket_type_id'
+                                    "
+                                >
+                                    {{ currentTicketType.name }}
+                                </button>
+                                <p v-else class="min-h-7 text-sm font-medium">
+                                    {{ currentTicketType.name }}
+                                </p>
+                                <InlineSaveStatus
+                                    :state="saveStateFor('ticket_type_id')"
+                                    :error="errorFor('ticket_type_id')"
+                                />
+                            </div>
+                        </div>
+
+                        <div
+                            class="grid grid-cols-[5.75rem_minmax(0,1fr)] gap-3 px-4 py-3"
+                        >
+                            <span class="text-muted-foreground pt-1 text-xs"
+                                >Priority</span
+                            >
+                            <div class="min-w-0">
+                                <select
+                                    v-if="
+                                        activeSelectField ===
+                                        'ticket_priority_id'
+                                    "
+                                    v-model="form.ticket_priority_id"
+                                    autofocus
+                                    class="border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 w-full rounded border px-2 py-1.5 text-sm outline-none focus-visible:ring-[3px]"
+                                    @change="
+                                        commitSelectField('ticket_priority_id')
+                                    "
+                                    @blur="activeSelectField = null"
+                                >
+                                    <option
+                                        v-for="ticketPriority in ticketPriorities"
+                                        :key="ticketPriority.id"
+                                        :value="ticketPriority.id"
+                                    >
+                                        {{ ticketPriority.name }}
+                                    </option>
+                                </select>
+                                <button
+                                    v-else-if="canEditTicket"
+                                    type="button"
+                                    class="hover:text-primary focus-visible:ring-ring min-h-7 w-full rounded text-left text-sm font-medium outline-none focus-visible:ring-2"
+                                    @click="
+                                        activeSelectField = 'ticket_priority_id'
+                                    "
+                                >
+                                    {{ currentTicketPriority.name }}
+                                </button>
+                                <p v-else class="min-h-7 text-sm font-medium">
+                                    {{ currentTicketPriority.name }}
+                                </p>
+                                <InlineSaveStatus
+                                    :state="saveStateFor('ticket_priority_id')"
+                                    :error="errorFor('ticket_priority_id')"
+                                />
+                            </div>
+                        </div>
+
+                        <div
+                            v-if="project.show_story_points"
+                            class="grid grid-cols-[5.75rem_minmax(0,1fr)] gap-3 px-4 py-3"
+                        >
+                            <span class="text-muted-foreground pt-1 text-xs"
+                                >Points</span
+                            >
+                            <InlineTextEditor
+                                :value="form.story_points"
+                                :editable="canEditTicket"
+                                input-type="number"
+                                placeholder="Not estimated"
+                                variant="property"
+                                :save-state="saveStateFor('story_points')"
+                                :error="errorFor('story_points')"
+                                @update:value="form.story_points = $event"
+                                @commit="commitTextField('story_points')"
+                            />
+                        </div>
+
+                        <div
+                            v-if="canViewAuthor"
+                            class="grid grid-cols-[5.75rem_minmax(0,1fr)] gap-3 px-4 py-3"
+                        >
+                            <span class="text-muted-foreground pt-1 text-xs"
+                                >Author</span
+                            >
+                            <div class="min-w-0">
+                                <select
+                                    v-if="
+                                        activeSelectField ===
+                                            'author_user_id' && canEditAuthor
+                                    "
+                                    v-model="form.author_user_id"
+                                    autofocus
+                                    class="border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 w-full rounded border px-2 py-1.5 text-sm outline-none focus-visible:ring-[3px]"
+                                    @change="
+                                        commitSelectField('author_user_id')
+                                    "
+                                    @blur="activeSelectField = null"
+                                >
+                                    <option value="">No author</option>
+                                    <option
+                                        v-for="user in users"
+                                        :key="user.id"
+                                        :value="user.id"
+                                    >
+                                        {{ user.name }}
+                                    </option>
+                                </select>
+                                <button
+                                    v-else-if="canEditAuthor"
+                                    type="button"
+                                    class="hover:text-primary focus-visible:ring-ring flex min-h-7 w-full items-center gap-2 rounded text-left text-sm font-medium outline-none focus-visible:ring-2"
+                                    @click="
+                                        activeSelectField = 'author_user_id'
+                                    "
+                                >
+                                    <UserAvatar
+                                        v-if="currentAuthor"
+                                        :user="currentAuthor"
+                                        class="size-6"
+                                    />
+                                    <span class="truncate">{{
+                                        currentAuthor?.name ?? 'No author'
+                                    }}</span>
+                                </button>
+                                <div
+                                    v-else
+                                    class="flex min-h-7 items-center gap-2 text-sm font-medium"
+                                >
+                                    <UserAvatar
+                                        v-if="currentAuthor"
+                                        :user="currentAuthor"
+                                        class="size-6"
+                                    />
+                                    <span class="truncate">{{
+                                        currentAuthor?.name ?? 'No author'
+                                    }}</span>
+                                </div>
+                                <InlineSaveStatus
+                                    :state="saveStateFor('author_user_id')"
+                                    :error="errorFor('author_user_id')"
+                                />
+                            </div>
+                        </div>
+
+                        <div
+                            class="grid grid-cols-[5.75rem_minmax(0,1fr)] gap-3 px-4 py-3"
+                        >
+                            <span class="text-muted-foreground pt-1 text-xs"
+                                >Parent</span
+                            >
+                            <div class="min-w-0">
+                                <select
+                                    v-if="
+                                        activeSelectField === 'parent_ticket_id'
+                                    "
+                                    v-model="form.parent_ticket_id"
+                                    autofocus
+                                    class="border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 w-full rounded border px-2 py-1.5 text-sm outline-none focus-visible:ring-[3px]"
+                                    @change="
+                                        commitSelectField('parent_ticket_id')
+                                    "
+                                    @blur="activeSelectField = null"
+                                >
+                                    <option value="">No parent</option>
                                     <option
                                         v-for="parentTicketOption in parentTicketOptions"
                                         :key="parentTicketOption.id"
                                         :value="parentTicketOption.id"
                                     >
-                                        {{
-                                            `${parentTicketOption.ticket_key} - ${parentTicketOption.title}`
-                                        }}
+                                        {{ parentTicketOption.ticket_key }} —
+                                        {{ parentTicketOption.title }}
                                     </option>
                                 </select>
-                                <InputError
-                                    :message="form.errors.parent_ticket_id"
-                                />
-                            </div>
-
-                            <div class="grid gap-2">
-                                <Label for="description">Description</Label>
-                                <textarea
-                                    id="description"
-                                    v-model="form.description"
-                                    rows="5"
-                                    :disabled="
-                                        !canEditTicket || form.processing
-                                    "
-                                    class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 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"
-                                />
-                                <InputError
-                                    :message="form.errors.description"
-                                />
-                            </div>
-
-                            <div class="grid gap-4">
-                                <div class="grid gap-2">
-                                    <Label for="acceptance_criteria_checklist">
-                                        Acceptance criteria checklist
-                                    </Label>
-                                    <textarea
-                                        id="acceptance_criteria_checklist"
-                                        v-model="acceptanceCriteriaChecklist"
-                                        rows="5"
-                                        :disabled="
-                                            !canEditTicket || form.processing
-                                        "
-                                        class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 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"
-                                        placeholder="[ ] User can sign in&#10;  [x] Validation is shown for invalid credentials"
-                                    />
-                                    <p class="text-muted-foreground text-xs">
-                                        Use <code>[ ]</code> /
-                                        <code>[x]</code> for checklist items.
-                                        Indent with two spaces for nested steps.
-                                        Text changes are saved with the main
-                                        ticket update.
-                                    </p>
-                                    <p
-                                        v-if="hasUnsavedAcceptanceCriteriaDraft"
-                                        class="text-muted-foreground text-xs"
-                                    >
-                                        Save checklist text changes before
-                                        toggling completion directly.
-                                    </p>
-                                    <InputError
-                                        :message="acceptanceCriteriaError"
-                                    />
-                                    <InputError
-                                        :message="acceptanceCriteriaToggleError"
-                                    />
-                                </div>
-
-                                <div
-                                    v-if="
-                                        acceptanceCriteriaPreviewItems.length >
-                                        0
-                                    "
-                                    class="border-border rounded-xl border p-4 text-sm"
-                                >
-                                    <p class="mb-3 font-medium">
-                                        Saved checklist
-                                    </p>
-                                    <ul class="space-y-2">
-                                        <li
-                                            v-for="(
-                                                item, index
-                                            ) in acceptanceCriteriaPreviewItems"
-                                            :key="item.id ?? index"
-                                            :style="{
-                                                marginLeft: `${item.indent * 1.25}rem`,
-                                            }"
-                                            class="flex 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-0.5 size-4 rounded"
-                                                @change="
-                                                    onAcceptanceCriteriaCheckboxChange(
-                                                        index,
-                                                        $event,
-                                                    )
-                                                "
-                                            />
-                                            <label
-                                                :for="`acceptance-criteria-${item.id ?? index}`"
-                                                class="flex-1"
-                                            >
-                                                {{ item.text }}
-                                            </label>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </div>
-
-                            <div
-                                class="border-border grid gap-3 rounded-xl border p-4"
-                            >
-                                <div class="flex items-center gap-3">
-                                    <input
-                                        id="is_blocked"
-                                        v-model="form.is_blocked"
-                                        type="checkbox"
-                                        :disabled="
-                                            !canEditTicket || form.processing
-                                        "
-                                        class="border-input text-primary focus:ring-ring size-4 rounded"
-                                    />
-                                    <Label for="is_blocked">
-                                        Mark ticket as blocked
-                                    </Label>
-                                </div>
-
-                                <div class="grid gap-2">
-                                    <Label for="blocked_comment">
-                                        Blocker comment
-                                    </Label>
-                                    <textarea
-                                        id="blocked_comment"
-                                        v-model="form.blocked_comment"
-                                        rows="3"
-                                        :disabled="
-                                            !canEditTicket || form.processing
-                                        "
-                                        class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 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"
-                                        placeholder="Describe what currently blocks progress on this ticket."
-                                    />
-                                    <InputError
-                                        :message="form.errors.blocked_comment"
-                                    />
-                                </div>
-                            </div>
-
-                            <div class="grid gap-4">
-                                <div class="space-y-1">
-                                    <h3 class="text-sm font-semibold">
-                                        Custom fields
-                                    </h3>
-                                    <p class="text-muted-foreground text-sm">
-                                        Project-configured fields can be tracked
-                                        directly on the ticket.
-                                    </p>
-                                </div>
-
-                                <div
-                                    v-if="ticketFieldDefinitions.length === 0"
-                                    class="border-border text-muted-foreground rounded-xl border border-dashed px-4 py-6 text-sm"
-                                >
-                                    No custom fields are configured for this
-                                    project yet.
-                                </div>
-
-                                <div v-else class="grid gap-4 md:grid-cols-2">
-                                    <div
-                                        v-for="(
-                                            ticketFieldDefinition, index
-                                        ) in ticketFieldDefinitions"
-                                        :key="ticketFieldDefinition.id"
-                                        class="grid gap-2"
-                                    >
-                                        <Label
-                                            :for="`field-${ticketFieldDefinition.id}`"
-                                        >
-                                            {{ ticketFieldDefinition.label }}
-                                        </Label>
-
-                                        <select
-                                            v-if="
-                                                ticketFieldDefinition.field_type ===
-                                                'user'
-                                            "
-                                            :id="`field-${ticketFieldDefinition.id}`"
-                                            v-model="
-                                                form.field_values[index]
-                                                    .value_user_id
-                                            "
-                                            :disabled="
-                                                !canEditTicket ||
-                                                form.processing
-                                            "
-                                            class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 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"
-                                        >
-                                            <option value="">Unassigned</option>
-                                            <option
-                                                v-for="user in users"
-                                                :key="user.id"
-                                                :value="user.id"
-                                            >
-                                                {{ user.name }}
-                                            </option>
-                                        </select>
-
-                                        <Input
-                                            v-else
-                                            :id="`field-${ticketFieldDefinition.id}`"
-                                            v-model="
-                                                form.field_values[index]
-                                                    .value_number
-                                            "
-                                            type="number"
-                                            step="0.1"
-                                            :disabled="
-                                                !canEditTicket ||
-                                                form.processing
-                                            "
-                                        />
-
-                                        <InputError
-                                            :message="
-                                                form.errors[
-                                                    `field_values.${index}.value_user_id`
-                                                ] ??
-                                                form.errors[
-                                                    `field_values.${index}.value_number`
-                                                ]
-                                            "
-                                        />
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div
-                                v-if="canEditTicket"
-                                class="flex items-center gap-3"
-                            >
-                                <Button
-                                    type="submit"
-                                    :disabled="form.processing"
-                                >
-                                    Save changes
-                                </Button>
-                            </div>
-                        </form>
-                    </CardContent>
-                </Card>
-
-                <div class="space-y-4 self-start xl:sticky xl:top-20">
-                    <Card class="h-fit">
-                        <CardHeader
-                            class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
-                        >
-                            <div class="space-y-1.5">
-                                <CardTitle>Branches</CardTitle>
-                                <CardDescription>
-                                    Matching branches are discovered from linked
-                                    repositories when the branch name starts
-                                    with this ticket key.
-                                </CardDescription>
-                            </div>
-
-                            <Dialog v-model:open="isCreateBranchDialogOpen">
-                                <Button
-                                    v-if="canCreateBranches"
+                                <button
+                                    v-else-if="canEditTicket"
                                     type="button"
-                                    variant="outline"
-                                    class="gap-2"
-                                    @click="isCreateBranchDialogOpen = true"
+                                    class="hover:text-primary focus-visible:ring-ring min-h-7 w-full truncate rounded text-left text-sm font-medium outline-none focus-visible:ring-2"
+                                    @click="
+                                        activeSelectField = 'parent_ticket_id'
+                                    "
                                 >
-                                    <GitBranchPlus class="size-4" />
-                                    Create branch
-                                </Button>
+                                    {{
+                                        currentParentTicketOption?.ticket_key ??
+                                        'No parent'
+                                    }}
+                                </button>
+                                <p
+                                    v-else
+                                    class="min-h-7 truncate text-sm font-medium"
+                                >
+                                    {{
+                                        currentParentTicketOption?.ticket_key ??
+                                        'No parent'
+                                    }}
+                                </p>
+                                <InlineSaveStatus
+                                    :state="saveStateFor('parent_ticket_id')"
+                                    :error="errorFor('parent_ticket_id')"
+                                />
+                            </div>
+                        </div>
 
-                                <DialogContent class="sm:max-w-lg">
-                                    <DialogHeader class="space-y-3">
-                                        <DialogTitle>
-                                            Create branch from ticket
-                                        </DialogTitle>
-                                        <DialogDescription>
-                                            Pick a linked repository, confirm
-                                            the suggested branch name, and
-                                            create it directly in Gitea.
-                                        </DialogDescription>
-                                    </DialogHeader>
-
-                                    <form
-                                        class="grid gap-4"
-                                        @submit.prevent="submitBranchCreation"
+                        <div
+                            v-for="(
+                                ticketFieldDefinition, index
+                            ) in ticketFieldDefinitions"
+                            :key="ticketFieldDefinition.id"
+                            class="grid grid-cols-[5.75rem_minmax(0,1fr)] gap-3 px-4 py-3"
+                        >
+                            <span class="text-muted-foreground pt-1 text-xs">{{
+                                ticketFieldDefinition.label
+                            }}</span>
+                            <div
+                                v-if="
+                                    ticketFieldDefinition.field_type === 'user'
+                                "
+                                class="min-w-0"
+                            >
+                                <select
+                                    v-if="
+                                        activeSelectField ===
+                                        `field-${ticketFieldDefinition.id}`
+                                    "
+                                    v-model="
+                                        form.field_values[index].value_user_id
+                                    "
+                                    autofocus
+                                    class="border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 w-full rounded border px-2 py-1.5 text-sm outline-none focus-visible:ring-[3px]"
+                                    @change="
+                                        commitSelectField(
+                                            `field-${ticketFieldDefinition.id}`,
+                                        )
+                                    "
+                                    @blur="activeSelectField = null"
+                                >
+                                    <option value="">Unassigned</option>
+                                    <option
+                                        v-for="user in users"
+                                        :key="user.id"
+                                        :value="user.id"
                                     >
-                                        <div class="grid gap-2">
-                                            <Label
-                                                for="repository_connection_id"
-                                            >
-                                                Repository
-                                            </Label>
-                                            <select
-                                                id="repository_connection_id"
-                                                v-model="
-                                                    branchCreationForm.repository_connection_id
+                                        {{ user.name }}
+                                    </option>
+                                </select>
+                                <button
+                                    v-else-if="canEditTicket"
+                                    type="button"
+                                    class="hover:text-primary focus-visible:ring-ring min-h-7 w-full truncate rounded text-left text-sm font-medium outline-none focus-visible:ring-2"
+                                    @click="
+                                        activeSelectField = `field-${ticketFieldDefinition.id}`
+                                    "
+                                >
+                                    {{
+                                        users.find(
+                                            (user) =>
+                                                user.id ===
+                                                Number(
+                                                    form.field_values[index]
+                                                        .value_user_id,
+                                                ),
+                                        )?.name ?? 'Unassigned'
+                                    }}
+                                </button>
+                                <p
+                                    v-else
+                                    class="min-h-7 truncate text-sm font-medium"
+                                >
+                                    {{
+                                        users.find(
+                                            (user) =>
+                                                user.id ===
+                                                Number(
+                                                    form.field_values[index]
+                                                        .value_user_id,
+                                                ),
+                                        )?.name ?? 'Unassigned'
+                                    }}
+                                </p>
+                                <InlineSaveStatus
+                                    :state="
+                                        saveStateFor(
+                                            `field-${ticketFieldDefinition.id}`,
+                                        )
+                                    "
+                                    :error="
+                                        errorFor(
+                                            `field-${ticketFieldDefinition.id}`,
+                                        )
+                                    "
+                                />
+                            </div>
+                            <InlineTextEditor
+                                v-else
+                                :value="form.field_values[index].value_number"
+                                :editable="canEditTicket"
+                                input-type="number"
+                                placeholder="Not set"
+                                variant="property"
+                                :save-state="
+                                    saveStateFor(
+                                        `field-${ticketFieldDefinition.id}`,
+                                    )
+                                "
+                                :error="
+                                    errorFor(
+                                        `field-${ticketFieldDefinition.id}`,
+                                    )
+                                "
+                                @update:value="
+                                    form.field_values[index].value_number =
+                                        $event
+                                "
+                                @commit="
+                                    requestTicketAutosave(
+                                        `field-${ticketFieldDefinition.id}`,
+                                    )
+                                "
+                            />
+                        </div>
+
+                        <div
+                            class="grid grid-cols-[5.75rem_minmax(0,1fr)] gap-3 px-4 py-3"
+                        >
+                            <span class="text-muted-foreground pt-1 text-xs"
+                                >Blocked</span
+                            >
+                            <div>
+                                <button
+                                    v-if="canEditTicket"
+                                    type="button"
+                                    class="hover:text-primary focus-visible:ring-ring min-h-7 rounded text-left text-sm font-medium outline-none focus-visible:ring-2"
+                                    @click="toggleBlocked"
+                                >
+                                    {{ form.is_blocked ? 'Yes' : 'No' }}
+                                </button>
+                                <p v-else class="min-h-7 text-sm font-medium">
+                                    {{ form.is_blocked ? 'Yes' : 'No' }}
+                                </p>
+                                <InlineSaveStatus
+                                    :state="saveStateFor('is_blocked')"
+                                    :error="errorFor('is_blocked')"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </aside>
+            </div>
+
+            <div class="space-y-2">
+                <Collapsible
+                    v-slot="{ open }"
+                    class="border-outline-variant bg-card overflow-hidden rounded border"
+                >
+                    <CollapsibleTrigger as-child>
+                        <button
+                            type="button"
+                            class="hover:bg-primary/[0.025] focus-visible:ring-ring flex w-full items-center justify-between gap-4 px-4 py-3 text-left outline-none focus-visible:ring-2 focus-visible:ring-inset sm:px-5"
+                        >
+                            <div class="flex min-w-0 items-center gap-3">
+                                <GitBranch
+                                    class="text-primary size-4 shrink-0"
+                                />
+                                <div class="min-w-0">
+                                    <h2 class="text-sm font-semibold">
+                                        Development
+                                    </h2>
+                                    <p class="text-muted-foreground text-xs">
+                                        {{ branchCount }} branches ·
+                                        {{ pullRequestCount }} pull requests
+                                    </p>
+                                </div>
+                            </div>
+                            <ChevronDown
+                                class="text-muted-foreground size-4 shrink-0 transition-transform"
+                                :class="open ? 'rotate-180' : ''"
+                            />
+                        </button>
+                    </CollapsibleTrigger>
+                    <CollapsibleContent>
+                        <div
+                            class="border-outline-variant grid gap-4 border-t px-4 py-4 sm:px-5 xl:grid-cols-2"
+                        >
+                            <section
+                                class="border-outline-variant bg-surface-container-low overflow-hidden rounded border"
+                            >
+                                <div
+                                    class="border-outline-variant flex flex-col gap-3 border-b px-4 py-3 sm:flex-row sm:items-start sm:justify-between"
+                                >
+                                    <div>
+                                        <h3
+                                            class="flex items-center gap-2 text-sm font-semibold"
+                                        >
+                                            <GitBranch class="size-4" />
+                                            Branches
+                                        </h3>
+                                        <p
+                                            class="text-muted-foreground mt-1 text-xs leading-5"
+                                        >
+                                            Branches whose names start with
+                                            {{ ticket.ticket_key }}.
+                                        </p>
+                                    </div>
+                                    <Dialog
+                                        v-model:open="isCreateBranchDialogOpen"
+                                    >
+                                        <Button
+                                            v-if="canCreateBranches"
+                                            type="button"
+                                            variant="outline"
+                                            size="sm"
+                                            @click="
+                                                isCreateBranchDialogOpen = true
+                                            "
+                                        >
+                                            <GitBranchPlus class="size-4" />
+                                            Create branch
+                                        </Button>
+                                        <DialogContent class="sm:max-w-lg">
+                                            <DialogHeader class="space-y-3">
+                                                <DialogTitle
+                                                    >Create branch from
+                                                    ticket</DialogTitle
+                                                >
+                                                <DialogDescription
+                                                    >Pick a linked repository
+                                                    and confirm the suggested
+                                                    branch
+                                                    name.</DialogDescription
+                                                >
+                                            </DialogHeader>
+                                            <form
+                                                class="grid gap-4"
+                                                @submit.prevent="
+                                                    submitBranchCreation
                                                 "
-                                                :disabled="
-                                                    branchCreationForm.processing
-                                                "
-                                                class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 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"
                                             >
-                                                <option
-                                                    v-for="repositoryConnection in linkedRepositoryConnections"
-                                                    :key="
-                                                        repositoryConnection.id
-                                                    "
-                                                    :value="
-                                                        String(
-                                                            repositoryConnection.id,
-                                                        )
+                                                <div class="grid gap-2">
+                                                    <Label
+                                                        for="repository_connection_id"
+                                                        >Repository</Label
+                                                    >
+                                                    <select
+                                                        id="repository_connection_id"
+                                                        v-model="
+                                                            branchCreationForm.repository_connection_id
+                                                        "
+                                                        :disabled="
+                                                            branchCreationForm.processing
+                                                        "
+                                                        class="border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 rounded border px-3 py-2 text-sm outline-none focus-visible:ring-[3px] disabled:opacity-60"
+                                                    >
+                                                        <option
+                                                            v-for="repositoryConnection in linkedRepositoryConnections"
+                                                            :key="
+                                                                repositoryConnection.id
+                                                            "
+                                                            :value="
+                                                                String(
+                                                                    repositoryConnection.id,
+                                                                )
+                                                            "
+                                                        >
+                                                            {{
+                                                                `${repositoryConnection.repository_full_name}${repositoryConnection.has_personal_access ? '' : ' (connect personal Git access)'}`
+                                                            }}
+                                                        </option>
+                                                    </select>
+                                                    <InputError
+                                                        :message="
+                                                            branchCreationForm
+                                                                .errors
+                                                                .repository_connection_id
+                                                        "
+                                                    />
+                                                </div>
+                                                <div class="grid gap-2">
+                                                    <Label for="branch_name"
+                                                        >Branch name</Label
+                                                    >
+                                                    <Input
+                                                        id="branch_name"
+                                                        v-model="
+                                                            branchCreationForm.branch_name
+                                                        "
+                                                        :disabled="
+                                                            branchCreationForm.processing ||
+                                                            !selectedBranchRepositoryHasPersonalAccess
+                                                        "
+                                                    />
+                                                    <InputError
+                                                        :message="
+                                                            branchCreationForm
+                                                                .errors
+                                                                .branch_name
+                                                        "
+                                                    />
+                                                </div>
+                                                <div
+                                                    class="rounded border px-4 py-3"
+                                                    :class="
+                                                        branchNameValidation?.is_valid
+                                                            ? 'border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100'
+                                                            : 'border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900/70 dark:bg-amber-950/40 dark:text-amber-100'
                                                     "
                                                 >
-                                                    {{
-                                                        `${repositoryConnection.repository_full_name}${repositoryConnection.has_personal_access ? '' : ' (connect personal Git access)'}`
-                                                    }}
-                                                </option>
-                                            </select>
-                                            <InputError
-                                                :message="
-                                                    branchCreationForm.errors
-                                                        .repository_connection_id
-                                                "
-                                            />
-                                        </div>
-
-                                        <div class="grid gap-2">
-                                            <Label for="branch_name">
-                                                Branch name
-                                            </Label>
-                                            <Input
-                                                id="branch_name"
-                                                v-model="
-                                                    branchCreationForm.branch_name
-                                                "
-                                                :disabled="
-                                                    branchCreationForm.processing ||
-                                                    !selectedBranchRepositoryHasPersonalAccess
-                                                "
-                                            />
-                                            <InputError
-                                                :message="
-                                                    branchCreationForm.errors
-                                                        .branch_name
-                                                "
-                                            />
-                                        </div>
-
-                                        <div
-                                            class="rounded-xl border px-4 py-3"
-                                            :class="
-                                                branchNameValidation?.is_valid
-                                                    ? 'border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100'
-                                                    : 'border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900/70 dark:bg-amber-950/40 dark:text-amber-100'
-                                            "
-                                        >
-                                            <div class="flex items-start gap-3">
-                                                <CheckCircle2
+                                                    <div
+                                                        class="flex items-start gap-3"
+                                                    >
+                                                        <CheckCircle2
+                                                            v-if="
+                                                                branchNameValidation?.is_valid
+                                                            "
+                                                            class="mt-0.5 size-4 shrink-0"
+                                                        />
+                                                        <XCircle
+                                                            v-else-if="
+                                                                branchNameValidation !==
+                                                                null
+                                                            "
+                                                            class="mt-0.5 size-4 shrink-0"
+                                                        />
+                                                        <p class="text-sm">
+                                                            {{
+                                                                isCheckingBranchName
+                                                                    ? 'Checking whether this branch name is valid and still available...'
+                                                                    : (branchNameValidation?.message ??
+                                                                      'Select a linked repository to validate the branch name.')
+                                                            }}
+                                                        </p>
+                                                    </div>
+                                                </div>
+                                                <div
                                                     v-if="
-                                                        branchNameValidation?.is_valid
+                                                        !selectedBranchRepositoryHasPersonalAccess &&
+                                                        selectedBranchRepositoryConnection !==
+                                                            null
                                                     "
-                                                    class="mt-0.5 size-4 shrink-0"
-                                                />
-                                                <XCircle
-                                                    v-else-if="
-                                                        branchNameValidation !==
-                                                        null
-                                                    "
-                                                    class="mt-0.5 size-4 shrink-0"
-                                                />
-                                                <p class="text-sm">
-                                                    {{
-                                                        isCheckingBranchName
-                                                            ? 'Checking whether this branch name is valid and still available...'
-                                                            : (branchNameValidation?.message ??
-                                                              'Select a linked repository to validate the branch name.')
-                                                    }}
-                                                </p>
-                                            </div>
+                                                    class="border-outline-variant rounded border border-dashed px-4 py-4"
+                                                >
+                                                    <p
+                                                        class="text-muted-foreground text-sm"
+                                                    >
+                                                        Connect a matching
+                                                        personal Git account
+                                                        before creating a
+                                                        branch.
+                                                    </p>
+                                                    <Button
+                                                        as-child
+                                                        variant="outline"
+                                                        size="sm"
+                                                        class="mt-3"
+                                                        ><Link
+                                                            :href="
+                                                                editGitConnections()
+                                                            "
+                                                            >Open Git
+                                                            connections</Link
+                                                        ></Button
+                                                    >
+                                                </div>
+                                                <DialogFooter class="gap-2">
+                                                    <Button
+                                                        type="button"
+                                                        variant="secondary"
+                                                        @click="
+                                                            isCreateBranchDialogOpen = false
+                                                        "
+                                                        >Cancel</Button
+                                                    >
+                                                    <Button
+                                                        type="submit"
+                                                        :disabled="
+                                                            branchCreationForm.processing ||
+                                                            isCheckingBranchName ||
+                                                            branchNameValidation?.is_valid !==
+                                                                true
+                                                        "
+                                                        >Create now</Button
+                                                    >
+                                                </DialogFooter>
+                                            </form>
+                                        </DialogContent>
+                                    </Dialog>
+                                </div>
+                                <div class="space-y-3 p-4">
+                                    <div
+                                        v-if="
+                                            visibleRepositoryBranches.length ===
+                                            0
+                                        "
+                                        class="border-outline-variant text-muted-foreground rounded border border-dashed px-4 py-6 text-sm"
+                                    >
+                                        No matching branches were found.
+                                    </div>
+                                    <div
+                                        v-for="repositoryBranch in visibleRepositoryBranches"
+                                        v-else
+                                        :key="
+                                            repositoryBranch
+                                                .repository_connection.id
+                                        "
+                                        class="border-outline-variant bg-background rounded border p-3"
+                                    >
+                                        <div
+                                            class="flex flex-wrap items-center gap-2"
+                                        >
+                                            <Badge variant="secondary">{{
+                                                repositoryBranch
+                                                    .repository_connection
+                                                    .provider_label
+                                            }}</Badge
+                                            ><span
+                                                class="text-sm font-medium"
+                                                >{{
+                                                    repositoryBranch
+                                                        .repository_connection
+                                                        .repository_full_name
+                                                }}</span
+                                            >
                                         </div>
-
                                         <div
                                             v-if="
-                                                !selectedBranchRepositoryHasPersonalAccess &&
-                                                selectedBranchRepositoryConnection !==
-                                                    null
+                                                !repositoryBranch
+                                                    .repository_connection
+                                                    .has_personal_access
                                             "
-                                            class="border-border rounded-xl border border-dashed px-4 py-4"
+                                            class="mt-3 space-y-3"
                                         >
                                             <p
                                                 class="text-muted-foreground text-sm"
                                             >
-                                                You can only create branches in
-                                                repositories that match one of
-                                                your personal Git connections.
+                                                Connect a matching Git account
+                                                to inspect branches.
                                             </p>
-
                                             <Button
                                                 as-child
                                                 variant="outline"
                                                 size="sm"
-                                                class="mt-3"
-                                            >
-                                                <Link
+                                                ><Link
                                                     :href="editGitConnections()"
-                                                >
-                                                    Open Git connections
-                                                </Link>
-                                            </Button>
+                                                    >Open Git connections</Link
+                                                ></Button
+                                            >
                                         </div>
-
-                                        <DialogFooter class="gap-2">
-                                            <Button
-                                                type="button"
-                                                variant="secondary"
-                                                @click="
-                                                    isCreateBranchDialogOpen = false
-                                                "
+                                        <div
+                                            v-else-if="repositoryBranch.error"
+                                            class="mt-3 rounded border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900 dark:border-amber-900/70 dark:bg-amber-950/40 dark:text-amber-100"
+                                        >
+                                            {{ repositoryBranch.error }}
+                                        </div>
+                                        <div
+                                            v-else
+                                            class="mt-3 flex flex-wrap gap-2"
+                                        >
+                                            <Badge
+                                                v-for="branch in repositoryBranch.branches"
+                                                :key="branch.name"
+                                                variant="outline"
+                                                >{{ branch.name }}</Badge
                                             >
-                                                Cancel
-                                            </Button>
-
-                                            <Button
-                                                type="submit"
-                                                :disabled="
-                                                    branchCreationForm.processing ||
-                                                    isCheckingBranchName ||
-                                                    branchNameValidation?.is_valid !==
-                                                        true
-                                                "
-                                            >
-                                                Create now
-                                            </Button>
-                                        </DialogFooter>
-                                    </form>
-                                </DialogContent>
-                            </Dialog>
-                        </CardHeader>
-
-                        <CardContent class="space-y-4">
-                            <div
-                                v-if="visibleRepositoryBranches.length === 0"
-                                class="border-border text-muted-foreground rounded-xl border border-dashed px-4 py-6 text-sm"
-                            >
-                                No matching branches were found across the
-                                linked repositories you can access.
-                            </div>
-
-                            <div v-else class="space-y-3">
-                                <div
-                                    v-for="repositoryBranch in visibleRepositoryBranches"
-                                    :key="
-                                        repositoryBranch.repository_connection
-                                            .id
-                                    "
-                                    class="border-border rounded-xl border px-4 py-4"
-                                >
-                                    <div
-                                        class="flex flex-wrap items-center gap-2"
-                                    >
-                                        <Badge variant="secondary">
-                                            {{
-                                                repositoryBranch
-                                                    .repository_connection
-                                                    .provider_label
-                                            }}
-                                        </Badge>
-                                        <span class="font-medium">
-                                            {{
-                                                repositoryBranch
-                                                    .repository_connection
-                                                    .repository_full_name
-                                            }}
-                                        </span>
+                                        </div>
                                     </div>
+                                </div>
+                            </section>
 
-                                    <p
-                                        class="text-muted-foreground mt-2 text-sm"
+                            <section
+                                class="border-outline-variant bg-surface-container-low overflow-hidden rounded border"
+                            >
+                                <div
+                                    class="border-outline-variant border-b px-4 py-3"
+                                >
+                                    <h3
+                                        class="flex items-center gap-2 text-sm font-semibold"
                                     >
-                                        {{
-                                            repositoryBranch
-                                                .repository_connection.base_url
-                                        }}
+                                        <GitPullRequest class="size-4" /> Pull
+                                        requests
+                                    </h3>
+                                    <p
+                                        class="text-muted-foreground mt-1 text-xs leading-5"
+                                    >
+                                        Detected when the source branch starts
+                                        with {{ ticket.ticket_key }}.
                                     </p>
-
+                                </div>
+                                <div class="space-y-3 p-4">
                                     <div
                                         v-if="
-                                            !repositoryBranch
-                                                .repository_connection
-                                                .has_personal_access
+                                            visibleRepositoryPullRequests.length ===
+                                            0
                                         "
-                                        class="mt-3 space-y-3"
+                                        class="border-outline-variant text-muted-foreground rounded border border-dashed px-4 py-6 text-sm"
                                     >
-                                        <p
-                                            class="text-muted-foreground text-sm"
-                                        >
-                                            Connect a matching Git account in
-                                            your user settings to inspect
-                                            branches for this repository.
-                                        </p>
-
-                                        <Button
-                                            as-child
-                                            variant="outline"
-                                            size="sm"
-                                        >
-                                            <Link :href="editGitConnections()">
-                                                Open Git connections
-                                            </Link>
-                                        </Button>
+                                        No matching pull requests were found.
                                     </div>
-
-                                    <div
-                                        v-else-if="repositoryBranch.error"
-                                        class="mt-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900 dark:border-amber-900/70 dark:bg-amber-950/40 dark:text-amber-100"
-                                    >
-                                        {{ repositoryBranch.error }}
-                                    </div>
-
                                     <div
+                                        v-for="repositoryPullRequest in visibleRepositoryPullRequests"
                                         v-else
-                                        class="mt-3 flex flex-wrap gap-2"
+                                        :key="
+                                            repositoryPullRequest
+                                                .repository_connection.id
+                                        "
+                                        class="border-outline-variant bg-background rounded border p-3"
                                     >
-                                        <Badge
-                                            v-for="branch in repositoryBranch.branches"
-                                            :key="branch.name"
-                                            variant="outline"
-                                            class="px-3 py-1"
+                                        <div
+                                            class="flex flex-wrap items-center gap-2"
                                         >
-                                            {{ branch.name }}
-                                        </Badge>
-                                    </div>
-                                </div>
-                            </div>
-                        </CardContent>
-                    </Card>
-
-                    <Card class="h-fit">
-                        <CardHeader>
-                            <CardTitle>Linked tickets</CardTitle>
-                            <CardDescription>
-                                Track cross-ticket relationships with
-                                project-defined link labels.
-                            </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 gap-2">
-                                    <Label for="ticket_link_type_id">
-                                        Link type
-                                    </Label>
-                                    <select
-                                        id="ticket_link_type_id"
-                                        name="ticket_link_type_id"
-                                        class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 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 gap-2">
-                                    <Label for="linked_ticket_id">
-                                        Linked ticket
-                                    </Label>
-                                    <select
-                                        id="linked_ticket_id"
-                                        name="linked_ticket_id"
-                                        class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 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">
-                                    Save link
-                                </Button>
-                            </Form>
-
-                            <div
-                                v-if="linkedTickets.length === 0"
-                                class="border-border text-muted-foreground rounded-xl border border-dashed px-4 py-6 text-sm"
-                            >
-                                No ticket links are configured for this ticket
-                                yet.
-                            </div>
-
-                            <div v-else class="space-y-3">
-                                <div
-                                    v-for="linkedTicket in linkedTickets"
-                                    :key="linkedTicket.id"
-                                    class="border-border rounded-xl border px-4 py-4"
-                                >
-                                    <div
-                                        class="flex flex-wrap items-center gap-2"
-                                    >
-                                        <Badge variant="secondary">
-                                            {{
-                                                linkedTicket.ticket_link_type
-                                                    .label
-                                            }}
-                                        </Badge>
-                                        <Link
-                                            :href="
-                                                showTicket({
-                                                    project: project.id,
-                                                    ticket: linkedTicket
-                                                        .linked_ticket.id,
-                                                })
+                                            <Badge variant="secondary">{{
+                                                repositoryPullRequest
+                                                    .repository_connection
+                                                    .provider_label
+                                            }}</Badge
+                                            ><span
+                                                class="text-sm font-medium"
+                                                >{{
+                                                    repositoryPullRequest
+                                                        .repository_connection
+                                                        .repository_full_name
+                                                }}</span
+                                            >
+                                        </div>
+                                        <div
+                                            v-if="
+                                                !repositoryPullRequest
+                                                    .repository_connection
+                                                    .has_personal_access
                                             "
-                                            class="text-foreground hover:text-primary font-medium transition"
+                                            class="mt-3 space-y-3"
                                         >
-                                            {{
-                                                linkedTicket.linked_ticket
-                                                    .ticket_key
-                                            }}
-                                        </Link>
+                                            <p
+                                                class="text-muted-foreground text-sm"
+                                            >
+                                                Connect a matching Git account
+                                                to inspect pull requests.
+                                            </p>
+                                            <Button
+                                                as-child
+                                                variant="outline"
+                                                size="sm"
+                                                ><Link
+                                                    :href="editGitConnections()"
+                                                    >Open Git connections</Link
+                                                ></Button
+                                            >
+                                        </div>
+                                        <div
+                                            v-else-if="
+                                                repositoryPullRequest.error
+                                            "
+                                            class="mt-3 rounded border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900 dark:border-amber-900/70 dark:bg-amber-950/40 dark:text-amber-100"
+                                        >
+                                            {{ repositoryPullRequest.error }}
+                                        </div>
+                                        <div v-else class="mt-3 space-y-2">
+                                            <a
+                                                v-for="pullRequest in repositoryPullRequest.pull_requests"
+                                                :key="pullRequest.html_url"
+                                                :href="pullRequest.html_url"
+                                                target="_blank"
+                                                rel="noreferrer"
+                                                class="border-outline-variant hover:border-primary/50 block rounded border px-3 py-2 transition"
+                                            >
+                                                <div
+                                                    class="flex items-center gap-2"
+                                                >
+                                                    <Badge variant="outline"
+                                                        >#{{
+                                                            pullRequest.number
+                                                        }}</Badge
+                                                    ><span
+                                                        class="text-sm font-medium"
+                                                        >{{
+                                                            pullRequest.title
+                                                        }}</span
+                                                    >
+                                                </div>
+                                                <p
+                                                    class="text-muted-foreground mt-1 text-xs"
+                                                >
+                                                    {{
+                                                        pullRequest.source_branch
+                                                    }}
+                                                    · {{ pullRequest.status }}
+                                                </p>
+                                            </a>
+                                        </div>
                                     </div>
-                                    <p
-                                        class="text-muted-foreground mt-2 text-sm"
-                                    >
-                                        {{ linkedTicket.linked_ticket.title }}
-                                    </p>
+                                </div>
+                            </section>
+                        </div>
+                    </CollapsibleContent>
+                </Collapsible>
 
+                <Collapsible
+                    v-slot="{ open }"
+                    class="border-outline-variant bg-card overflow-hidden rounded border"
+                >
+                    <CollapsibleTrigger as-child>
+                        <button
+                            type="button"
+                            class="hover:bg-primary/[0.025] focus-visible:ring-ring flex w-full items-center justify-between gap-4 px-4 py-3 text-left outline-none focus-visible:ring-2 focus-visible:ring-inset sm:px-5"
+                        >
+                            <div class="flex min-w-0 items-center gap-3">
+                                <Network class="text-primary size-4 shrink-0" />
+                                <div class="min-w-0">
+                                    <h2 class="text-sm font-semibold">
+                                        Relationships
+                                    </h2>
+                                    <p class="text-muted-foreground text-xs">
+                                        {{ relationshipCount }} linked or
+                                        related tickets
+                                    </p>
+                                </div>
+                            </div>
+                            <ChevronDown
+                                class="text-muted-foreground size-4 shrink-0 transition-transform"
+                                :class="open ? 'rotate-180' : ''"
+                            />
+                        </button>
+                    </CollapsibleTrigger>
+                    <CollapsibleContent>
+                        <div
+                            class="border-outline-variant grid gap-4 border-t px-4 py-4 sm:px-5 xl:grid-cols-2"
+                        >
+                            <section
+                                class="border-outline-variant bg-surface-container-low overflow-hidden rounded border"
+                            >
+                                <div
+                                    class="border-outline-variant border-b px-4 py-3"
+                                >
+                                    <h3
+                                        class="flex items-center gap-2 text-sm font-semibold"
+                                    >
+                                        <Link2 class="size-4" /> Linked tickets
+                                    </h3>
+                                    <p
+                                        class="text-muted-foreground mt-1 text-xs"
+                                    >
+                                        Project-defined cross-ticket
+                                        relationships.
+                                    </p>
+                                </div>
+                                <div class="space-y-3 p-4">
                                     <Form
-                                        v-if="canEditTicket"
+                                        v-if="
+                                            canEditTicket &&
+                                            ticketLinkTypes.length > 0 &&
+                                            ticketLinkOptions.length > 0
+                                        "
                                         v-bind="
-                                            ProjectTicketLinkController.destroy.form(
+                                            ProjectTicketLinkController.store.form(
                                                 {
                                                     project: project.id,
                                                     ticket: ticket.id,
-                                                    ticketLink: linkedTicket.id,
                                                 },
                                             )
                                         "
-                                        class="mt-3 flex justify-end"
-                                        v-slot="{ processing: deleting }"
+                                        class="border-outline-variant grid gap-3 rounded border border-dashed p-3"
+                                        v-slot="{ errors, processing }"
                                     >
+                                        <div class="grid gap-1.5">
+                                            <Label for="ticket_link_type_id"
+                                                >Link type</Label
+                                            ><select
+                                                id="ticket_link_type_id"
+                                                name="ticket_link_type_id"
+                                                class="border-input bg-background rounded border px-3 py-2 text-sm"
+                                            >
+                                                <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 gap-1.5">
+                                            <Label for="linked_ticket_id"
+                                                >Ticket</Label
+                                            ><select
+                                                id="linked_ticket_id"
+                                                name="linked_ticket_id"
+                                                class="border-input bg-background rounded border px-3 py-2 text-sm"
+                                            >
+                                                <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"
-                                            variant="destructive"
                                             size="sm"
-                                            :disabled="deleting"
+                                            :disabled="processing"
+                                            >Save link</Button
                                         >
-                                            Remove
-                                        </Button>
                                     </Form>
-                                </div>
-                            </div>
-                        </CardContent>
-                    </Card>
-
-                    <Card class="h-fit">
-                        <CardHeader>
-                            <CardTitle>Pull requests</CardTitle>
-                            <CardDescription>
-                                Matching pull requests are detected from linked
-                                repositories by checking whether the source
-                                branch starts with this ticket key.
-                            </CardDescription>
-                        </CardHeader>
-
-                        <CardContent class="space-y-4">
-                            <div
-                                v-if="
-                                    visibleRepositoryPullRequests.length === 0
-                                "
-                                class="border-border text-muted-foreground rounded-xl border border-dashed px-4 py-6 text-sm"
-                            >
-                                No matching pull requests were found across the
-                                linked repositories you can access.
-                            </div>
-
-                            <div v-else class="space-y-3">
-                                <div
-                                    v-for="repositoryPullRequest in visibleRepositoryPullRequests"
-                                    :key="
-                                        repositoryPullRequest
-                                            .repository_connection.id
-                                    "
-                                    class="border-border rounded-xl border px-4 py-4"
-                                >
                                     <div
-                                        class="flex flex-wrap items-center gap-2"
+                                        v-if="linkedTickets.length === 0"
+                                        class="border-outline-variant text-muted-foreground rounded border border-dashed px-4 py-6 text-sm"
                                     >
-                                        <Badge variant="secondary">
-                                            {{
-                                                repositoryPullRequest
-                                                    .repository_connection
-                                                    .provider_label
-                                            }}
-                                        </Badge>
-                                        <span class="font-medium">
-                                            {{
-                                                repositoryPullRequest
-                                                    .repository_connection
-                                                    .repository_full_name
-                                            }}
-                                        </span>
+                                        No ticket links are configured yet.
                                     </div>
-
-                                    <p
-                                        class="text-muted-foreground mt-2 text-sm"
-                                    >
-                                        {{
-                                            repositoryPullRequest
-                                                .repository_connection.base_url
-                                        }}
-                                    </p>
-
                                     <div
-                                        v-if="
-                                            !repositoryPullRequest
-                                                .repository_connection
-                                                .has_personal_access
-                                        "
-                                        class="mt-3 space-y-3"
+                                        v-for="linkedTicket in linkedTickets"
+                                        v-else
+                                        :key="linkedTicket.id"
+                                        class="border-outline-variant bg-background rounded border p-3"
                                     >
-                                        <p
-                                            class="text-muted-foreground text-sm"
-                                        >
-                                            Connect a matching Git account in
-                                            your user settings to inspect pull
-                                            requests for this repository.
-                                        </p>
-
-                                        <Button
-                                            as-child
-                                            variant="outline"
-                                            size="sm"
-                                        >
-                                            <Link :href="editGitConnections()">
-                                                Open Git connections
-                                            </Link>
-                                        </Button>
-                                    </div>
-
-                                    <div
-                                        v-else-if="repositoryPullRequest.error"
-                                        class="mt-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900 dark:border-amber-900/70 dark:bg-amber-950/40 dark:text-amber-100"
-                                    >
-                                        {{ repositoryPullRequest.error }}
-                                    </div>
-
-                                    <div v-else class="mt-3 space-y-3">
                                         <div
-                                            v-for="pullRequest in repositoryPullRequest.pull_requests"
-                                            :key="pullRequest.html_url"
-                                            class="border-border/70 rounded-xl border px-4 py-3"
+                                            class="flex flex-wrap items-center gap-2"
                                         >
-                                            <div
-                                                class="flex flex-wrap items-center gap-2"
+                                            <Badge variant="secondary">{{
+                                                linkedTicket.ticket_link_type
+                                                    .label
+                                            }}</Badge
+                                            ><Link
+                                                :href="
+                                                    showTicket({
+                                                        project: project.id,
+                                                        ticket: linkedTicket
+                                                            .linked_ticket.id,
+                                                    })
+                                                "
+                                                class="hover:text-primary text-sm font-semibold"
+                                                >{{
+                                                    linkedTicket.linked_ticket
+                                                        .ticket_key
+                                                }}</Link
                                             >
-                                                <Badge variant="outline">
-                                                    #{{ pullRequest.number }}
-                                                </Badge>
-                                                <Badge variant="secondary">
-                                                    {{ pullRequest.status }}
-                                                </Badge>
-                                                <a
-                                                    :href="pullRequest.html_url"
-                                                    target="_blank"
-                                                    rel="noreferrer"
-                                                    class="text-foreground hover:text-primary font-medium transition"
-                                                >
-                                                    {{ pullRequest.title }}
-                                                </a>
-                                            </div>
-                                            <p
-                                                class="text-muted-foreground mt-2 text-sm"
-                                            >
-                                                Source branch:
-                                                {{ pullRequest.source_branch }}
-                                            </p>
                                         </div>
+                                        <p
+                                            class="text-muted-foreground mt-1 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,
+                                                    },
+                                                )
+                                            "
+                                            class="mt-2 flex justify-end"
+                                            v-slot="{ processing: deleting }"
+                                            ><Button
+                                                type="submit"
+                                                variant="destructive"
+                                                size="sm"
+                                                :disabled="deleting"
+                                                >Remove</Button
+                                            ></Form
+                                        >
                                     </div>
                                 </div>
-                            </div>
-                        </CardContent>
-                    </Card>
+                            </section>
 
-                    <Card v-if="ticket.ticket_type?.is_parent" class="h-fit">
-                        <CardHeader>
-                            <CardTitle>Child tickets</CardTitle>
-                            <CardDescription>
-                                Parent tickets expose their full child tree
-                                here, including nested parent chains.
-                            </CardDescription>
-                        </CardHeader>
-
-                        <CardContent>
-                            <div
-                                v-if="childTicketTree.length === 0"
-                                class="border-border text-muted-foreground rounded-xl border border-dashed px-4 py-6 text-sm"
+                            <section
+                                class="border-outline-variant bg-surface-container-low overflow-hidden rounded border"
                             >
-                                No child tickets are assigned to this ticket
-                                yet.
-                            </div>
-
-                            <TicketTreeList
-                                v-else
-                                :nodes="childTicketTree"
-                                :project-id="project.id"
-                            />
-                        </CardContent>
-                    </Card>
-
-                    <Card
-                        v-else-if="currentParentTicket !== null"
-                        class="h-fit"
-                    >
-                        <CardHeader>
-                            <CardTitle>Parent ticket</CardTitle>
-                            <CardDescription>
-                                This ticket belongs to the parent shown here.
-                            </CardDescription>
-                        </CardHeader>
-
-                        <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>Worklog</CardTitle>
-                            <CardDescription>
-                                Every tracked ticket change is recorded with
-                                actor and timestamp.
-                            </CardDescription>
-                        </CardHeader>
-
-                        <CardContent class="space-y-4">
-                            <div
-                                v-if="
-                                    (ticket.worklog_entries?.length ?? 0) === 0
-                                "
-                                class="border-border text-muted-foreground rounded-xl border border-dashed px-4 py-6 text-sm"
-                            >
-                                No worklog entries exist for this ticket yet.
-                            </div>
-
-                            <div v-else class="flex flex-col gap-4">
                                 <div
+                                    class="border-outline-variant border-b px-4 py-3"
+                                >
+                                    <h3 class="text-sm font-semibold">
+                                        Ticket hierarchy
+                                    </h3>
+                                    <p
+                                        class="text-muted-foreground mt-1 text-xs"
+                                    >
+                                        Parent and child relationships for this
+                                        ticket.
+                                    </p>
+                                </div>
+                                <div class="p-4">
+                                    <div v-if="ticket.ticket_type?.is_parent">
+                                        <div
+                                            v-if="childTicketTree.length === 0"
+                                            class="border-outline-variant text-muted-foreground rounded border border-dashed px-4 py-6 text-sm"
+                                        >
+                                            No child tickets are assigned yet.
+                                        </div>
+                                        <TicketTreeList
+                                            v-else
+                                            :nodes="childTicketTree"
+                                            :project-id="project.id"
+                                        />
+                                    </div>
+                                    <Link
+                                        v-else-if="currentParentTicket !== null"
+                                        :href="
+                                            showTicket({
+                                                project: project.id,
+                                                ticket: currentParentTicket.id,
+                                            })
+                                        "
+                                        class="border-outline-variant hover:border-primary/50 bg-background block rounded border p-3 transition"
+                                        ><p class="text-sm font-semibold">
+                                            {{ currentParentTicket.ticket_key }}
+                                        </p>
+                                        <p
+                                            class="text-muted-foreground mt-1 text-sm"
+                                        >
+                                            {{ currentParentTicket.title }}
+                                        </p></Link
+                                    >
+                                    <div
+                                        v-else
+                                        class="border-outline-variant text-muted-foreground rounded border border-dashed px-4 py-6 text-sm"
+                                    >
+                                        This ticket has no parent or child
+                                        tickets.
+                                    </div>
+                                </div>
+                            </section>
+                        </div>
+                    </CollapsibleContent>
+                </Collapsible>
+
+                <Collapsible
+                    v-slot="{ open }"
+                    class="border-outline-variant bg-card overflow-hidden rounded border"
+                >
+                    <CollapsibleTrigger as-child>
+                        <button
+                            type="button"
+                            class="hover:bg-primary/[0.025] focus-visible:ring-ring flex w-full items-center justify-between gap-4 px-4 py-3 text-left outline-none focus-visible:ring-2 focus-visible:ring-inset sm:px-5"
+                        >
+                            <div class="flex min-w-0 items-center gap-3">
+                                <Clock3 class="text-primary size-4 shrink-0" />
+                                <div class="min-w-0">
+                                    <h2 class="text-sm font-semibold">
+                                        Worklog
+                                    </h2>
+                                    <p class="text-muted-foreground text-xs">
+                                        {{ worklogCount }} recorded changes
+                                    </p>
+                                </div>
+                            </div>
+                            <ChevronDown
+                                class="text-muted-foreground size-4 shrink-0 transition-transform"
+                                :class="open ? 'rotate-180' : ''"
+                            />
+                        </button>
+                    </CollapsibleTrigger>
+                    <CollapsibleContent>
+                        <div
+                            class="border-outline-variant border-t px-4 py-4 sm:px-5"
+                        >
+                            <div
+                                v-if="worklogCount === 0"
+                                class="border-outline-variant text-muted-foreground rounded border border-dashed px-4 py-6 text-sm"
+                            >
+                                No worklog entries exist yet.
+                            </div>
+                            <ol
+                                v-else
+                                class="border-outline-variant relative space-y-0 border-l pl-5"
+                            >
+                                <li
                                     v-for="worklogEntry in ticket.worklog_entries"
                                     :key="worklogEntry.id"
-                                    class="border-border rounded-xl border px-4 py-4"
+                                    class="relative pb-5 last:pb-0"
                                 >
+                                    <span
+                                        class="border-outline-variant bg-background absolute -left-[1.45rem] top-1.5 size-2.5 rounded-full border"
+                                    />
                                     <div
                                         class="flex flex-wrap items-center gap-2"
                                     >
-                                        <Badge variant="outline">
-                                            {{ worklogEntry.entry_type }}
-                                        </Badge>
-                                        <span
-                                            class="text-foreground text-sm font-medium"
+                                        <Badge variant="outline">{{
+                                            worklogEntry.entry_type
+                                        }}</Badge
+                                        ><span class="text-sm font-medium">{{
+                                            worklogEntry.actor?.name ?? 'System'
+                                        }}</span
+                                        ><span
+                                            class="text-muted-foreground text-xs"
+                                            >{{
+                                                formatDateTime(
+                                                    worklogEntry.created_at,
+                                                )
+                                            }}</span
                                         >
-                                            {{
-                                                worklogEntry.actor?.name ??
-                                                'System'
-                                            }}
-                                        </span>
                                     </div>
-                                    <p class="text-foreground mt-3 text-sm">
+                                    <p class="mt-2 text-sm">
                                         {{ worklogEntry.summary }}
                                     </p>
-                                    <p
-                                        class="text-muted-foreground mt-2 text-xs"
-                                    >
-                                        {{
-                                            formatDateTime(
-                                                worklogEntry.created_at,
-                                            )
-                                        }}
-                                    </p>
-                                </div>
-                            </div>
-                        </CardContent>
-                    </Card>
-                </div>
+                                </li>
+                            </ol>
+                        </div>
+                    </CollapsibleContent>
+                </Collapsible>
             </div>
         </div>
     </AppLayout>
diff --git a/resources/js/pages/projects/TicketCreate.vue b/resources/js/pages/projects/TicketCreate.vue
index eb1d024..ba76eee 100644
--- a/resources/js/pages/projects/TicketCreate.vue
+++ b/resources/js/pages/projects/TicketCreate.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { Head, Link, useForm } from '@inertiajs/vue3';
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import ProjectTicketController from '@/actions/App/Http/Controllers/ProjectTicketController';
 import Heading from '@/components/Heading.vue';
 import InputError from '@/components/InputError.vue';
+import AcceptanceCriteriaEditor from '@/components/projects/AcceptanceCriteriaEditor.vue';
 import ProjectTabs from '@/components/projects/ProjectTabs.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -17,10 +18,7 @@ import {
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import AppLayout from '@/layouts/AppLayout.vue';
-import {
-    buildAcceptanceCriteria,
-    parseChecklistLines,
-} from '@/lib/acceptance-criteria';
+import { emptyAcceptanceCriteria } from '@/lib/acceptance-criteria';
 import { index as backlogIndex } from '@/routes/projects/backlog';
 import { index as boardIndex } from '@/routes/projects/board';
 import { index } from '@/routes/projects/index';
@@ -63,12 +61,8 @@ const hasTicketMetadata =
     props.ticketPriorities.length > 0 &&
     props.ticketStatusOptions.length > 0;
 
-const acceptanceCriteriaChecklist = ref('');
-
 const form = useForm({
-    acceptance_criteria: buildAcceptanceCriteria(
-        acceptanceCriteriaChecklist.value,
-    ),
+    acceptance_criteria: emptyAcceptanceCriteria(),
     assignee_user_id: '',
     description: '',
     parent_ticket_id: '',
@@ -81,10 +75,6 @@ const form = useForm({
     title: '',
 });
 
-const acceptanceCriteriaPreviewItems = computed(() =>
-    parseChecklistLines(acceptanceCriteriaChecklist.value),
-);
-
 const acceptanceCriteriaError = computed(() => {
     return (
         form.errors.acceptance_criteria ??
@@ -96,10 +86,6 @@ const acceptanceCriteriaError = computed(() => {
 });
 
 const submit = (): void => {
-    form.acceptance_criteria = buildAcceptanceCriteria(
-        acceptanceCriteriaChecklist.value,
-    );
-
     form.submit(ProjectTicketController.store({ project: props.project.id }), {
         preserveScroll: true,
     });
@@ -200,64 +186,14 @@ const ticketStatusLabel = (ticketStatus: TicketStatusModel): string => {
                                     />
                                 </div>
 
-                                <div class="grid gap-4">
-                                    <div class="grid gap-2">
-                                        <Label
-                                            for="acceptance_criteria_checklist"
-                                        >
-                                            Acceptance criteria checklist
-                                        </Label>
-                                        <textarea
-                                            id="acceptance_criteria_checklist"
-                                            v-model="
-                                                acceptanceCriteriaChecklist
-                                            "
-                                            rows="6"
-                                            :disabled="form.processing"
-                                            class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 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"
-                                            placeholder="[ ] User can sign in&#10;  [x] Validation is shown for invalid credentials"
-                                        />
-                                        <p
-                                            class="text-muted-foreground text-xs"
-                                        >
-                                            Use <code>[ ]</code> /
-                                            <code>[x]</code> for checklist
-                                            items. Indent with two spaces for
-                                            nested steps.
-                                        </p>
-                                        <InputError
-                                            :message="acceptanceCriteriaError"
-                                        />
-                                    </div>
-
-                                    <div
-                                        v-if="
-                                            acceptanceCriteriaPreviewItems.length >
-                                            0
-                                        "
-                                        class="border-border rounded-xl border p-4 text-sm"
-                                    >
-                                        <p class="mb-3 font-medium">
-                                            Checklist preview
-                                        </p>
-                                        <ul class="space-y-2">
-                                            <li
-                                                v-for="(
-                                                    item, index
-                                                ) in acceptanceCriteriaPreviewItems"
-                                                :key="index"
-                                                :style="{
-                                                    marginLeft: `${item.indent * 1.25}rem`,
-                                                }"
-                                                class="flex items-start gap-2"
-                                            >
-                                                <span class="mt-0.5">{{
-                                                    item.checked ? '☑' : '☐'
-                                                }}</span>
-                                                <span>{{ item.text }}</span>
-                                            </li>
-                                        </ul>
-                                    </div>
+                                <div class="grid gap-2">
+                                    <Label>Acceptance criteria</Label>
+                                    <AcceptanceCriteriaEditor
+                                        v-model="form.acceptance_criteria"
+                                        editable
+                                        :disabled="form.processing"
+                                        :error="acceptanceCriteriaError"
+                                    />
                                 </div>
                             </div>
 
diff --git a/resources/js/types/acceptance-criteria-editor.ts b/resources/js/types/acceptance-criteria-editor.ts
new file mode 100644
index 0000000..71e73fc
--- /dev/null
+++ b/resources/js/types/acceptance-criteria-editor.ts
@@ -0,0 +1,28 @@
+import type { AcceptanceCriteriaModel } from '@/types/models/acceptance-criteria-model';
+
+export type AcceptanceCriteriaCommitSource =
+    | 'check'
+    | 'delete'
+    | 'indent'
+    | 'move'
+    | 'text';
+
+export type AcceptanceCriteriaEditorCommit = {
+    items: AcceptanceCriteriaModel;
+    source: AcceptanceCriteriaCommitSource;
+};
+
+export type AcceptanceCriteriaSaveState = 'error' | 'idle' | 'saved' | 'saving';
+
+export type AcceptanceCriteriaEditorProps = {
+    disabled?: boolean;
+    editable: boolean;
+    error?: string;
+    modelValue: AcceptanceCriteriaModel;
+    saveState?: AcceptanceCriteriaSaveState;
+};
+
+export type AcceptanceCriteriaEditorEmits = {
+    (event: 'commit', value: AcceptanceCriteriaEditorCommit): void;
+    (event: 'update:modelValue', value: AcceptanceCriteriaModel): void;
+};
diff --git a/resources/js/types/index.ts b/resources/js/types/index.ts
index 0620dac..9f91ca0 100644
--- a/resources/js/types/index.ts
+++ b/resources/js/types/index.ts
@@ -1,7 +1,9 @@
 export * from './auth';
+export * from './acceptance-criteria-editor';
 export * from './layout';
 export * from './navigation';
 export * from './notification-settings';
 export * from './page-props';
 export * from './project-navigation';
+export * from './ticket-inline-edit';
 export * from './ui';
diff --git a/resources/js/types/ticket-inline-edit.ts b/resources/js/types/ticket-inline-edit.ts
new file mode 100644
index 0000000..b47bca8
--- /dev/null
+++ b/resources/js/types/ticket-inline-edit.ts
@@ -0,0 +1,76 @@
+import type { AcceptanceCriteriaModel } from '@/types/models/acceptance-criteria-model';
+
+export type InlineTextEditorValue = number | string | null;
+
+export type InlineTextEditorProps = {
+    disabled?: boolean;
+    editable: boolean;
+    error?: string;
+    inputType?: 'number' | 'text';
+    multiline?: boolean;
+    placeholder: string;
+    saveState?: 'error' | 'idle' | 'saved' | 'saving';
+    value: InlineTextEditorValue;
+    variant?: 'body' | 'property' | 'title';
+};
+
+export type InlineTextEditorEmits = {
+    (event: 'commit'): void;
+    (event: 'update:value', value: InlineTextEditorValue): void;
+};
+
+export type InlineSaveStatusProps = {
+    error?: string;
+    state: 'error' | 'idle' | 'saved' | 'saving';
+};
+
+export type TicketEditableField =
+    | 'acceptance_criteria'
+    | 'assignee_user_id'
+    | 'author_user_id'
+    | 'blocked_comment'
+    | 'description'
+    | 'is_blocked'
+    | 'parent_ticket_id'
+    | 'story_points'
+    | 'ticket_priority_id'
+    | 'ticket_type_id'
+    | 'title'
+    | `field-${number}`;
+
+export type ProjectTicketFieldValuePayload = {
+    ticket_field_definition_id: number;
+    value_number: number | string | null;
+    value_user_id: number | string | null;
+};
+
+export type ProjectTicketUpdatePayload = {
+    acceptance_criteria: AcceptanceCriteriaModel;
+    assignee_user_id: number | string | null;
+    author_user_id: number | string | null;
+    blocked_comment: string;
+    description: string;
+    field_values: ProjectTicketFieldValuePayload[];
+    is_blocked: boolean;
+    parent_ticket_id: number | string | null;
+    story_points: number | string | null;
+    ticket_priority_id: number | string;
+    ticket_type_id: number | string;
+    title: string;
+};
+
+export type TicketAutosaveResponse = {
+    acceptance_criteria: AcceptanceCriteriaModel;
+    message: string;
+    updated: boolean;
+};
+
+export type TicketAutosaveErrorResponse = {
+    errors?: Record<string, string[]>;
+    message?: string;
+};
+
+export type QueuedTicketAutosave = {
+    field: TicketEditableField;
+    payload: ProjectTicketUpdatePayload;
+};
diff --git a/tests/Feature/Projects/ProjectTicketControllerTest.php b/tests/Feature/Projects/ProjectTicketControllerTest.php
index 395f846..956adbe 100644
--- a/tests/Feature/Projects/ProjectTicketControllerTest.php
+++ b/tests/Feature/Projects/ProjectTicketControllerTest.php
@@ -868,11 +868,84 @@ class ProjectTicketControllerTest extends TestCase
             ])
             ->assertOk()
             ->assertJson([
+                'acceptance_criteria' => [],
                 'message' => 'No ticket changes were detected.',
                 'updated' => false,
             ]);
     }
 
+    public function test_ticket_update_json_returns_stable_acceptance_criteria_ids(): void
+    {
+        $editor = User::factory()->create();
+        $project = Project::factory()->create([
+            'key' => 'CORE',
+        ]);
+
+        app(InitializeProjectTicketMetadata::class)->handle($project);
+
+        $priority = $project->ticketPriorities()->firstOrFail();
+        $ticketType = $this->nonParentType($project);
+        $ticket = Ticket::factory()->create([
+            'project_id' => $project->id,
+            'sequence_number' => 1,
+            'ticket_key' => 'CORE-1',
+            'ticket_priority_id' => $priority->id,
+            'ticket_type_id' => $ticketType->id,
+            'title' => 'Acceptance criteria inline editor test',
+        ]);
+        $existingCriterion = AcceptanceCriterion::query()->create([
+            'ticket_id' => $ticket->id,
+            'parent_acceptance_criterion_id' => null,
+            'position' => 0,
+            'text' => 'Existing criterion',
+            'is_checked' => false,
+        ]);
+
+        $this->syncProjectPermissions($project, $editor, ['write', 'view']);
+
+        $response = $this->actingAs($editor)
+            ->withHeaders([
+                'Accept' => 'application/json',
+                'X-Requested-With' => 'XMLHttpRequest',
+            ])
+            ->patch(
+                route('projects.tickets.update', [$project, $ticket]),
+                $this->updatePayload($ticket, [
+                    'acceptance_criteria' => [
+                        [
+                            'id' => $existingCriterion->id,
+                            'text' => 'Existing criterion',
+                            'checked' => true,
+                            'indent' => 0,
+                        ],
+                        [
+                            'text' => 'New nested criterion',
+                            'checked' => false,
+                            'indent' => 1,
+                        ],
+                    ],
+                ]),
+            )
+            ->assertOk()
+            ->assertJsonPath('acceptance_criteria.0.id', $existingCriterion->id)
+            ->assertJsonPath('acceptance_criteria.0.checked', true)
+            ->assertJsonPath('acceptance_criteria.0.indent', 0)
+            ->assertJsonPath('acceptance_criteria.0.text', 'Existing criterion')
+            ->assertJsonPath('acceptance_criteria.1.checked', false)
+            ->assertJsonPath('acceptance_criteria.1.indent', 1)
+            ->assertJsonPath('acceptance_criteria.1.text', 'New nested criterion')
+            ->assertJsonPath('message', 'CORE-1 was updated.')
+            ->assertJsonPath('updated', true);
+
+        $newCriterionId = AcceptanceCriterion::query()
+            ->where('ticket_id', $ticket->id)
+            ->where('text', 'New nested criterion')
+            ->value('id');
+
+        $this->assertNotNull($newCriterionId);
+        $response->assertJsonPath('acceptance_criteria.1.id', $newCriterionId);
+    }
+
     public function test_ticket_update_persists_explicit_child_acceptance_criteria_toggle_states(): void
     {
         $editor = User::factory()->create();