Merge pull request 'KAN-42: Rebuild ticket types, priorities and display settings' (#137 ) from feature/KAN-42-ticket-types-priorities-display into main

Reviewed-on: #137
feat(KAN-42): rebuild ticket types priorities and display settings
2026-09-15 14:05:51 +00:00 · 2026-09-15 16:05:30 +02:00 · 2026-09-15 14:05:14 +00:00 · 2026-09-15 16:05:06 +02:00 · 2026-09-15 14:04:52 +00:00 · 2026-09-15 16:04:05 +02:00
170 changed files with 22240 additions and 14637 deletions
@@ -33,9 +33,6 @@
 vendor
 **/.DS_Store
 .editorconfig
-.env.example
-.env.mariadb
-.env.mariadb.example
 .env.production
 LICENSE
 README.md
@@ -1,4 +0,0 @@
-MARIADB_DATABASE=kanbangit
-MARIADB_USER=kanbangit
-MARIADB_PASSWORD=
-MARIADB_ROOT_PASSWORD=
@@ -2,7 +2,13 @@ name: CI/CD

 on:
  push:
+    branches:
+      - main
+    tags:
+      - "v*"
  pull_request:
+    branches:
+      - main

 permissions:
  contents: read
@@ -11,9 +17,19 @@ env:
  REGISTRY: git.twyco.de

 jobs:
-  test_and_check_app:
-    name: test_and_check_app
+  preconditions:
+    if: >
+      !(contains(github.event.head_commit.message, '[no-ci]') || contains(github.event.head_commit.message, '[skip-ci]'))
    runs-on: ubuntu-latest
+    steps:
+      - name: Conditions met
+        run: |
+          echo "Conditions for CI/CD are met. Proceeding with the workflow."
+
+  test_and_check_app:
+    runs-on: ubuntu-latest
+    needs:
+      - preconditions
    steps:
      - name: Check out repository
        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
@@ -27,6 +43,7 @@ jobs:
      github.event_name == 'push' &&
      (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/'))
    needs:
+      - preconditions
      - test_and_check_app
    runs-on: ubuntu-latest
    steps:
@@ -55,12 +55,14 @@ COPY --from=node_binary /usr/local/ /usr/local/
 COPY . /var/www

 RUN composer install --prefer-dist --no-interaction --no-progress \
-    && npm ci \
-    && npm run build
+    && corepack enable pnpm \
+    && pnpm install --frozen-lockfile \
+    && pnpm run build

 FROM build AS test

-RUN touch .env \
+RUN cp .env.example .env \
+    && php artisan key:generate\
    && composer audit --locked --no-interaction \
    && COMPOSER_ALLOW_SUPERUSER=1 composer ci:check

@@ -41,8 +41,8 @@ class ListAssignedTicketsByVisibleProject
            ->where('assignee_user_id', $assignee->id)
            ->whereIn('project_id', $visibleProjectIds)
            ->with([
+                'acceptanceCriteria',
                'assignee',
-                'project',
                'ticketPriority',
                'ticketStatus.boardColumn',
                'ticketType',
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\Tickets\ListAssignedTicketsByVisibleProject;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class DashboardController extends Controller
+{
+    public function __construct(
+        private readonly ListAssignedTicketsByVisibleProject $listAssignedTicketsByVisibleProject,
+    ) {}
+
+    public function __invoke(Request $request): Response
+    {
+        $user = $request->user();
+
+        return Inertia::render('Dashboard', [
+            'assignedTicketsByProject' => $this->listAssignedTicketsByVisibleProject->handle($user, $user),
+        ]);
+    }
+}
@@ -33,5 +33,5 @@ return Application::configure(basePath: dirname(__DIR__))
        ]);
    })
    ->withExceptions(function (Exceptions $exceptions): void {
-        //
+        $exceptions->dontFlash(['api_token']);
    })->create();
@@ -47,15 +47,15 @@
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\"",
            "@php artisan key:generate",
            "@php artisan migrate --force",
-            "npm install",
-            "npm run build"
+            "pnpm install",
+            "pnpm run build"
        ],
        "dev": [
            "Composer\\Config::disableProcessTimeout",
            "@php artisan dev"
        ],
        "dev:ssr": [
-            "npm run build:ssr",
+            "pnpm run build:ssr",
            "Composer\\Config::disableProcessTimeout",
            "npx concurrently -c \"#93c5fd,#c4b5fd,#fb7185,#fdba74\" \"php artisan serve\" \"php artisan queue:listen --tries=1\" \"php artisan pail --timeout=0\" \"php artisan inertia:start-ssr\" --names=server,queue,logs,ssr --kill-others"
        ],
@@ -67,9 +67,9 @@
        ],
        "ci:check": [
            "Composer\\Config::disableProcessTimeout",
-            "npm audit --audit-level=high",
-            "npm run lint:check",
-            "npm run types:check",
+            "pnpm audit --audit-level=high",
+            "pnpm run lint:check",
+            "pnpm run types:check",
            "@test"
        ],
        "test": [
@@ -1,35 +0,0 @@
-# UI Rework 1: Englische Lokalisierungsgrundlage
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: Keine.
-
-## Ziel und Grenzen
-
-Englische Lokalisierungsgrundlage als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/app.ts](../../resources/js/app.ts); [resources/js/ssr.ts](../../resources/js/ssr.ts); [resources/js/types](../../resources/js/types). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Eine zentrale Übersetzungsstruktur für Vue einführen.
-2. Englischen Katalog, Interpolation, Pluralformen und Formatierung festlegen.
-3. Serverseitige Validierungstexte einheitlich Englisch halten.
-
-## Akzeptanzkriterien
-
- [ ] Neue UI-Texte verwenden Schlüssel.
- [ ] Fehlende Schlüssel fallen im Test auf.
- [ ] Spätere Sprachen benötigen keine Änderungen an Komponenten.
-
-## Prüfung
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,39 +0,0 @@
-# UI Rework 10: Persönliches Dashboard mit vorhandenen Daten
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 8](epic-1-issue-8.md), [Issue 11](epic-1-issue-11.md)
-
-## Ziel und Grenzen
-
-Persönliches Dashboard mit vorhandenen Daten als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/Dashboard.vue](../../resources/js/pages/Dashboard.vue); [app/Actions/Tickets/ListAssignedTicketsByVisibleProject.php](../../app/Actions/Tickets/ListAssignedTicketsByVisibleProject.php); [routes/web.php](../../routes/web.php). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-Relevanter Stitch-Screen: Persönliches Dashboard — 30b69ed84e5c4bdf8cd3fe26d7a9e803. Zugriff über Stitch-MCP, Projekt 9754281177402648015.
-
-## Implementierungsweg
-
-1. Dashboard aus zugewiesenen Tickets und sichtbaren Projekten aufbauen.
-2. Vorhandene Action über einen Inertia-Controller und Resources anbinden.
-3. Aus dem Mockup nicht belegbare Kennzahlen und Aktivitätsfeeds weglassen.
-
-## Akzeptanzkriterien
-
- [ ] Keine Platzhalterdaten.
- [ ] Keine fremden Tickets.
- [ ] Leere und gefüllte Dashboards funktionieren.
- [ ] Neue Datenweitergabe ist durch Featuretests abgesichert.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/DashboardTest.php](../../tests/Feature/DashboardTest.php), [tests/Feature/Api/AssignedTicketsApiTest.php](../../tests/Feature/Api/AssignedTicketsApiTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,36 +0,0 @@
-# UI Rework 11: Ticketkarten und wiederverwendbare Ticketlisten
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 3](epic-1-issue-3.md)
-
-## Ziel und Grenzen
-
-Ticketkarten und wiederverwendbare Ticketlisten als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/components](../../resources/js/components); [resources/js/types/models/ticket-model.ts](../../resources/js/types/models/ticket-model.ts). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-Relevanter Stitch-Screen: Board View — 1a8363ad911a494f92cc4468955ce2f2. Zugriff über Stitch-MCP, Projekt 9754281177402648015.
-
-## Implementierungsweg
-
-1. Neue Karten und Listenzeilen mit Ticketkey, Titel, Typ, Priorität, Zuweisung und Blockerzustand entwickeln.
-2. Darstellung mit und ohne optionale Daten definieren.
-3. Gemeinsame Props und Ereignisse für Board, Backlog und Dashboard festlegen. Ticketlinks über Wayfinder aufbauen und Fokusführung sowie Touch-Ziele prüfen; die Komponenten dürfen keine eigenen Datenabfragen auslösen.
-
-## Akzeptanzkriterien
-
- [ ] Lange Titel bleiben bedienbar.
- [ ] Prioritäten und Status stammen aus Projektdaten.
- [ ] Links, Fokus und Touch-Ziele funktionieren.
-
-## Prüfung
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,38 +0,0 @@
-# UI Rework 12: Boardansicht für Desktop und Mobilgeräte
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 4](epic-1-issue-4.md), [Issue 8](epic-1-issue-8.md), [Issue 11](epic-1-issue-11.md)
-
-## Ziel und Grenzen
-
-Boardansicht für Desktop und Mobilgeräte als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/projects/Board.vue](../../resources/js/pages/projects/Board.vue); [app/Actions/Projects/BuildProjectBoardPayload.php](../../app/Actions/Projects/BuildProjectBoardPayload.php); [app/Http/Resources/BoardColumnResource.php](../../app/Http/Resources/BoardColumnResource.php). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-Relevanter Stitch-Screen: Board View — 1a8363ad911a494f92cc4468955ce2f2. Zugriff über Stitch-MCP, Projekt 9754281177402648015.
-
-## Implementierungsweg
-
-1. Horizontales Board mit konfigurierten Spalten neu bauen.
-2. Mobil eine Spalte mit Auswahl anbieten.
-3. Statusunterteilung, Zähler, Leerzustände und vorhandene Statusauswahl darstellen.
-
-## Akzeptanzkriterien
-
- [ ] Beliebige Spaltenanzahl funktioniert.
- [ ] Mehrere Status pro Spalte bleiben sichtbar.
- [ ] Board und Backlog behalten ihre bestehende fachliche Trennung.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/Projects/ProjectBoardControllerTest.php](../../tests/Feature/Projects/ProjectBoardControllerTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,40 +0,0 @@
-# UI Rework 13: Drag-and-drop für bestehende Statuswechsel
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 5](epic-1-issue-5.md), [Issue 12](epic-1-issue-12.md)
-
-## Ziel und Grenzen
-
-Drag-and-drop für bestehende Statuswechsel als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/projects/Board.vue](../../resources/js/pages/projects/Board.vue); [app/Http/Requests/MoveProjectTicketRequest.php](../../app/Http/Requests/MoveProjectTicketRequest.php); [app/Actions/Tickets/MoveProjectTicket.php](../../app/Actions/Tickets/MoveProjectTicket.php). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-Relevanter Stitch-Screen: Board View — 1a8363ad911a494f92cc4468955ce2f2. Zugriff über Stitch-MCP, Projekt 9754281177402648015.
-
-## Implementierungsweg
-
-1. Ziehen per Maus und Touch ergänzen.
-2. Zulässige Ziele aus Workflowdaten ableiten.
-3. Bei mehreren Zielstatus Auswahl zeigen.
-4. Vorhandenen Statusendpunkt über Wayfinder verwenden und Fehler zurückrollen.
-
-## Akzeptanzkriterien
-
- [ ] Unzulässige Ziele sind gesperrt.
- [ ] Alternative Tastatur-/Menübedienung bleibt möglich.
- [ ] Kein doppeltes Worklog.
- [ ] Keine persistierte freie Kartenreihenfolge.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/Projects/ProjectBoardControllerTest.php](../../tests/Feature/Projects/ProjectBoardControllerTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,37 +0,0 @@
-# UI Rework 14: Backlog und Ticketbaum
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 4](epic-1-issue-4.md), [Issue 11](epic-1-issue-11.md)
-
-## Ziel und Grenzen
-
-Backlog und Ticketbaum als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/projects/Backlog.vue](../../resources/js/pages/projects/Backlog.vue); [resources/js/components/TicketTreeList.vue](../../resources/js/components/TicketTreeList.vue); [app/Actions/Projects/BuildProjectBacklogPayload.php](../../app/Actions/Projects/BuildProjectBacklogPayload.php). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Backlog mit vorhandenen Filtern und Hierarchie neu darstellen.
-2. Eltern-Kind-Beziehungen, einklappbare Ebenen und vorhandene Aktionen integrieren.
-3. Mobile Listenansicht erstellen.
-
-## Akzeptanzkriterien
-
- [ ] Verschachtelte Tickets und leere Treffer funktionieren.
- [ ] Berechtigungen und Statusübergänge bleiben erhalten.
- [ ] Filter verändern keine fachlichen Daten.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/Projects/ProjectBacklogTest.php](../../tests/Feature/Projects/ProjectBacklogTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,38 +0,0 @@
-# UI Rework 15: Neue Ticketdetailansicht und Seitenstruktur
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 4](epic-1-issue-4.md), [Issue 5](epic-1-issue-5.md), [Issue 11](epic-1-issue-11.md)
-
-## Ziel und Grenzen
-
-Neue Ticketdetailansicht und Seitenstruktur als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/projects/Ticket.vue](../../resources/js/pages/projects/Ticket.vue); [app/Actions/Projects/BuildProjectTicketDetailPayload.php](../../app/Actions/Projects/BuildProjectTicketDetailPayload.php). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-Relevanter Stitch-Screen: Ticket Detail View — 934e3eb46764456195f0eb627e67a363. Zugriff über Stitch-MCP, Projekt 9754281177402648015.
-
-## Implementierungsweg
-
-1. Detailansicht in klar abgegrenzte Komponenten aufteilen.
-2. Desktop-Inhalt und Metadatenbereich sowie mobile Stapelansicht neu aufbauen.
-3. Stabile Einhängepunkte für Bearbeitung, Checkliste, Beziehungen, Historie und Git definieren.
-
-## Akzeptanzkriterien
-
- [ ] Alle bestehenden Informationen bleiben zugänglich.
- [ ] Keine bestehende Funktion wird beim Umbau entfernt.
- [ ] Direkte Ticket-URLs funktionieren.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/Projects/ProjectTicketControllerTest.php](../../tests/Feature/Projects/ProjectTicketControllerTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,38 +0,0 @@
-# UI Rework 16: Ticketanlage und Bearbeitungsformulare
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 5](epic-1-issue-5.md), [Issue 15](epic-1-issue-15.md)
-
-## Ziel und Grenzen
-
-Ticketanlage und Bearbeitungsformulare als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/projects/TicketCreate.vue](../../resources/js/pages/projects/TicketCreate.vue); [resources/js/pages/projects/Ticket.vue](../../resources/js/pages/projects/Ticket.vue); [app/Http/Requests/StoreProjectTicketRequest.php](../../app/Http/Requests/StoreProjectTicketRequest.php); [app/Http/Requests/UpdateProjectTicketRequest.php](../../app/Http/Requests/UpdateProjectTicketRequest.php). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-Relevanter Stitch-Screen: Ticket Detail View — 934e3eb46764456195f0eb627e67a363. Zugriff über Stitch-MCP, Projekt 9754281177402648015.
-
-## Implementierungsweg
-
-1. Formulare für vorhandene Ticketattribute neu erstellen.
-2. Gemeinsame Feldkomponenten für Anlage und Bearbeitung verwenden.
-3. Projektkonfigurierte Felder, Autor-/Story-Point-Schalter und Validierung erhalten.
-
-## Akzeptanzkriterien
-
- [ ] Anlage und Bearbeitung speichern dieselben Attribute wie bisher.
- [ ] Fehler und ungespeicherte Änderungen sind abgedeckt.
- [ ] Gesperrte Aktionen bleiben serverseitig abgesichert.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/Projects/ProjectTicketControllerTest.php](../../tests/Feature/Projects/ProjectTicketControllerTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,38 +0,0 @@
-# UI Rework 17: Akzeptanzkriterien-Checkliste
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 16](epic-1-issue-16.md)
-
-## Ziel und Grenzen
-
-Akzeptanzkriterien-Checkliste als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/lib/acceptance-criteria.ts](../../resources/js/lib/acceptance-criteria.ts); [resources/js/types/models/acceptance-criteria-model.ts](../../resources/js/types/models/acceptance-criteria-model.ts); [resources/js/pages/projects/Ticket.vue](../../resources/js/pages/projects/Ticket.vue). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-Relevanter Stitch-Screen: Ticket Detail View — 934e3eb46764456195f0eb627e67a363. Zugriff über Stitch-MCP, Projekt 9754281177402648015.
-
-## Implementierungsweg
-
-1. Bestehende hierarchische Checkliste als neue Komponente aufbauen.
-2. Hinzufügen, Bearbeiten, Verschachteln und Abhaken entsprechend dem Bestand erhalten.
-3. In Anlage und Detail integrieren.
-
-## Akzeptanzkriterien
-
- [ ] Hierarchie und Reihenfolge bleiben beim Speichern erhalten.
- [ ] Bestehende Kriterien gehen nicht verloren.
- [ ] Touch und Tastatur funktionieren.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/Projects/ProjectTicketControllerTest.php](../../tests/Feature/Projects/ProjectTicketControllerTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,37 +0,0 @@
-# UI Rework 18: Ticketbeziehungen und Hierarchie
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 15](epic-1-issue-15.md), [Issue 16](epic-1-issue-16.md)
-
-## Ziel und Grenzen
-
-Ticketbeziehungen und Hierarchie als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/projects/Ticket.vue](../../resources/js/pages/projects/Ticket.vue); [app/Http/Controllers/ProjectTicketLinkController.php](../../app/Http/Controllers/ProjectTicketLinkController.php); [resources/js/components/TicketTreeList.vue](../../resources/js/components/TicketTreeList.vue). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Eltern-/Kindanzeige und Ticketverknüpfungen neu gestalten.
-2. Bestehende Linktypen und Richtung verwenden.
-3. Erlaubte Hinzufüge-/Entfernaktionen integrieren.
-
-## Akzeptanzkriterien
-
- [ ] Bestehende Hierarchievalidierung bleibt wirksam.
- [ ] Linkrichtung wird korrekt angezeigt.
- [ ] Kein neuer Beziehungstyp wird eingeführt.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/Projects/ProjectTicketLinkControllerTest.php](../../tests/Feature/Projects/ProjectTicketLinkControllerTest.php), [tests/Feature/Projects/ProjectTicketControllerTest.php](../../tests/Feature/Projects/ProjectTicketControllerTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,37 +0,0 @@
-# UI Rework 19: Blocker und Ticketänderungshistorie
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 15](epic-1-issue-15.md), [Issue 16](epic-1-issue-16.md)
-
-## Ziel und Grenzen
-
-Blocker und Ticketänderungshistorie als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/projects/Ticket.vue](../../resources/js/pages/projects/Ticket.vue); [resources/js/types/models/ticket-worklog-entry-model.ts](../../resources/js/types/models/ticket-worklog-entry-model.ts). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Blockieren/Entblockieren und Kommentarerfassung neu darstellen.
-2. Vorhandenes Worklog als lesbare Historie integrieren.
-3. Mobile Darstellung und lokale Datumsformatierung nutzen.
-
-## Akzeptanzkriterien
-
- [ ] Blockieren erfordert weiterhin Kommentar.
- [ ] Historie zeigt echte Ereignisse und Akteure.
- [ ] Keine neue Kommentar- oder Aktivitätsfunktion.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/Projects/ProjectTicketControllerTest.php](../../tests/Feature/Projects/ProjectTicketControllerTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,36 +0,0 @@
-# UI Rework 2: Emerald-Designsystem und Hell/Dunkel/System
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 1](epic-1-issue-1.md)
-
-## Ziel und Grenzen
-
-Emerald-Designsystem und Hell/Dunkel/System als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/css/app.css](../../resources/css/app.css); [resources/js/composables/useAppearance.ts](../../resources/js/composables/useAppearance.ts). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Farben, Typografie, Abstände, Radien und Fokuszustände aus Stitch als semantische Tokens definieren.
-2. Inter lokal ausliefern.
-3. Hell/Dunkel/System einschließlich initialem Laden umsetzen.
-
-## Akzeptanzkriterien
-
- [ ] Beide Themes sind lesbar.
- [ ] Systemwechsel aktualisieren die Ansicht.
- [ ] Reduzierte Bewegung wird berücksichtigt.
- [ ] Keine Starterkit-Optik.
-
-## Prüfung
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,38 +0,0 @@
-# UI Rework 20: Git-Bereich und Branch-Erstellung am Ticket
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 5](epic-1-issue-5.md), [Issue 15](epic-1-issue-15.md)
-
-## Ziel und Grenzen
-
-Git-Bereich und Branch-Erstellung am Ticket als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/projects/Ticket.vue](../../resources/js/pages/projects/Ticket.vue); [app/Http/Controllers/ProjectTicketBranchController.php](../../app/Http/Controllers/ProjectTicketBranchController.php); [resources/js/types/models/ticket-repository-branch-model.ts](../../resources/js/types/models/ticket-repository-branch-model.ts). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Branch-/Pull-Request-Anzeigen sowie bestehenden Branch-Erstellablauf in eigene neue Komponenten überführen.
-2. Repositoryauswahl, Namensvorschlag und vorhandene Prüfungen erhalten.
-3. Laufende Anfragen, fehlenden Git-Zugriff und Providerfehler als eigene Zustände abbilden. Den Weg zu vorhandenen Verbindungseinstellungen anbieten, Formulareingaben bei Fehlern erhalten und externe Git-Links entsprechend kennzeichnen.
-
-## Akzeptanzkriterien
-
- [ ] Fehlende Git-Verbindung und Providerfehler sind verständlich.
- [ ] Branch-Erstellung funktioniert.
- [ ] Fremde Git-Links öffnen extern.
- [ ] Bestehende Zuordnungsregeln bleiben erhalten.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/Projects/ProjectTicketBranchControllerTest.php](../../tests/Feature/Projects/ProjectTicketBranchControllerTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,37 +0,0 @@
-# UI Rework 21: Profil und Erscheinungsbild
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 4](epic-1-issue-4.md), [Issue 5](epic-1-issue-5.md)
-
-## Ziel und Grenzen
-
-Profil und Erscheinungsbild als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/settings/Profile.vue](../../resources/js/pages/settings/Profile.vue); [resources/js/pages/settings/Appearance.vue](../../resources/js/pages/settings/Appearance.vue). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Profilfelder, Avatar-Upload/Entfernen und Erscheinungsbild neu gestalten.
-2. Gemeinsame Einstellungsnavigation aufbauen.
-3. Datenschutz durch bestehende Rechte und Endpunkte erhalten.
-
-## Akzeptanzkriterien
-
- [ ] Avatar und Profiländerungen funktionieren.
- [ ] Hell/Dunkel/System bleibt nach Neustart erhalten.
- [ ] Uploadfehler und mobile Dateiauswahl sind berücksichtigt.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/Settings/ProfileUpdateTest.php](../../tests/Feature/Settings/ProfileUpdateTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,37 +0,0 @@
-# UI Rework 22: Sicherheit und Anwendungsschlüssel
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 6](epic-1-issue-6.md), [Issue 7](epic-1-issue-7.md), [Issue 21](epic-1-issue-21.md)
-
-## Ziel und Grenzen
-
-Sicherheit und Anwendungsschlüssel als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/settings/Security.vue](../../resources/js/pages/settings/Security.vue); [resources/js/pages/settings/Applications.vue](../../resources/js/pages/settings/Applications.vue); [resources/js/components/TwoFactorSetupModal.vue](../../resources/js/components/TwoFactorSetupModal.vue); [resources/js/components/TwoFactorRecoveryCodes.vue](../../resources/js/components/TwoFactorRecoveryCodes.vue). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Passwortverwaltung, 2FA-Einrichtung, Recovery-Codes und vorhandene Anwendungsschlüssel neu darstellen.
-2. Sensible Bestätigungsabläufe erhalten.
-3. Zustände vor und nach 2FA-Bestätigung sowie beim Anzeigen und Erneuern von Recovery-Codes anhand der bestehenden Endpunkte abbilden. Schlüsselanzeige und Kopierfunktion an die vorhandene Freigabelogik binden; fehlgeschlagene Bestätigungen direkt am Formular erklären.
-
-## Akzeptanzkriterien
-
- [ ] 2FA-Aktivieren/Deaktivieren und Recovery-Codes funktionieren.
- [ ] Schlüssel werden weiterhin nur nach bestehender Logik angezeigt.
- [ ] Abbruch und Fehler sind sicher.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/Settings/SecurityTest.php](../../tests/Feature/Settings/SecurityTest.php), [tests/Feature/Settings/UserApplicationTest.php](../../tests/Feature/Settings/UserApplicationTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,37 +0,0 @@
-# UI Rework 23: Persönliche Git-Verbindungen
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 21](epic-1-issue-21.md)
-
-## Ziel und Grenzen
-
-Persönliche Git-Verbindungen als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/settings/GitConnections.vue](../../resources/js/pages/settings/GitConnections.vue); [app/Http/Controllers/Settings/GitConnectionController.php](../../app/Http/Controllers/Settings/GitConnectionController.php). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Vorhandene Git-Verbindungen und Formulare neu gestalten.
-2. Provider- und Serverangaben klar darstellen.
-3. Validierungs- und Providerfehler in das neue Rückmeldesystem integrieren.
-
-## Akzeptanzkriterien
-
- [ ] Erstellen, Bearbeiten und Entfernen bleiben möglich.
- [ ] Zugangsdaten werden nicht zusätzlich offengelegt.
- [ ] Leere Listen und fehlende Berechtigungen funktionieren.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/Settings/GitConnectionTest.php](../../tests/Feature/Settings/GitConnectionTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,37 +0,0 @@
-# UI Rework 24: Allgemeine Projekteinstellungen und Vererbung
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 9](epic-1-issue-9.md), [Issue 5](epic-1-issue-5.md)
-
-## Ziel und Grenzen
-
-Allgemeine Projekteinstellungen und Vererbung als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/projects/settings/General.vue](../../resources/js/pages/projects/settings/General.vue); [resources/js/components/projects/TemplateInheritancePanel.vue](../../resources/js/components/projects/TemplateInheritancePanel.vue); [app/Http/Controllers/ProjectController.php](../../app/Http/Controllers/ProjectController.php). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Einstellungsnavigation und allgemeine Projektseite neu aufbauen.
-2. Vererbung und lokale Overrides nachvollziehbar anzeigen.
-3. Bestehende Vorlagenwechsel-/Reset- und Löschbestätigungen erhalten.
-
-## Akzeptanzkriterien
-
- [ ] Geerbte und lokale Werte sind unterscheidbar.
- [ ] Destruktive Aktionen erfordern bestehende Bestätigung.
- [ ] Keine neue Vorlagenlogik.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/Projects/ProjectTemplateOverrideTest.php](../../tests/Feature/Projects/ProjectTemplateOverrideTest.php), [tests/Feature/Projects/ProjectControllerTest.php](../../tests/Feature/Projects/ProjectControllerTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,37 +0,0 @@
-# UI Rework 25: Workflow-Einstellungen für Spalten und Status
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 24](epic-1-issue-24.md)
-
-## Ziel und Grenzen
-
-Workflow-Einstellungen für Spalten und Status als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/projects/settings/Board.vue](../../resources/js/pages/projects/settings/Board.vue); [app/Http/Controllers/ProjectBoardSettingsController.php](../../app/Http/Controllers/ProjectBoardSettingsController.php). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Spalten, Statuszuordnung, Namen und vorhandene Sortierung neu bearbeiten lassen.
-2. Backlogstatus und Löschbedingungen aus dem Bestand übernehmen.
-3. Übergangsmatrix als separate Komponente vorbereiten.
-
-## Akzeptanzkriterien
-
- [ ] Vorhandene CRUD-Aktionen funktionieren.
- [ ] Gültige Positionen bleiben erhalten.
- [ ] Genutzte Status und Spalten werden nicht unzulässig entfernt.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/Projects/ProjectBoardSettingsControllerTest.php](../../tests/Feature/Projects/ProjectBoardSettingsControllerTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,37 +0,0 @@
-# UI Rework 26: Bearbeitung erlaubter Statusübergänge
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 25](epic-1-issue-25.md)
-
-## Ziel und Grenzen
-
-Bearbeitung erlaubter Statusübergänge als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/projects/settings/Board.vue](../../resources/js/pages/projects/settings/Board.vue); [app/Http/Controllers/ProjectBoardSettingsController.php](../../app/Http/Controllers/ProjectBoardSettingsController.php). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Vorhandene Übergangsregeln als übersichtliche, mobil bedienbare Oberfläche neu erstellen.
-2. Nur existierende Workflowfähigkeiten abbilden.
-3. Gespeicherten Zustand und Fehler klar anzeigen.
-
-## Akzeptanzkriterien
-
- [ ] Erlaubte und verbotene Übergänge werden korrekt gespeichert.
- [ ] Board-Dropziele entsprechen der Konfiguration.
- [ ] Keine neue Workflow-Engine.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/Projects/ProjectBoardSettingsControllerTest.php](../../tests/Feature/Projects/ProjectBoardSettingsControllerTest.php), [tests/Feature/Projects/ProjectBoardControllerTest.php](../../tests/Feature/Projects/ProjectBoardControllerTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,37 +0,0 @@
-# UI Rework 27: Tickettypen, Prioritäten und Anzeigeoptionen
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 24](epic-1-issue-24.md)
-
-## Ziel und Grenzen
-
-Tickettypen, Prioritäten und Anzeigeoptionen als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/projects/settings/Metadata.vue](../../resources/js/pages/projects/settings/Metadata.vue); [app/Http/Controllers/ProjectTicketMetadataSettingsController.php](../../app/Http/Controllers/ProjectTicketMetadataSettingsController.php). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Typen, Prioritäten und bestehende Autor-/Story-Point-Optionen neu darstellen.
-2. Hinzufügen, Umbenennen, Reihenfolge und bestehende Ersetzungsregeln beim Löschen erhalten.
-3. Geschützte und bearbeitbare Einträge anhand vorhandener Berechtigungen unterscheiden. Vor dem Löschen die benötigte Ersatzzuordnung erklären und Validierungsfehler am betroffenen Eintrag anzeigen, ohne projektseitige Regeln zu verändern.
-
-## Akzeptanzkriterien
-
- [ ] Geschützte Typen bleiben geschützt.
- [ ] Löschersatz und Reihenfolge funktionieren.
- [ ] Inhalte bleiben projektkonfigurierbar.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/Projects/ProjectTicketMetadataSettingsControllerTest.php](../../tests/Feature/Projects/ProjectTicketMetadataSettingsControllerTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,37 +0,0 @@
-# UI Rework 28: Benutzerdefinierte Felder und Linktypen
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 27](epic-1-issue-27.md)
-
-## Ziel und Grenzen
-
-Benutzerdefinierte Felder und Linktypen als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/projects/settings/Metadata.vue](../../resources/js/pages/projects/settings/Metadata.vue); [app/Http/Controllers/ProjectTicketMetadataSettingsController.php](../../app/Http/Controllers/ProjectTicketMetadataSettingsController.php). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Bestehende Felddefinitionen und Linktypen in separate neue Einstellungsabschnitte aufteilen.
-2. Vorhandene Feldtypen, Richtung und Gegenbezeichnungen erhalten.
-3. Anlage, Bearbeitung und vorhandene Löschabläufe über die bestehenden Endpunkte anbinden. Ungültige Definitionen mit konkreten Feldfehlern zurückmelden und bestehende Schutzregeln für bereits verwendete Felder und Linktypen in der Oberfläche nachvollziehbar machen.
-
-## Akzeptanzkriterien
-
- [ ] Keine neuen Feldtypen.
- [ ] Vorhandene Feldwerte bleiben erhalten.
- [ ] Linktypen und Gegenrichtung werden korrekt angezeigt und bearbeitet.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/Projects/ProjectTicketMetadataSettingsControllerTest.php](../../tests/Feature/Projects/ProjectTicketMetadataSettingsControllerTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,37 +0,0 @@
-# UI Rework 29: Repository-Einstellungen des Projekts
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 23](epic-1-issue-23.md), [Issue 24](epic-1-issue-24.md)
-
-## Ziel und Grenzen
-
-Repository-Einstellungen des Projekts als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/projects/settings/Repositories.vue](../../resources/js/pages/projects/settings/Repositories.vue); [app/Http/Controllers/ProjectRepositorySettingsController.php](../../app/Http/Controllers/ProjectRepositorySettingsController.php). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Projekt-Repository-Verbindungen mit vorhandener Discovery, Auswahl und Bearbeitung neu aufbauen.
-2. Persönliche Verbindungen und Projektzuordnung klar unterscheiden.
-3. Ladezustände, leere Suchergebnisse, fehlende persönliche Verbindung und Providerfehler getrennt darstellen. Auf die vorhandenen persönlichen Git-Einstellungen verlinken und nach erfolgreicher Zuordnung die Projektliste aus der Serverantwort aktualisieren.
-
-## Akzeptanzkriterien
-
- [ ] Vorhandene Provider werden unterstützt.
- [ ] Fehlende Verbindung und Providerfehler sind abgedeckt.
- [ ] Tickets nutzen weiterhin dieselben Repositories.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/Projects/ProjectRepositorySettingsControllerTest.php](../../tests/Feature/Projects/ProjectRepositorySettingsControllerTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,35 +0,0 @@
-# UI Rework 3: Neue grundlegende UI-Komponenten
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 1](epic-1-issue-1.md), [Issue 2](epic-1-issue-2.md)
-
-## Ziel und Grenzen
-
-Neue grundlegende UI-Komponenten als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/components/ui](../../resources/js/components/ui). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Buttons, Eingaben, Auswahlfelder, Checkboxen, Badges und Avatare neu gestalten.
-2. Zugängliches Verhalten vorhandener Headless-Primitiven wiederverwenden.
-3. Öffentliche Props für Folgetickets stabil festlegen.
-
-## Akzeptanzkriterien
-
- [ ] Tastatur, Fokus, disabled, invalid und loading funktionieren.
- [ ] Sichtbare Texte sind übersetzbar.
- [ ] Komponenten funktionieren in beiden Themes.
-
-## Prüfung
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,37 +0,0 @@
-# UI Rework 30: Projekt-Benachrichtigungseinstellungen
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 24](epic-1-issue-24.md)
-
-## Ziel und Grenzen
-
-Projekt-Benachrichtigungseinstellungen als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/projects/settings/Notifications.vue](../../resources/js/pages/projects/settings/Notifications.vue); [app/Http/Controllers/ProjectNotificationSettingsController.php](../../app/Http/Controllers/ProjectNotificationSettingsController.php). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Bestehende Aktionen, Trigger, Filter und Nachrichtenvorlagen neu gestalten.
-2. Vorhandene Delivery-Informationen und Validierung nutzen.
-3. Sensible Webhookfelder sorgfältig darstellen.
-
-## Akzeptanzkriterien
-
- [ ] Bestehende Benachrichtigungen lassen sich unverändert konfigurieren.
- [ ] Keine neuen Trigger oder Push-Dienste.
- [ ] Fehlerfälle sind getestet.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/Projects/ProjectNotificationSettingsControllerTest.php](../../tests/Feature/Projects/ProjectNotificationSettingsControllerTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,37 +0,0 @@
-# UI Rework 31: Verwaltung wiederverwendbarer Projektvorlagen
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 9](epic-1-issue-9.md), [Issue 24](epic-1-issue-24.md)
-
-## Ziel und Grenzen
-
-Verwaltung wiederverwendbarer Projektvorlagen als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/project-templates/Index.vue](../../resources/js/pages/project-templates/Index.vue); [resources/js/pages/project-templates/Create.vue](../../resources/js/pages/project-templates/Create.vue); [resources/js/pages/project-templates/Edit.vue](../../resources/js/pages/project-templates/Edit.vue). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Vorlagenübersicht, Erstellung und Bearbeitung neu aufbauen.
-2. Auswirkungen auf vererbende Projekte und Bestätigungen darstellen.
-3. Interne Basisvorlagen weiterhin ausblenden.
-
-## Akzeptanzkriterien
-
- [ ] Vorhandene Erstell-/Bearbeitungsflüsse funktionieren.
- [ ] Unveränderliche Slugs bleiben gesperrt.
- [ ] Keine Änderungen an Vererbungsregeln.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/Projects/ProjectTemplateControllerTest.php](../../tests/Feature/Projects/ProjectTemplateControllerTest.php), [tests/Feature/Projects/ProjectTemplateOverrideTest.php](../../tests/Feature/Projects/ProjectTemplateOverrideTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,36 +0,0 @@
-# UI Rework 32: Teams und Mitgliedschaft
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 4](epic-1-issue-4.md), [Issue 5](epic-1-issue-5.md)
-
-## Ziel und Grenzen
-
-Teams und Mitgliedschaft als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/teams/Index.vue](../../resources/js/pages/teams/Index.vue); [app/Http/Controllers/TeamController.php](../../app/Http/Controllers/TeamController.php). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Teamübersicht, Teamverwaltung und Mitgliedsauswahl im neuen Design umsetzen.
-2. Alle bestehenden Rechte und Aktionen übernehmen.
-3. Mobile Bedienung sicherstellen.
-
-## Akzeptanzkriterien
-
- [ ] Team- und Mitgliedsaktionen entsprechen dem Bestand.
- [ ] Fehlende Rechte und Validierungsfehler sind abgedeckt.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/Teams/TeamControllerTest.php](../../tests/Feature/Teams/TeamControllerTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,37 +0,0 @@
-# UI Rework 33: Projektzugriff und Rechtezuweisung
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 8](epic-1-issue-8.md), [Issue 32](epic-1-issue-32.md)
-
-## Ziel und Grenzen
-
-Projektzugriff und Rechtezuweisung als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/projects/Access.vue](../../resources/js/pages/projects/Access.vue); [app/Http/Controllers/ProjectController.php](../../app/Http/Controllers/ProjectController.php). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Direkte Benutzerrechte und Teamrechte neu darstellen.
-2. Effektive Rechte und Bearbeitungsgrenzen nachvollziehbar machen.
-3. Bestehende Zuweisungsendpunkte weiterverwenden.
-
-## Akzeptanzkriterien
-
- [ ] Keine neue Rollenlogik.
- [ ] Rechte gelten weiterhin additiv nach Bestand.
- [ ] Unberechtigte Zuweisungen werden serverseitig abgewiesen.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/Projects/ProjectControllerTest.php](../../tests/Feature/Projects/ProjectControllerTest.php), [tests/Feature/Permissions/PermissionServiceTest.php](../../tests/Feature/Permissions/PermissionServiceTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,37 +0,0 @@
-# UI Rework 34: Benutzeradministration
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 4](epic-1-issue-4.md), [Issue 5](epic-1-issue-5.md)
-
-## Ziel und Grenzen
-
-Benutzeradministration als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/admin/users/Index.vue](../../resources/js/pages/admin/users/Index.vue); [resources/js/pages/admin/users/Create.vue](../../resources/js/pages/admin/users/Create.vue); [resources/js/pages/admin/users/Edit.vue](../../resources/js/pages/admin/users/Edit.vue). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Übersicht, Benutzeranlage und Bearbeitung vollständig neu gestalten.
-2. Vorhandene Felder, Adminoptionen und erzwungenen Passwortwechsel erhalten.
-3. Verfügbare Aktionen aus den bestehenden Berechtigungen ableiten, sensible Änderungen bestätigen lassen und Validierungsfehler direkt den Eingaben zuordnen. Nach Speichern oder Abbruch zur passenden Übersicht zurückführen, ohne neue Rollen oder Verwaltungsaktionen einzuführen.
-
-## Akzeptanzkriterien
-
- [ ] Bestehende Adminaktionen funktionieren.
- [ ] Nicht-Admins erhalten keinen Zugriff.
- [ ] Formfehler und sensible Aktionen sind abgedeckt.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/Admin/UserManagementControllerTest.php](../../tests/Feature/Admin/UserManagementControllerTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,36 +0,0 @@
-# UI Rework 35: Öffentliche Einstiegsseite
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 2](epic-1-issue-2.md), [Issue 3](epic-1-issue-3.md), [Issue 6](epic-1-issue-6.md)
-
-## Ziel und Grenzen
-
-Öffentliche Einstiegsseite als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/Welcome.vue](../../resources/js/pages/Welcome.vue). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-Relevanter Stitch-Screen: Landing Page - Open Source & Self-Hosted — 41a744db2b1f4e01a9c597835b58759e. Zugriff über Stitch-MCP, Projekt 9754281177402648015.
-
-## Implementierungsweg
-
-1. Neue kompakte öffentliche Einstiegsseite mit KanbanGit-Branding und Anmeldung entwickeln.
-2. Stitch-Landingpage ausschließlich als Stilreferenz nutzen.
-3. Nur vorhandene Funktionen beschreiben.
-
-## Akzeptanzkriterien
-
- [ ] Keine erfundenen Produktfunktionen, Tarife oder Statistiken.
- [ ] Responsiv und lokalisierbar.
- [ ] Einstieg in Anmeldung funktioniert.
-
-## Prüfung
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,37 +0,0 @@
-# UI Rework 36: Tauri-Grundgerüst und macOS-Entwicklungsbuild
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: Keine.
-
-## Ziel und Grenzen
-
-Tauri-Grundgerüst und macOS-Entwicklungsbuild als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: `native/` (in diesem Ticket neu anzulegen); [.gitignore](../../.gitignore). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-Technische Referenz: [Tauri 2](https://v2.tauri.app/), [Remote-Inhalte und native Berechtigungen](https://v2.tauri.app/security/capabilities/).
-
-## Implementierungsweg
-
-1. Isoliertes Tauri-2-Projekt im gemeinsamen Repository anlegen.
-2. Minimale lokale Startansicht und Server-WebView erstellen.
-3. Entwicklungsbuild auf macOS mit vorhandenem KanbanGit prüfen.
-
-## Akzeptanzkriterien
-
- [ ] Laravel bleibt am bisherigen Ort.
- [ ] macOS-App startet und zeigt die Serveroberfläche.
- [ ] Keine allgemeine native API für Remote-Inhalte.
-
-## Prüfung
-
-Zunächst den im Ticket genannten Plattformbuild und die beschriebenen Abläufe prüfen. Für neue App-Logik gezielte Tests für Navigation, Zustände oder URL-Verarbeitung ergänzen; Plattformverhalten im passenden Simulator bzw. auf einem geeigneten Gerät prüfen. Bei Vue/TypeScript-Änderungen abschließend `npm run types:check`; bei Backend-Anpassungen betroffene PHPUnit-Tests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,38 +0,0 @@
-# UI Rework 37: Serverauswahl, Sitzungen und Verbindungsfehler
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 36](epic-1-issue-36.md), [Issue 6](epic-1-issue-6.md), [Issue 7](epic-1-issue-7.md)
-
-## Ziel und Grenzen
-
-Serverauswahl, Sitzungen und Verbindungsfehler als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: `native` (entsteht ab Issue 36); [resources/js/pages/auth](../../resources/js/pages/auth). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-Technische Referenz: [Tauri 2](https://v2.tauri.app/), [Remote-Inhalte und native Berechtigungen](https://v2.tauri.app/security/capabilities/).
-
-## Implementierungsweg
-
-1. Eine aktive, frei wählbare HTTPS-Installation speichern.
-2. Serverwechsel und lokale Fehleransicht umsetzen.
-3. Sitzungen, Logout, 2FA, Start ohne Verbindung und Formularfehler prüfen.
-
-## Akzeptanzkriterien
-
- [ ] Kein Zertifikats-Bypass.
- [ ] Sitzungserhalt folgt Laravel.
- [ ] Serverwechsel übernimmt keine fremden Zugangsdaten.
- [ ] Bestehende Eingaben werden bei Verbindungsfehler nicht durch einen leeren Bildschirm ersetzt.
-
-## Prüfung
-
-Zunächst den im Ticket genannten Plattformbuild und die beschriebenen Abläufe prüfen. Für neue App-Logik gezielte Tests für Navigation, Zustände oder URL-Verarbeitung ergänzen; Plattformverhalten im passenden Simulator bzw. auf einem geeigneten Gerät prüfen. Bei Vue/TypeScript-Änderungen abschließend `npm run types:check`; bei Backend-Anpassungen betroffene PHPUnit-Tests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,37 +0,0 @@
-# UI Rework 38: Android-App und Plattformanpassung
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 37](epic-1-issue-37.md)
-
-## Ziel und Grenzen
-
-Android-App und Plattformanpassung als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: `native (Android-Plattformprojekt)` (entsteht ab Issue 36). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-Technische Referenz: [Tauri 2](https://v2.tauri.app/).
-
-## Implementierungsweg
-
-1. Android-Ziel konfigurieren und Entwicklungsbuild erstellen.
-2. Zurück-Taste, Systemleisten, Safe Areas und Bildschirmtastatur anpassen.
-3. Bestehende Server-/Anmeldeabläufe prüfen.
-
-## Akzeptanzkriterien
-
- [ ] App startet auf Emulator und geeignetem Gerät.
- [ ] Login, 2FA, Navigation und Wiederaufnahme funktionieren.
- [ ] Keine eigenständige zweite Fachoberfläche.
-
-## Prüfung
-
-Zunächst den im Ticket genannten Plattformbuild und die beschriebenen Abläufe prüfen. Für neue App-Logik gezielte Tests für Navigation, Zustände oder URL-Verarbeitung ergänzen; Plattformverhalten im passenden Simulator bzw. auf einem geeigneten Gerät prüfen. Bei Vue/TypeScript-Änderungen abschließend `npm run types:check`; bei Backend-Anpassungen betroffene PHPUnit-Tests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,38 +0,0 @@
-# UI Rework 39: iOS/iPadOS-App für lokale Xcode-Builds
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 37](epic-1-issue-37.md)
-
-## Ziel und Grenzen
-
-iOS/iPadOS-App für lokale Xcode-Builds als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: `native (Apple-Plattformprojekt)` (entsteht ab Issue 36). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-Technische Referenz: [Tauri 2](https://v2.tauri.app/).
-
-## Implementierungsweg
-
-1. IOS/iPadOS-Ziel für lokalen Xcode-Build konfigurieren.
-2. WKWebView-Sitzungen, Safe Areas, Tastatur und Größenwechsel prüfen.
-3. Benötigte lokale Einrichtung im Ticket dokumentieren.
-
-## Akzeptanzkriterien
-
- [ ] Simulatorbuild funktioniert.
- [ ] Gerätebuild nutzt vom Nutzer bereitgestellte Signierung.
- [ ] Kein TestFlight- oder Store-Upload.
- [ ] IPad bleibt bedienbar.
-
-## Prüfung
-
-Zunächst den im Ticket genannten Plattformbuild und die beschriebenen Abläufe prüfen. Für neue App-Logik gezielte Tests für Navigation, Zustände oder URL-Verarbeitung ergänzen; Plattformverhalten im passenden Simulator bzw. auf einem geeigneten Gerät prüfen. Bei Vue/TypeScript-Änderungen abschließend `npm run types:check`; bei Backend-Anpassungen betroffene PHPUnit-Tests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,35 +0,0 @@
-# UI Rework 4: Responsive Anwendungsnavigation
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 3](epic-1-issue-3.md)
-
-## Ziel und Grenzen
-
-Responsive Anwendungsnavigation als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/layouts](../../resources/js/layouts); [resources/js/components/AppSidebar.vue](../../resources/js/components/AppSidebar.vue); [resources/js/types/navigation.ts](../../resources/js/types/navigation.ts). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Neue Sidebar, obere Werkzeugleiste, Projektnavigation und mobile Navigation aufbauen.
-2. Nur vorhandene und erlaubte Bereiche verlinken.
-3. Aktuelle Auswahl und kompakte Bildschirmgrößen berücksichtigen.
-
-## Akzeptanzkriterien
-
- [ ] Alle bestehenden Bereiche bleiben erreichbar.
- [ ] Rollen sehen nur erlaubte Links.
- [ ] Browser-Zurück und mobile Navigation funktionieren.
-
-## Prüfung
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,37 +0,0 @@
-# UI Rework 40: App-Links, externe Links und Dateiauswahl
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 20](epic-1-issue-20.md), [Issue 21](epic-1-issue-21.md), [Issue 38](epic-1-issue-38.md), [Issue 39](epic-1-issue-39.md)
-
-## Ziel und Grenzen
-
-App-Links, externe Links und Dateiauswahl als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: `native` (entsteht ab Issue 36); [resources/js/components](../../resources/js/components). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-Technische Referenz: [Tauri 2](https://v2.tauri.app/), [Remote-Inhalte und native Berechtigungen](https://v2.tauri.app/security/capabilities/).
-
-## Implementierungsweg
-
-1. Interne App-Links zur ausgewählten Installation und externe Browserlinks umsetzen.
-2. Avatar-Dateiauswahl, Zwischenablage und Browser-Zurück plattformübergreifend absichern.
-3. Native Schnittstellen eng begrenzen.
-
-## Akzeptanzkriterien
-
- [ ] Fremde Links wechseln nicht ungefragt den Server.
- [ ] Externe Git-Links funktionieren.
- [ ] Uploads und Kopieren funktionieren auf allen App-Plattformen.
-
-## Prüfung
-
-Zunächst den im Ticket genannten Plattformbuild und die beschriebenen Abläufe prüfen. Für neue App-Logik gezielte Tests für Navigation, Zustände oder URL-Verarbeitung ergänzen; Plattformverhalten im passenden Simulator bzw. auf einem geeigneten Gerät prüfen. Bei Vue/TypeScript-Änderungen abschließend `npm run types:check`; bei Backend-Anpassungen betroffene PHPUnit-Tests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,37 +0,0 @@
-# UI Rework 41: Signierter macOS-Release-Download
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 40](epic-1-issue-40.md)
-
-## Ziel und Grenzen
-
-Signierter macOS-Release-Download als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: `native` (entsteht ab Issue 36); [.github/workflows](../../.github/workflows). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-Technische Referenz: [Tauri 2](https://v2.tauri.app/), [macOS-Signierung](https://v2.tauri.app/distribute/sign/macos/).
-
-## Implementierungsweg
-
-1. Reproduzierbaren macOS-Releasebuild mit Signierung und Notarisierung vorbereiten.
-2. Zertifikate nur als externe Secrets erwarten.
-3. Installationsartefakt für Git-Releases erzeugen.
-
-## Akzeptanzkriterien
-
- [ ] Builds verwenden keine eingecheckten Schlüssel.
- [ ] Signiertes Artefakt lässt sich mit bereitgestellten Voraussetzungen installieren.
- [ ] Fehlende Secrets werden klar gemeldet.
-
-## Prüfung
-
-Zunächst den im Ticket genannten Plattformbuild und die beschriebenen Abläufe prüfen. Für neue App-Logik gezielte Tests für Navigation, Zustände oder URL-Verarbeitung ergänzen; Plattformverhalten im passenden Simulator bzw. auf einem geeigneten Gerät prüfen. Bei Vue/TypeScript-Änderungen abschließend `npm run types:check`; bei Backend-Anpassungen betroffene PHPUnit-Tests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,38 +0,0 @@
-# UI Rework 42: Signiertes Android-APK für Git-Releases
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 40](epic-1-issue-40.md)
-
-## Ziel und Grenzen
-
-Signiertes Android-APK für Git-Releases als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: `native` (entsteht ab Issue 36); [.github/workflows](../../.github/workflows). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-Technische Referenz: [Tauri 2](https://v2.tauri.app/), [Android-Releasevorbereitung](https://developer.android.com/studio/publish/preparing).
-
-## Implementierungsweg
-
-1. Reproduzierbaren signierten APK-Releasebuild konfigurieren.
-2. Dauerhafte Signing-Identität über Secrets beziehen.
-3. Versionierung und Upgrade vorhandener Installationen berücksichtigen.
-
-## Akzeptanzkriterien
-
- [ ] APK ist direkt installierbar.
- [ ] Updates behalten Daten/Sitzungen entsprechend Plattformverhalten.
- [ ] Schlüssel fehlen im Repository.
- [ ] Kein Play-Store-Upload.
-
-## Prüfung
-
-Zunächst den im Ticket genannten Plattformbuild und die beschriebenen Abläufe prüfen. Für neue App-Logik gezielte Tests für Navigation, Zustände oder URL-Verarbeitung ergänzen; Plattformverhalten im passenden Simulator bzw. auf einem geeigneten Gerät prüfen. Bei Vue/TypeScript-Änderungen abschließend `npm run types:check`; bei Backend-Anpassungen betroffene PHPUnit-Tests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,39 +0,0 @@
-# UI Rework 43: Getrennte Prüf- und Build-Pipelines
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 39](epic-1-issue-39.md), [Issue 41](epic-1-issue-41.md), [Issue 42](epic-1-issue-42.md)
-
-## Ziel und Grenzen
-
-Getrennte Prüf- und Build-Pipelines als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [Dockerfile](../../Dockerfile); [.github/workflows/ci_cd.yml](../../.github/workflows/ci_cd.yml); [.github/tests/test_and_check_app/action.yml](../../.github/tests/test_and_check_app/action.yml). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-Technische Referenz: [Tauri 2](https://v2.tauri.app/).
-
-## Implementierungsweg
-
-1. Laravel/Web-Prüfungen von Tauri-Builds trennen.
-2. Passende Linux-/macOS-Runner festlegen.
-3. Änderungen nach Pfaden zuordnen, gemeinsame Änderungen vollständig prüfen.
-4. Bestehendes Serverrelease erhalten.
-
-## Akzeptanzkriterien
-
- [ ] Serverimage enthält keine native Toolchain.
- [ ] Erforderliche Prüfungen werden nicht übersprungen.
- [ ] macOS/Android-Artefakte sind getrennt.
- [ ] iOS bleibt Selbstbau.
-
-## Prüfung
-
-Zunächst den im Ticket genannten Plattformbuild und die beschriebenen Abläufe prüfen. Für neue App-Logik gezielte Tests für Navigation, Zustände oder URL-Verarbeitung ergänzen; Plattformverhalten im passenden Simulator bzw. auf einem geeigneten Gerät prüfen. Bei Vue/TypeScript-Änderungen abschließend `npm run types:check`; bei Backend-Anpassungen betroffene PHPUnit-Tests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,37 +0,0 @@
-# UI Rework 44: Web-Abnahme und Entfernung des alten Frontends
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 1](epic-1-issue-1.md), [Issue 2](epic-1-issue-2.md), [Issue 3](epic-1-issue-3.md), [Issue 4](epic-1-issue-4.md), [Issue 5](epic-1-issue-5.md), [Issue 6](epic-1-issue-6.md), [Issue 7](epic-1-issue-7.md), [Issue 8](epic-1-issue-8.md), [Issue 9](epic-1-issue-9.md), [Issue 10](epic-1-issue-10.md), [Issue 11](epic-1-issue-11.md), [Issue 12](epic-1-issue-12.md), [Issue 13](epic-1-issue-13.md), [Issue 14](epic-1-issue-14.md), [Issue 15](epic-1-issue-15.md), [Issue 16](epic-1-issue-16.md), [Issue 17](epic-1-issue-17.md), [Issue 18](epic-1-issue-18.md), [Issue 19](epic-1-issue-19.md), [Issue 20](epic-1-issue-20.md), [Issue 21](epic-1-issue-21.md), [Issue 22](epic-1-issue-22.md), [Issue 23](epic-1-issue-23.md), [Issue 24](epic-1-issue-24.md), [Issue 25](epic-1-issue-25.md), [Issue 26](epic-1-issue-26.md), [Issue 27](epic-1-issue-27.md), [Issue 28](epic-1-issue-28.md), [Issue 29](epic-1-issue-29.md), [Issue 30](epic-1-issue-30.md), [Issue 31](epic-1-issue-31.md), [Issue 32](epic-1-issue-32.md), [Issue 33](epic-1-issue-33.md), [Issue 34](epic-1-issue-34.md), [Issue 35](epic-1-issue-35.md)
-
-## Ziel und Grenzen
-
-Web-Abnahme und Entfernung des alten Frontends als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js](../../resources/js); [resources/css](../../resources/css); [tests/Feature](../../tests/Feature). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Alle vorhandenen Seiten und Aktionen gegen die Bestandsliste prüfen.
-2. Desktop/Tablet/Mobil sowie Hell/Dunkel/System visuell und funktional abnehmen.
-3. Nur nicht mehr referenzierte alte UI-Dateien entfernen.
-4. Größere neue Befunde in eigene Folgeaufgaben abgrenzen.
-
-## Akzeptanzkriterien
-
- [ ] Keine Starterkit-Seite oder unübersetzte neue UI-Texte.
- [ ] Keine verlorenen Bestandsfunktionen.
- [ ] Keine bestehenden Tests entfernt.
- [ ] Relevante Tests, Build, Lint und abschließender Typecheck bestehen.
-
-## Prüfung
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,36 +0,0 @@
-# UI Rework 45: Plattformübergreifende App-Abnahme
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 40](epic-1-issue-40.md), [Issue 41](epic-1-issue-41.md), [Issue 42](epic-1-issue-42.md), [Issue 43](epic-1-issue-43.md), [Issue 44](epic-1-issue-44.md)
-
-## Ziel und Grenzen
-
-Plattformübergreifende App-Abnahme als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: `native` (entsteht ab Issue 36); [resources/js](../../resources/js). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. macOS, Android und iOS/iPadOS mit fertigem Webfrontend prüfen.
-2. Serverwechsel, Sessionablauf, Serverupdate, Verbindungsabbruch, Links und Dateiauswahl abnehmen.
-3. Dokumentierte reproduzierbare Befunde mit klaren Reproduktionsschritten festhalten.
-
-## Akzeptanzkriterien
-
- [ ] Alle vereinbarten App-Abläufe bestehen.
- [ ] Keine Produktionsdaten als Testfixtures verändert.
- [ ] Releasewege entsprechen Vereinbarung.
- [ ] Größere Defekte werden nicht im Abnahmeticket versteckt.
-
-## Prüfung
-
-Zunächst den im Ticket genannten Plattformbuild und die beschriebenen Abläufe prüfen. Für neue App-Logik gezielte Tests für Navigation, Zustände oder URL-Verarbeitung ergänzen; Plattformverhalten im passenden Simulator bzw. auf einem geeigneten Gerät prüfen. Bei Vue/TypeScript-Änderungen abschließend `npm run types:check`; bei Backend-Anpassungen betroffene PHPUnit-Tests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,35 +0,0 @@
-# UI Rework 5: Dialoge, Rückmeldungen und Eingabeschutz
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 3](epic-1-issue-3.md), [Issue 4](epic-1-issue-4.md)
-
-## Ziel und Grenzen
-
-Dialoge, Rückmeldungen und Eingabeschutz als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/components](../../resources/js/components); [resources/js/composables](../../resources/js/composables). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Dialoge, Menüs, Leer-, Lade- und Fehlerzustände vereinheitlichen.
-2. Formfehler und Wiederholaktionen definieren.
-3. Ungespeicherte Eingaben gegen Navigation und fehlgeschlagene Requests absichern.
-
-## Akzeptanzkriterien
-
- [ ] Keine verlorenen Eingaben bei Requestfehlern.
- [ ] Dialogfokus wird korrekt zurückgegeben.
- [ ] Netzwerkfehler und serverseitige Validierung sind unterscheidbar.
-
-## Prüfung
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,37 +0,0 @@
-# UI Rework 6: Anmeldung, E-Mail-Verifikation und 2FA-Challenge
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 4](epic-1-issue-4.md), [Issue 5](epic-1-issue-5.md)
-
-## Ziel und Grenzen
-
-Anmeldung, E-Mail-Verifikation und 2FA-Challenge als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/auth/Login.vue](../../resources/js/pages/auth/Login.vue); [resources/js/pages/auth/VerifyEmail.vue](../../resources/js/pages/auth/VerifyEmail.vue); [resources/js/pages/auth/TwoFactorChallenge.vue](../../resources/js/pages/auth/TwoFactorChallenge.vue). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Die drei Ansichten vollständig neu erstellen.
-2. Bestehende Fortify-Routen und Sessionflüsse verwenden.
-3. Mobile Tastatur, Autofill und Recovery-Codes berücksichtigen.
-
-## Akzeptanzkriterien
-
- [ ] Normale und zweistufige Anmeldung funktionieren.
- [ ] Fehler erhalten passende Eingaben.
- [ ] Bestehende Autorisierungsregeln bleiben wirksam.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/Auth/AuthenticationTest.php](../../tests/Feature/Auth/AuthenticationTest.php), [tests/Feature/Auth/TwoFactorChallengeTest.php](../../tests/Feature/Auth/TwoFactorChallengeTest.php), [tests/Feature/Auth/EmailVerificationTest.php](../../tests/Feature/Auth/EmailVerificationTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,37 +0,0 @@
-# UI Rework 7: Passwort- und Bestätigungsseiten
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 6](epic-1-issue-6.md)
-
-## Ziel und Grenzen
-
-Passwort- und Bestätigungsseiten als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/auth/ForgotPassword.vue](../../resources/js/pages/auth/ForgotPassword.vue); [resources/js/pages/auth/ResetPassword.vue](../../resources/js/pages/auth/ResetPassword.vue); [resources/js/pages/auth/ConfirmPassword.vue](../../resources/js/pages/auth/ConfirmPassword.vue); [resources/js/pages/auth/ForcePasswordChange.vue](../../resources/js/pages/auth/ForcePasswordChange.vue). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Passwort-Reset, sensible Aktionsbestätigung und erzwungenen Passwortwechsel neu gestalten.
-2. Bestehende Fortify-Verträge erhalten.
-3. Zustände abgelaufener oder ungültiger Links berücksichtigen.
-
-## Akzeptanzkriterien
-
- [ ] Alle vier Flüsse funktionieren mit bestehenden Endpunkten.
- [ ] Sensible Werte werden nicht in Entwürfen gespeichert.
- [ ] Erfolg und Fehler sind klar.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/Auth/PasswordResetTest.php](../../tests/Feature/Auth/PasswordResetTest.php), [tests/Feature/Auth/PasswordConfirmationTest.php](../../tests/Feature/Auth/PasswordConfirmationTest.php), [tests/Feature/Settings/SecurityTest.php](../../tests/Feature/Settings/SecurityTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,37 +0,0 @@
-# UI Rework 8: Projektübersicht und Projekteinstieg
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 4](epic-1-issue-4.md), [Issue 5](epic-1-issue-5.md)
-
-## Ziel und Grenzen
-
-Projektübersicht und Projekteinstieg als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/projects/Index.vue](../../resources/js/pages/projects/Index.vue); [resources/js/pages/projects/Show.vue](../../resources/js/pages/projects/Show.vue). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Projektübersicht und Projekteinstieg neu aufbauen.
-2. Erlaubte Aktionen und direkte Wege zu Board, Backlog und Einstellungen anbieten.
-3. Vorhandene Resources nutzen.
-
-## Akzeptanzkriterien
-
- [ ] Nur sichtbare Projekte erscheinen.
- [ ] Leerzustand und eingeschränkte Rechte sind abgedeckt.
- [ ] Keine Mockup-Funktionen ohne Backend.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/Projects/ProjectControllerTest.php](../../tests/Feature/Projects/ProjectControllerTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,37 +0,0 @@
-# UI Rework 9: Projektanlage, Duplikation und Vorlagenauswahl
-
-Epic: [Epic 1](epic-1.md)
-
-Abhängigkeiten: [Issue 8](epic-1-issue-8.md)
-
-## Ziel und Grenzen
-
-Projektanlage, Duplikation und Vorlagenauswahl als abgegrenzten Teil des vollständigen Frontend-Neubaus umsetzen. Grundlage: Vue 3/Inertia 2 mit Laravel, Tauri 2 für Apps, gemeinsames Repository, servergeladene Oberfläche, HTTPS, Hell/Dunkel/System und englische Texte über Übersetzungsschlüssel. Bestehende Fachlogik bleibt maßgeblich; Resources und Routen nur soweit für diese Oberfläche erforderlich anpassen. Keine zusätzlichen Produktmodule.
-
-## Einstieg
-
-Gezielt prüfen: [resources/js/pages/projects/Create.vue](../../resources/js/pages/projects/Create.vue); [app/Http/Controllers/ProjectController.php](../../app/Http/Controllers/ProjectController.php). Die Pfade sind Einstiegspunkte, keine Erlaubnis zu fachlichen Umbauten. [AGENTS.md](../../AGENTS.md) und die für den tatsächlich geänderten Bereich geltenden Skills beachten. Vor Codeänderungen die zur installierten Version passende Dokumentation prüfen.
-
-Design: [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015)
-
-## Implementierungsweg
-
-1. Neuen Erstellablauf für leeres Projekt, Duplikat und Vorlage bauen.
-2. Bedingte Felder und Kopieroptionen aus dem Bestand übernehmen.
-3. Backend-Verträge nur bei Darstellungsbedarf anpassen.
-
-## Akzeptanzkriterien
-
- [ ] Alle drei vorhandenen Erstellwege bleiben korrekt.
- [ ] Validierung ist verständlich.
- [ ] Operative Ticketdaten werden weiterhin nicht dupliziert.
-
-## Prüfung
-
-Vorhandene gezielte Abdeckung: [tests/Feature/Projects/ProjectControllerTest.php](../../tests/Feature/Projects/ProjectControllerTest.php), [tests/Feature/Projects/ProjectTemplateControllerTest.php](../../tests/Feature/Projects/ProjectTemplateControllerTest.php). Nur bei Berührung des jeweiligen Verhaltens aktualisieren bzw. ausführen.
-
-Gezielte Verhaltenstests für die Änderung; betroffene PHPUnit-Featuretests bei Controller-/Resource-/Route-Anpassungen. Oberfläche mit Tastatur und bei mobiler Breite in beiden Themes prüfen. Projektvorgaben für Lint/Build und bei Vue/TypeScript abschließend `npm run types:check` erfüllen. Keine ausschließlich optischen Momentaufnahmen als Ersatz für Verhaltenstests.
-
-## Grenze der Agentensitzung
-
-Nur dieses Ticket und bereits erfüllte Abhängigkeiten bearbeiten. Ein zusammenhängendes Ergebnis mit passenden Tests liefern; keine Nachbartickets mitziehen. Die Aufteilung zielt auf eine begrenzte Sitzung mit Reserve für Prüfung, garantiert aber kein festes Zeit- oder Tokenbudget. Wenn unerwartete Voraussetzungen den Umfang wesentlich vergrößern, rechtzeitig den Stand, betroffene Dateien, bereits ausgeführte Prüfungen und den konkret nötigen Folgeschritt festhalten.
@@ -1,15 +0,0 @@
-# Epic 1: KanbanGit UI Rework und Tauri-Apps
-
-## Scope
-
-Die vorhandene, aus dem Laravel-Starterkit entstandene Oberfläche vollständig durch eine neue Vue/Inertia-Oberfläche im Stil von [Fluid Emerald Kanban](https://stitch.withgoogle.com/projects/9754281177402648015) ersetzen. Alle bestehenden Produktfunktionen erhalten ein neues, auf Desktop und Mobilgeräte abgestimmtes Erscheinungsbild.
-
-Eine gemeinsame servergeladene Oberfläche versorgt Browser sowie Tauri-Apps für macOS, iOS/iPadOS und Android. Backend und Clients bleiben im selben Repository. Selbst gehostete Installationen werden über eine frei wählbare HTTPS-Adresse angebunden; jeweils eine Installation ist aktiv.
-
-Zum Zielumfang gehören Hell/Dunkel/System, eine Lokalisierungsstruktur mit zunächst englischen Texten und bessere Frontend-Bedienung einschließlich Drag-and-drop für bestehende Statuswechsel. Anpassungen an Resources, Inertia-Daten und erforderlichen Routen sind zulässig.
-
-Ausgeschlossen sind neue fachliche Backend-Funktionen, zusätzliche Mockup-Module, Offline-Datensynchronisierung, persistierte freie Kartenreihenfolge und Hintergrund-Push. macOS und Android werden als signierte Git-Release-Downloads vorbereitet; iOS/iPadOS wird zunächst selbst über Xcode gebaut. Stores folgen später.
-
-## Abschluss
-
-Die neue Oberfläche deckt die bestehenden Funktionen ab, funktioniert auf allen vereinbarten Plattformen und hat das alte Starterkit-Frontend vollständig abgelöst. Die Umsetzung ist in eigenständige, begrenzte Agentensitzungen aufgeteilt.
@@ -25,6 +25,7 @@ const prettierOptions = {
 const eslintConfig = [
    {
        ignores: [
+            'bootstrap/ssr/**',
            '**/dist/**',
            'node_modules/**',
            '.github/**',
@@ -2,6 +2,13 @@
    "$schema": "https://www.schemastore.org/package.json",
    "private": true,
    "type": "module",
+    "devEngines": {
+        "packageManager": {
+            "name": "pnpm",
+            "version": "11.26.0+sha512.fc0e2bf890b9f983611f1ab68c0637bce914390653699f83c1a78b005ed25f2c81e77920c8fd8eee2ecf0b58b28cdcb00a84d97f69bcf7c56b2f344710238664",
+            "onFail": "error"
+        }
+    },
    "scripts": {
        "build": "vite build",
        "build:ssr": "vite build && vite build --ssr",
@@ -39,6 +46,7 @@
        "vue-tsc": "^2.2.4"
    },
    "dependencies": {
+        "@inertiajs/core": "2.3.18",
        "@inertiajs/vue3": "^2.3.7",
        "@vueuse/core": "^12.8.2",
        "class-variance-authority": "^0.7.1",
@@ -19,7 +19,6 @@
    </source>
    <php>
        <env name="APP_ENV" value="testing"/>
-        <env name="APP_KEY" value="base64:11ujGYe5vzbwqcdFDVQC6PuDgd7c8PKD9kWt9HH9Bvs="/>
        <env name="APP_MAINTENANCE_DRIVER" value="file"/>
        <env name="AVATAR_FILESYSTEM_DISK" value="public"/>
        <env name="AVATAR_URLS_TEMPORARY" value="false"/>
@@ -0,0 +1,4 @@
+minimumReleaseAge: 10080
+allowBuilds:
+  unrs-resolver: true
+  vue-demi: true
@@ -1,39 +1,80 @@
 <script setup lang="ts">
-import { Monitor, Moon, Sun } from 'lucide-vue-next';
+import { Check, Monitor, Moon, Sun } from 'lucide-vue-next';
+import { computed } from 'vue';
 import { useAppearance } from '@/composables/useAppearance';
 import { useLocalization } from '@/composables/useLocalization';

 const { appearance, updateAppearance } = useAppearance();
 const { t } = useLocalization();

-const tabs = [
-    { value: 'light', Icon: Sun, label: 'appearance.light' },
-    { value: 'dark', Icon: Moon, label: 'appearance.dark' },
-    { value: 'system', Icon: Monitor, label: 'appearance.system' },
-] as const;
+const tabs = computed(() => [
+    {
+        value: 'light' as const,
+        Icon: Sun,
+        label: t('appearance.light'),
+        description: t('appearance.lightDescription'),
+    },
+    {
+        value: 'dark' as const,
+        Icon: Moon,
+        label: t('appearance.dark'),
+        description: t('appearance.darkDescription'),
+    },
+    {
+        value: 'system' as const,
+        Icon: Monitor,
+        label: t('appearance.system'),
+        description: t('appearance.systemDescription'),
+    },
+]);
 </script>

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

 const passwordInput = useTemplateRef('passwordInput');
+const { t } = useLocalization();
 </script>

 <template>
-    <div class="space-y-6">
-        <Heading
-            variant="small"
-            title="Delete account"
-            description="Delete your account and all of its resources"
-        />
-        <div
-            class="space-y-4 rounded-lg border border-red-100 bg-red-50 p-4 dark:border-red-200/10 dark:bg-red-700/10"
-        >
-            <div class="relative space-y-0.5 text-red-600 dark:text-red-100">
-                <p class="font-medium">Warning</p>
-                <p class="text-sm">
-                    Please proceed with caution, this cannot be undone.
-                </p>
-            </div>
-            <Dialog>
-                <DialogTrigger as-child>
-                    <Button variant="destructive" data-test="delete-user-button"
-                        >Delete account</Button
-                    >
-                </DialogTrigger>
-                <DialogContent>
-                    <Form
-                        v-bind="ProfileController.destroy.form()"
-                        reset-on-success
-                        @error="() => passwordInput?.focus()"
-                        :options="{
-                            preserveScroll: true,
-                        }"
-                        class="space-y-6"
-                        v-slot="{ errors, processing, reset, clearErrors }"
-                    >
-                        <DialogHeader class="space-y-3">
-                            <DialogTitle
-                                >Are you sure you want to delete your
-                                account?</DialogTitle
-                            >
-                            <DialogDescription>
-                                Once your account is deleted, all of its
-                                resources and data will also be permanently
-                                deleted. Please enter your password to confirm
-                                you would like to permanently delete your
-                                account.
-                            </DialogDescription>
-                        </DialogHeader>
+    <Card
+        class="border-destructive/35 gap-0 overflow-hidden rounded-xl py-0 shadow-none"
+    >
+        <CardHeader class="gap-stack border-b p-5 sm:p-6">
+            <h2 class="text-title">{{ t('profile.delete.title') }}</h2>
+            <p class="text-muted-foreground">
+                {{ t('profile.delete.description') }}
+            </p>
+        </CardHeader>
+        <CardContent class="p-5 sm:p-6">
+            <div
+                class="bg-destructive/8 border-destructive/25 gap-column grid rounded-lg border p-4"
+            >
+                <div class="gap-stack grid">
+                    <p class="text-destructive font-semibold">
+                        {{ t('profile.delete.warning') }}
+                    </p>
+                    <p class="text-body text-muted-foreground">
+                        {{ t('profile.delete.warningDescription') }}
+                    </p>
+                </div>
+                <Dialog>
+                    <DialogTrigger as-child>
+                        <Button
+                            variant="destructive"
+                            class="justify-self-start"
+                            data-test="delete-user-button"
+                            >{{ t('profile.delete.action') }}</Button
+                        >
+                    </DialogTrigger>
+                    <DialogContent>
+                        <Form
+                            v-bind="ProfileController.destroy.form()"
+                            reset-on-success
+                            @error="() => passwordInput?.focus()"
+                            :options="{
+                                preserveScroll: true,
+                            }"
+                            class="space-y-6"
+                            v-slot="{ errors, processing, reset, clearErrors }"
+                        >
+                            <DialogHeader class="space-y-3">
+                                <DialogTitle>{{
+                                    t('profile.delete.confirmTitle')
+                                }}</DialogTitle>
+                                <DialogDescription>
+                                    {{ t('profile.delete.confirmDescription') }}
+                                </DialogDescription>
+                            </DialogHeader>

-                        <div class="grid gap-2">
-                            <Label for="password" class="sr-only"
-                                >Password</Label
-                            >
-                            <PasswordInput
-                                id="password"
-                                name="password"
-                                ref="passwordInput"
-                                placeholder="Password"
-                            />
-                            <InputError :message="errors.password" />
-                        </div>
+                            <div class="grid gap-2">
+                                <Label for="password" class="sr-only">{{
+                                    t('profile.delete.password')
+                                }}</Label>
+                                <PasswordInput
+                                    id="password"
+                                    name="password"
+                                    ref="passwordInput"
+                                    :placeholder="t('profile.delete.password')"
+                                />
+                                <InputError :message="errors.password" />
+                            </div>
+
+                            <DialogFooter class="gap-2">
+                                <DialogClose as-child>
+                                    <Button
+                                        variant="secondary"
+                                        @click="
+                                            () => {
+                                                clearErrors();
+                                                reset();
+                                            }
+                                        "
+                                    >
+                                        {{ t('common.cancel') }}
+                                    </Button>
+                                </DialogClose>

-                        <DialogFooter class="gap-2">
-                            <DialogClose as-child>
                                <Button
-                                    variant="secondary"
-                                    @click="
-                                        () => {
-                                            clearErrors();
-                                            reset();
-                                        }
-                                    "
+                                    type="submit"
+                                    variant="destructive"
+                                    :disabled="processing"
+                                    data-test="confirm-delete-user-button"
                                >
-                                    Cancel
+                                    {{ t('profile.delete.confirmAction') }}
                                </Button>
-                            </DialogClose>
-
-                            <Button
-                                type="submit"
-                                variant="destructive"
-                                :disabled="processing"
-                                data-test="confirm-delete-user-button"
-                            >
-                                Delete account
-                            </Button>
-                        </DialogFooter>
-                    </Form>
-                </DialogContent>
-            </Dialog>
-        </div>
-    </div>
+                            </DialogFooter>
+                        </Form>
+                    </DialogContent>
+                </Dialog>
+            </div>
+        </CardContent>
+    </Card>
 </template>
@@ -1,45 +1,93 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
+import { ChevronDown, ChevronRight } from 'lucide-vue-next';
+import { reactive } from 'vue';
 import { Badge } from '@/components/ui/badge';
+import { useLocalization } from '@/composables/useLocalization';
 import { show as showTicket } from '@/routes/projects/tickets';
-import type { TicketTreeNodeModel } from '@/types/models/ticket-tree-node-model';
+import type { TicketTreeListProps } from '@/types/ticket-tree';

-defineProps<{
-    nodes: TicketTreeNodeModel[];
-    projectId: number;
-}>();
+defineProps<TicketTreeListProps>();
+
+const { t } = useLocalization();
+const collapsedTicketIds = reactive(new Set<number>());
+
+function toggleTicket(ticketId: number): void {
+    if (collapsedTicketIds.has(ticketId)) {
+        collapsedTicketIds.delete(ticketId);
+    } else {
+        collapsedTicketIds.add(ticketId);
+    }
+}
 </script>

 <template>
-    <ul class="space-y-3">
-        <li v-for="node in nodes" :key="node.id">
-            <div class="border-border rounded-xl border px-4 py-4">
-                <div class="flex flex-wrap items-center gap-2">
-                    <Link
-                        :href="
-                            showTicket({
-                                project: projectId,
-                                ticket: node.id,
-                            })
+    <ul class="grid min-w-0 gap-3">
+        <li v-for="node in nodes" :key="node.id" class="min-w-0">
+            <div class="grid min-w-0 grid-cols-[2.75rem_minmax(0,1fr)] gap-2">
+                <div class="flex justify-center pt-1">
+                    <button
+                        v-if="node.children.length > 0"
+                        type="button"
+                        class="border-border bg-card text-muted-foreground hover:border-primary hover:text-primary focus-visible:ring-ring/35 flex size-10 items-center justify-center rounded-md border transition-colors focus-visible:outline-none focus-visible:ring-2"
+                        :aria-expanded="!collapsedTicketIds.has(node.id)"
+                        :aria-controls="`ticket-tree-children-${node.id}`"
+                        :aria-label="
+                            t(
+                                collapsedTicketIds.has(node.id)
+                                    ? 'tickets.tree.expand'
+                                    : 'tickets.tree.collapse',
+                                { key: node.ticket_key },
+                            )
                        "
-                        class="text-foreground hover:text-primary font-medium transition"
+                        @click="toggleTicket(node.id)"
                    >
-                        {{ node.ticket_key }}
-                    </Link>
-
-                    <Badge v-if="node.ticket_type_name" variant="secondary">
-                        {{ node.ticket_type_name }}
-                    </Badge>
+                        <ChevronRight
+                            v-if="collapsedTicketIds.has(node.id)"
+                            class="size-4"
+                            aria-hidden="true"
+                        />
+                        <ChevronDown v-else class="size-4" aria-hidden="true" />
+                    </button>
+                    <span
+                        v-else
+                        class="bg-border mt-4 size-1.5 rounded-full"
+                        aria-hidden="true"
+                    />
                </div>

-                <div class="text-foreground mt-2 text-sm">
-                    {{ node.title }}
-                </div>
+                <Link
+                    :href="
+                        showTicket({
+                            project: projectId,
+                            ticket: node.id,
+                        })
+                    "
+                    class="bg-card text-card-foreground hover:border-primary focus-visible:ring-ring/35 gap-stack group grid min-w-0 rounded-md border p-4 transition-[border-color,box-shadow] focus-visible:outline-none focus-visible:ring-2"
+                >
+                    <div class="flex min-w-0 flex-wrap items-center gap-2">
+                        <Badge variant="outline">
+                            {{ node.ticket_key }}
+                        </Badge>
+                        <Badge v-if="node.ticket_type_name" variant="secondary">
+                            {{ node.ticket_type_name }}
+                        </Badge>
+                    </div>
+
+                    <span
+                        class="text-body group-hover:text-primary wrap-anywhere min-w-0 font-semibold"
+                    >
+                        {{ node.title }}
+                    </span>
+                </Link>
            </div>

            <div
-                v-if="node.children.length > 0"
-                class="border-border mt-3 border-l pl-4"
+                v-if="
+                    node.children.length > 0 && !collapsedTicketIds.has(node.id)
+                "
+                :id="`ticket-tree-children-${node.id}`"
+                class="border-border ml-[1.375rem] mt-3 border-l pl-2 sm:pl-4"
            >
                <TicketTreeList
                    :nodes="node.children"
@@ -1,123 +1,169 @@
 <script setup lang="ts">
-import { Form } from '@inertiajs/vue3';
+import { useForm } from '@inertiajs/vue3';
 import { Eye, EyeOff, LockKeyhole, RefreshCw } from 'lucide-vue-next';
-import { nextTick, onMounted, ref, useTemplateRef } from 'vue';
+import { ref } from 'vue';
 import AlertError from '@/components/AlertError.vue';
+import AuthFormFeedback from '@/components/AuthFormFeedback.vue';
 import { Button } from '@/components/ui/button';
 import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardHeader,
-    CardTitle,
-} from '@/components/ui/card';
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import { useFormProtection } from '@/composables/useFormProtection';
+import { useLocalization } from '@/composables/useLocalization';
 import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
 import { regenerateRecoveryCodes } from '@/routes/two-factor';

-const { recoveryCodesList, fetchRecoveryCodes, errors } = useTwoFactorAuth();
-const isRecoveryCodesVisible = ref<boolean>(false);
-const recoveryCodeSectionRef = useTemplateRef('recoveryCodeSectionRef');
+const { t } = useLocalization();
+const {
+    recoveryCodesList,
+    fetchRecoveryCodes,
+    clearRecoveryCodes,
+    errors,
+    loading,
+} = useTwoFactorAuth();
+const visible = ref(false);
+const showRegenerate = ref(false);
+const form = useForm({});
+const protection = useFormProtection(form);

-const toggleRecoveryCodesVisibility = async () => {
-    if (!isRecoveryCodesVisible.value && !recoveryCodesList.value.length) {
-        await fetchRecoveryCodes();
+function hide(): void {
+    visible.value = false;
+    clearRecoveryCodes();
+}
+function toggle(): void {
+    if (visible.value) {
+        hide();
+    } else {
+        visible.value = true;
+        void fetchRecoveryCodes();
    }
-
-    isRecoveryCodesVisible.value = !isRecoveryCodesVisible.value;
-
-    if (isRecoveryCodesVisible.value) {
-        await nextTick();
-        recoveryCodeSectionRef.value?.scrollIntoView({ behavior: 'smooth' });
+}
+function closeRegenerate(open: boolean): void {
+    if (!form.processing) {
+        showRegenerate.value = open;
+        protection.clearFeedback();
    }
-};
-
-onMounted(async () => {
-    if (!recoveryCodesList.value.length) {
-        await fetchRecoveryCodes();
-    }
-});
+}
+function regenerate(): void {
+    protection.submit(regenerateRecoveryCodes(), {
+        preserveScroll: true,
+        onBefore: hide,
+        onSuccess: () => {
+            showRegenerate.value = false;
+            visible.value = true;
+            return fetchRecoveryCodes();
+        },
+    });
+}
 </script>

 <template>
-    <Card class="w-full">
-        <CardHeader>
-            <CardTitle class="flex gap-3">
-                <LockKeyhole class="size-4" />2FA recovery codes
-            </CardTitle>
-            <CardDescription>
-                Recovery codes let you regain access if you lose your 2FA
-                device. Store them in a secure password manager.
-            </CardDescription>
-        </CardHeader>
-        <CardContent>
-            <div
-                class="flex select-none flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
+    <section
+        class="gap-column grid min-w-0 rounded-lg border p-4"
+        aria-labelledby="recovery-title"
+    >
+        <div class="gap-stack grid">
+            <h3
+                id="recovery-title"
+                class="flex items-center gap-2 font-semibold"
            >
-                <Button @click="toggleRecoveryCodesVisibility" class="w-fit">
-                    <component
-                        :is="isRecoveryCodesVisible ? EyeOff : Eye"
-                        class="size-4"
-                    />
-                    {{ isRecoveryCodesVisible ? 'Hide' : 'View' }} recovery
-                    codes
-                </Button>
-
-                <Form
-                    v-if="isRecoveryCodesVisible && recoveryCodesList.length"
-                    v-bind="regenerateRecoveryCodes.form()"
-                    method="post"
-                    :options="{ preserveScroll: true }"
-                    @success="fetchRecoveryCodes"
-                    #default="{ processing }"
+                <LockKeyhole class="text-primary size-4" />{{
+                    t('security.recoveryTitle')
+                }}
+            </h3>
+            <p class="text-body text-muted-foreground">
+                {{ t('security.recoveryDescription') }}
+            </p>
+        </div>
+        <div class="flex flex-wrap gap-3">
+            <Button
+                variant="outline"
+                :aria-expanded="visible"
+                aria-controls="recovery-codes"
+                :disabled="form.processing"
+                @click="toggle"
+                ><component :is="visible ? EyeOff : Eye" />{{
+                    t(
+                        visible
+                            ? 'security.hideRecovery'
+                            : 'security.viewRecovery',
+                    )
+                }}</Button
+            >
+            <Button
+                v-if="visible && recoveryCodesList.length"
+                variant="secondary"
+                @click="showRegenerate = true"
+                ><RefreshCw />{{ t('security.regenerate') }}</Button
+            >
+        </div>
+        <div v-if="visible" id="recovery-codes" class="gap-stack grid">
+            <p
+                v-if="loading"
+                role="status"
+                class="bg-muted animate-pulse rounded-lg p-4"
+            >
+                {{ t('security.loadingRecovery') }}
+            </p>
+            <template v-else-if="errors.length">
+                <AlertError :errors="errors" />
+                <Button
+                    class="justify-self-start"
+                    variant="outline"
+                    @click="fetchRecoveryCodes"
+                    >{{ t('common.retry') }}</Button
                >
-                    <Button
-                        variant="secondary"
-                        type="submit"
-                        :disabled="processing"
-                    >
-                        <RefreshCw /> Regenerate codes
-                    </Button>
-                </Form>
-            </div>
-            <div
-                :class="[
-                    'relative overflow-hidden transition-all duration-300',
-                    isRecoveryCodesVisible
-                        ? 'h-auto opacity-100'
-                        : 'h-0 opacity-0',
-                ]"
+            </template>
+            <template v-else>
+                <ul
+                    class="bg-muted grid gap-2 rounded-lg p-4 font-mono text-sm sm:grid-cols-2"
+                    :aria-label="t('security.recoveryTitle')"
+                >
+                    <li v-for="code in recoveryCodesList" :key="code">
+                        {{ code }}
+                    </li>
+                </ul>
+                <p class="text-caption text-muted-foreground">
+                    {{ t('security.recoveryOnce') }}
+                </p>
+            </template>
+        </div>
+        <Dialog :open="showRegenerate" @update:open="closeRegenerate">
+            <DialogContent
+                :show-close-button="!form.processing"
+                @escape-key-down="form.processing && $event.preventDefault()"
+                @interact-outside="form.processing && $event.preventDefault()"
            >
-                <div v-if="errors?.length" class="mt-6">
-                    <AlertError :errors="errors" />
-                </div>
-                <div v-else class="mt-3 space-y-3">
-                    <div
-                        ref="recoveryCodeSectionRef"
-                        class="bg-muted grid gap-1 rounded-lg p-4 font-mono text-sm"
+                <DialogHeader>
+                    <DialogTitle>{{
+                        t('security.regenerateTitle')
+                    }}</DialogTitle>
+                    <DialogDescription>{{
+                        t('security.regenerateDescription')
+                    }}</DialogDescription>
+                </DialogHeader>
+                <AuthFormFeedback
+                    :state="protection.state.value"
+                    :response-status="protection.responseStatus.value"
+                    @retry="regenerate"
+                />
+                <DialogFooter>
+                    <Button
+                        variant="outline"
+                        :disabled="form.processing"
+                        @click="closeRegenerate(false)"
+                        >{{ t('common.cancel') }}</Button
                    >
-                        <div v-if="!recoveryCodesList.length" class="space-y-2">
-                            <div
-                                v-for="n in 8"
-                                :key="n"
-                                class="bg-muted-foreground/20 h-4 animate-pulse rounded"
-                            ></div>
-                        </div>
-                        <div
-                            v-else
-                            v-for="(code, index) in recoveryCodesList"
-                            :key="index"
-                        >
-                            {{ code }}
-                        </div>
-                    </div>
-                    <p class="text-muted-foreground select-none text-xs">
-                        Each recovery code can be used once to access your
-                        account and will be removed after use. If you need more,
-                        click
-                        <span class="font-bold">Regenerate codes</span> above.
-                    </p>
-                </div>
-            </div>
-        </CardContent>
-    </Card>
+                    <Button :loading="form.processing" @click="regenerate">{{
+                        t('security.regenerate')
+                    }}</Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    </section>
 </template>
@@ -1,297 +1,261 @@
 <script setup lang="ts">
-import { Form } from '@inertiajs/vue3';
-import { useClipboard } from '@vueuse/core';
+import { useForm } from '@inertiajs/vue3';
 import { Check, Copy, ScanLine } from 'lucide-vue-next';
 import { computed, nextTick, ref, useTemplateRef, watch } from 'vue';
 import AlertError from '@/components/AlertError.vue';
+import AuthFormFeedback from '@/components/AuthFormFeedback.vue';
 import InputError from '@/components/InputError.vue';
 import { Button } from '@/components/ui/button';
 import {
    Dialog,
    DialogContent,
    DialogDescription,
+    DialogFooter,
    DialogHeader,
    DialogTitle,
 } from '@/components/ui/dialog';
-import {
-    InputOTP,
-    InputOTPGroup,
-    InputOTPSlot,
-} from '@/components/ui/input-otp';
-import { Spinner } from '@/components/ui/spinner';
-import { useAppearance } from '@/composables/useAppearance';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useFormProtection } from '@/composables/useFormProtection';
+import { useLocalization } from '@/composables/useLocalization';
 import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
 import { confirm } from '@/routes/two-factor';
-import type { TwoFactorConfigContent } from '@/types';

-type Props = {
+const props = defineProps<{
    requiresConfirmation: boolean;
    twoFactorEnabled: boolean;
-};
-
-const { resolvedAppearance } = useAppearance();
-
-const props = defineProps<Props>();
+}>();
 const isOpen = defineModel<boolean>('isOpen');
+const { t } = useLocalization();
+const {
+    qrCodeSvg,
+    manualSetupKey,
+    hasSetupData,
+    clearSetupData,
+    fetchSetupData,
+    errors,
+    loading,
+} = useTwoFactorAuth();
+const form = useForm({ code: '' }).dontRemember('code');
+const protection = useFormProtection(form, { isDirty: () => false });
+const verification = ref(false);
+const copied = ref(false);
+const copyError = ref(false);
+const codeInput = useTemplateRef('codeInput');
+const title = computed(() =>
+    t(
+        props.twoFactorEnabled
+            ? 'security.setupEnabled'
+            : verification.value
+              ? 'security.verifyTitle'
+              : 'security.setupTitle',
+    ),
+);
+const description = computed(() =>
+    t(
+        props.twoFactorEnabled
+            ? 'security.setupEnabledDescription'
+            : verification.value
+              ? 'security.verifyDescription'
+              : 'security.setupDescription',
+    ),
+);

-const { copy, copied } = useClipboard();
-const { qrCodeSvg, manualSetupKey, clearSetupData, fetchSetupData, errors } =
-    useTwoFactorAuth();
-
-const showVerificationStep = ref(false);
-const code = ref<string>('');
-
-const pinInputContainerRef = useTemplateRef('pinInputContainerRef');
-
-const modalConfig = computed<TwoFactorConfigContent>(() => {
-    if (props.twoFactorEnabled) {
-        return {
-            title: 'Two-factor authentication enabled',
-            description:
-                'Two-factor authentication is now enabled. Scan the QR code or enter the setup key in your authenticator app.',
-            buttonText: 'Close',
-        };
+function close(open: boolean): void {
+    if (!form.processing) {
+        isOpen.value = open;
    }
-
-    if (showVerificationStep.value) {
-        return {
-            title: 'Verify authentication code',
-            description: 'Enter the 6-digit code from your authenticator app',
-            buttonText: 'Continue',
-        };
-    }
-
-    return {
-        title: 'Enable two-factor authentication',
-        description:
-            'To finish enabling two-factor authentication, scan the QR code or enter the setup key in your authenticator app',
-        buttonText: 'Continue',
-    };
-});
-
-const handleModalNextStep = () => {
-    if (props.requiresConfirmation) {
-        showVerificationStep.value = true;
-
-        nextTick(() => {
-            pinInputContainerRef.value?.querySelector('input')?.focus();
-        });
-
+}
+async function next(): Promise<void> {
+    if (props.twoFactorEnabled || !props.requiresConfirmation) {
+        close(false);
        return;
    }
-
-    clearSetupData();
-    isOpen.value = false;
-};
-
-const resetModalState = () => {
-    if (props.twoFactorEnabled) {
-        clearSetupData();
+    verification.value = true;
+    await nextTick();
+    codeInput.value?.$el?.focus();
+}
+function submit(): void {
+    protection.submit(confirm(), {
+        preserveScroll: true,
+        errorBag: 'confirmTwoFactorAuthentication',
+        onSuccess: () => {
+            isOpen.value = false;
+        },
+        onFinish: () => {
+            form.reset();
+        },
+    });
+}
+async function copyKey(): Promise<void> {
+    const key = manualSetupKey.value;
+    if (!key) {
+        return;
    }
-
-    showVerificationStep.value = false;
-    code.value = '';
-};
-
-watch(
-    () => isOpen.value,
-    async (isOpen) => {
-        if (!isOpen) {
-            resetModalState();
-
-            return;
+    copyError.value = false;
+    try {
+        await navigator.clipboard.writeText(key);
+        if (isOpen.value && manualSetupKey.value === key) {
+            copied.value = true;
        }
-
-        if (!qrCodeSvg.value) {
-            await fetchSetupData();
+    } catch {
+        if (isOpen.value) {
+            copyError.value = true;
        }
-    },
-);
+    }
+}
+watch(isOpen, (open) => {
+    verification.value = false;
+    copied.value = false;
+    copyError.value = false;
+    form.resetAndClearErrors();
+    protection.clearFeedback();
+    clearSetupData();
+    if (open) {
+        void fetchSetupData();
+    }
+});
 </script>

 <template>
-    <Dialog :open="isOpen" @update:open="isOpen = $event">
-        <DialogContent class="sm:max-w-md">
-            <DialogHeader class="flex items-center justify-center">
-                <div
-                    class="border-border bg-card mb-3 w-auto rounded-full border p-0.5 shadow-sm"
+    <Dialog :open="isOpen" @update:open="close">
+        <DialogContent
+            class="sm:max-w-md"
+            :show-close-button="!form.processing"
+            @escape-key-down="form.processing && $event.preventDefault()"
+            @interact-outside="form.processing && $event.preventDefault()"
+        >
+            <DialogHeader>
+                <ScanLine class="text-primary size-8" />
+                <DialogTitle>{{ title }}</DialogTitle>
+                <DialogDescription>{{ description }}</DialogDescription>
+            </DialogHeader>
+            <template v-if="!verification">
+                <p
+                    v-if="loading"
+                    role="status"
+                    class="bg-muted animate-pulse rounded-lg p-6 text-center"
                >
+                    {{ t('security.loadingSetup') }}
+                </p>
+                <div v-else-if="errors.length" class="gap-stack grid">
+                    <AlertError :errors="errors" />
+                    <Button variant="outline" @click="fetchSetupData">{{
+                        t('common.retry')
+                    }}</Button>
+                </div>
+                <div v-else-if="hasSetupData" class="gap-column grid min-w-0">
                    <div
-                        class="border-border bg-muted relative overflow-hidden rounded-full border p-2.5"
-                    >
-                        <div
-                            class="absolute inset-0 grid grid-cols-5 opacity-50"
-                        >
-                            <div
-                                v-for="i in 5"
-                                :key="`col-${i}`"
-                                class="border-border border-r last:border-r-0"
+                        class="mx-auto aspect-square w-full max-w-56 rounded-lg border bg-white p-4 text-black"
+                        v-html="qrCodeSvg"
+                    />
+                    <div class="grid min-w-0 gap-2">
+                        <Label for="setup-key">{{
+                            t('security.manualKey')
+                        }}</Label>
+                        <div class="flex min-w-0 gap-2">
+                            <Input
+                                id="setup-key"
+                                :model-value="manualSetupKey"
+                                readonly
+                                class="min-w-0 font-mono text-xs"
                            />
+                            <Button
+                                variant="outline"
+                                :aria-label="
+                                    t(
+                                        copied
+                                            ? 'security.copied'
+                                            : 'security.copyKey',
+                                    )
+                                "
+                                @click="copyKey"
+                                ><Check v-if="copied" /><Copy v-else
+                            /></Button>
                        </div>
-                        <div
-                            class="absolute inset-0 grid grid-rows-5 opacity-50"
+                        <p
+                            v-if="copied"
+                            role="status"
+                            class="text-caption text-success-foreground"
                        >
-                            <div
-                                v-for="i in 5"
-                                :key="`row-${i}`"
-                                class="border-border border-b last:border-b-0"
-                            />
-                        </div>
-                        <ScanLine
-                            class="text-foreground relative z-20 size-6"
+                            {{ t('security.copied') }}
+                        </p>
+                        <InputError
+                            v-if="copyError"
+                            :message="t('security.copyError')"
                        />
                    </div>
                </div>
-                <DialogTitle>{{ modalConfig.title }}</DialogTitle>
-                <DialogDescription class="text-center">
-                    {{ modalConfig.description }}
-                </DialogDescription>
-            </DialogHeader>
-
-            <div
-                class="relative flex w-auto flex-col items-center justify-center space-y-5"
-            >
-                <template v-if="!showVerificationStep">
-                    <AlertError v-if="errors?.length" :errors="errors" />
-                    <template v-else>
-                        <div
-                            class="relative mx-auto flex max-w-md items-center overflow-hidden"
-                        >
-                            <div
-                                class="border-border relative mx-auto aspect-square w-64 overflow-hidden rounded-lg border"
-                            >
-                                <div
-                                    v-if="!qrCodeSvg"
-                                    class="bg-background absolute inset-0 z-10 flex aspect-square h-auto w-full animate-pulse items-center justify-center"
-                                >
-                                    <Spinner class="size-6" />
-                                </div>
-                                <div
-                                    v-else
-                                    class="relative z-10 overflow-hidden border p-5"
-                                >
-                                    <div
-                                        v-html="qrCodeSvg"
-                                        class="flex aspect-square size-full items-center justify-center"
-                                        :style="{
-                                            filter:
-                                                resolvedAppearance === 'dark'
-                                                    ? 'invert(1) brightness(1.5)'
-                                                    : undefined,
-                                        }"
-                                    />
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="flex w-full items-center space-x-5">
-                            <Button class="w-full" @click="handleModalNextStep">
-                                {{ modalConfig.buttonText }}
-                            </Button>
-                        </div>
-
-                        <div
-                            class="relative flex w-full items-center justify-center"
-                        >
-                            <div
-                                class="bg-border absolute inset-0 top-1/2 h-px w-full"
-                            />
-                            <span class="bg-card relative px-2 py-1"
-                                >or, enter the code manually</span
-                            >
-                        </div>
-
-                        <div
-                            class="flex w-full items-center justify-center space-x-2"
-                        >
-                            <div
-                                class="border-border flex w-full items-stretch overflow-hidden rounded-xl border"
-                            >
-                                <div
-                                    v-if="!manualSetupKey"
-                                    class="bg-muted flex h-full w-full items-center justify-center p-3"
-                                >
-                                    <Spinner />
-                                </div>
-                                <template v-else>
-                                    <input
-                                        type="text"
-                                        readonly
-                                        :value="manualSetupKey"
-                                        class="bg-background text-foreground h-full w-full p-3"
-                                    />
-                                    <button
-                                        @click="copy(manualSetupKey || '')"
-                                        class="border-border hover:bg-muted relative block h-auto border-l px-3"
-                                    >
-                                        <Check
-                                            v-if="copied"
-                                            class="w-4 text-green-500"
-                                        />
-                                        <Copy v-else class="w-4" />
-                                    </button>
-                                </template>
-                            </div>
-                        </div>
-                    </template>
-                </template>
-
-                <template v-else>
-                    <Form
-                        v-bind="confirm.form()"
-                        error-bag="confirmTwoFactorAuthentication"
-                        reset-on-error
-                        @finish="code = ''"
-                        @success="isOpen = false"
-                        v-slot="{ errors, processing }"
+                <p
+                    v-if="requiresConfirmation && !twoFactorEnabled"
+                    class="text-caption text-muted-foreground"
+                >
+                    {{ t('security.setupPendingDescription') }}
+                </p>
+                <DialogFooter>
+                    <Button variant="outline" @click="close(false)">{{
+                        t('common.close')
+                    }}</Button>
+                    <Button v-if="hasSetupData" @click="next">{{
+                        t(
+                            twoFactorEnabled || !requiresConfirmation
+                                ? 'common.done'
+                                : 'security.continue',
+                        )
+                    }}</Button>
+                </DialogFooter>
+            </template>
+            <form v-else class="gap-column grid" @submit.prevent="submit">
+                <AuthFormFeedback
+                    :state="protection.state.value"
+                    :response-status="protection.responseStatus.value"
+                    @retry="submit"
+                />
+                <div class="grid gap-2">
+                    <Label for="authentication-code">{{
+                        t('security.authenticationCode')
+                    }}</Label>
+                    <Input
+                        id="authentication-code"
+                        ref="codeInput"
+                        v-model="form.code"
+                        name="code"
+                        type="text"
+                        inputmode="numeric"
+                        autocomplete="one-time-code"
+                        pattern="[0-9]{6}"
+                        maxlength="6"
+                        required
+                        :disabled="form.processing"
+                        :aria-invalid="!!form.errors.code"
+                        aria-describedby="authentication-code-error"
+                        class="font-mono text-lg tracking-widest"
+                    />
+                    <InputError
+                        id="authentication-code-error"
+                        :message="form.errors.code"
+                    />
+                </div>
+                <DialogFooter>
+                    <Button
+                        type="button"
+                        variant="outline"
+                        :disabled="form.processing"
+                        @click="
+                            verification = false;
+                            form.resetAndClearErrors();
+                            protection.clearFeedback();
+                        "
+                        >{{ t('common.back') }}</Button
                    >
-                        <input type="hidden" name="code" :value="code" />
-                        <div
-                            ref="pinInputContainerRef"
-                            class="relative w-full space-y-3"
-                        >
-                            <div
-                                class="flex w-full flex-col items-center justify-center space-y-3 py-2"
-                            >
-                                <InputOTP
-                                    id="otp"
-                                    v-model="code"
-                                    :maxlength="6"
-                                    :disabled="processing"
-                                >
-                                    <InputOTPGroup>
-                                        <InputOTPSlot
-                                            v-for="index in 6"
-                                            :key="index"
-                                            :index="index - 1"
-                                        />
-                                    </InputOTPGroup>
-                                </InputOTP>
-                                <InputError :message="errors?.code" />
-                            </div>
-
-                            <div class="flex w-full items-center space-x-5">
-                                <Button
-                                    type="button"
-                                    variant="outline"
-                                    class="w-auto flex-1"
-                                    @click="showVerificationStep = false"
-                                    :disabled="processing"
-                                >
-                                    Back
-                                </Button>
-                                <Button
-                                    type="submit"
-                                    class="w-auto flex-1"
-                                    :disabled="processing || code.length < 6"
-                                >
-                                    Confirm
-                                </Button>
-                            </div>
-                        </div>
-                    </Form>
-                </template>
-            </div>
+                    <Button
+                        type="submit"
+                        :disabled="form.code.length !== 6"
+                        :loading="form.processing"
+                        >{{ t('security.confirm') }}</Button
+                    >
+                </DialogFooter>
+            </form>
        </DialogContent>
    </Dialog>
 </template>
@@ -0,0 +1,363 @@
+<script setup lang="ts">
+import { useForm } from '@inertiajs/vue3';
+import { computed, ref, watch } from 'vue';
+import {
+    destroyPriority,
+    destroyType,
+    storePriority,
+    storeType,
+    updatePriority,
+    updateType,
+} from '@/actions/App/Http/Controllers/ProjectTicketMetadataSettingsController';
+import FormFeedback from '@/components/FormFeedback.vue';
+import InputError from '@/components/InputError.vue';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useFormProtection } from '@/composables/useFormProtection';
+import { useLocalization } from '@/composables/useLocalization';
+import type { TicketPriorityModel } from '@/types/models/ticket-priority-model';
+import type { TicketTypeModel } from '@/types/models/ticket-type-model';
+import type { MetadataEditorTarget } from '@/types/project-metadata';
+
+const props = defineProps<{
+    projectId: number;
+    target: MetadataEditorTarget | null;
+    types: TicketTypeModel[];
+    priorities: TicketPriorityModel[];
+}>();
+const emit = defineEmits<{ close: [] }>();
+const { t } = useLocalization();
+const form = useForm({
+    name: '',
+    position: 1,
+    is_parent: false,
+    replacement_ticket_type_id: '',
+});
+const protection = useFormProtection(form, {
+    isDirty: () => props.target !== null && form.isDirty,
+});
+const deletionError = ref<string | null>(null);
+const deleting = computed(() => props.target?.action === 'delete');
+const entries = computed(() =>
+    props.target?.kind === 'type' ? props.types : props.priorities,
+);
+const replacements = computed(() =>
+    props.types.filter((type) => type.id !== props.target?.entry?.id),
+);
+const needsReplacement = computed(
+    () =>
+        deleting.value &&
+        props.target?.kind === 'type' &&
+        (props.target.entry?.tickets_count ?? 0) > 0,
+);
+const title = computed(() => {
+    const target = props.target;
+    if (!target) {
+        return '';
+    }
+    if (target.action === 'create') {
+        return t(
+            target.kind === 'type'
+                ? 'metadata.addType'
+                : 'metadata.addPriority',
+        );
+    }
+    return t(
+        target.action === 'edit'
+            ? 'metadata.editEntry'
+            : 'metadata.deleteEntry',
+        { name: target.entry.name },
+    );
+});
+watch(
+    () => props.target,
+    (target) => {
+        if (!target) {
+            return;
+        }
+        form.defaults({
+            name: target.entry?.name ?? '',
+            position: target.entry?.position ?? 1,
+            is_parent: target.entry?.is_parent ?? false,
+            replacement_ticket_type_id: '',
+        });
+        form.resetAndClearErrors();
+        protection.clearFeedback();
+        deletionError.value = null;
+    },
+    { immediate: true },
+);
+function close(open: boolean): void {
+    if (open || form.processing || !protection.confirmLeave()) {
+        return;
+    }
+    form.resetAndClearErrors();
+    protection.clearFeedback();
+    emit('close');
+}
+function submit(): void {
+    const target = props.target;
+    if (
+        !target ||
+        form.processing ||
+        (deleting.value && entries.value.length <= 1)
+    ) {
+        return;
+    }
+    const route =
+        target.kind === 'type'
+            ? target.action === 'create'
+                ? storeType(props.projectId)
+                : target.action === 'edit'
+                  ? updateType([props.projectId, target.entry.id])
+                  : destroyType([props.projectId, target.entry.id])
+            : target.action === 'create'
+              ? storePriority(props.projectId)
+              : target.action === 'edit'
+                ? updatePriority([props.projectId, target.entry.id])
+                : destroyPriority([props.projectId, target.entry.id]);
+    form.transform((data) =>
+        target.action === 'delete'
+            ? target.kind === 'type'
+                ? {
+                      replacement_ticket_type_id:
+                          data.replacement_ticket_type_id || null,
+                  }
+                : {}
+            : target.action === 'edit'
+              ? { name: data.name, position: data.position }
+              : target.kind === 'type'
+                ? { name: data.name, is_parent: data.is_parent }
+                : { name: data.name },
+    );
+    deletionError.value = null;
+    protection.submit(route, {
+        preserveScroll: true,
+        onSuccess: (page) => {
+            if (page.props.error) {
+                deletionError.value =
+                    typeof page.props.status === 'string'
+                        ? page.props.status
+                        : t('common.error');
+                return;
+            }
+            form.resetAndClearErrors();
+            emit('close');
+        },
+    });
+}
+</script>
+
+<template>
+    <Dialog :open="target !== null" @update:open="close">
+        <DialogContent
+            :show-close-button="!form.processing"
+            @escape-key-down="form.processing && $event.preventDefault()"
+            @interact-outside="form.processing && $event.preventDefault()"
+        >
+            <DialogHeader>
+                <DialogTitle class="break-words">{{ title }}</DialogTitle>
+                <DialogDescription>{{
+                    t(
+                        deleting
+                            ? target?.kind === 'type'
+                                ? 'metadata.deleteTypeHelp'
+                                : 'metadata.deletePriorityHelp'
+                            : 'metadata.editHelp',
+                    )
+                }}</DialogDescription>
+            </DialogHeader>
+            <form
+                class="grid min-w-0 gap-4"
+                :aria-busy="form.processing"
+                @submit.prevent="submit"
+            >
+                <FormFeedback
+                    :state="deletionError ? 'idle' : protection.state.value"
+                    @retry="submit"
+                />
+                <p
+                    v-if="deletionError"
+                    role="alert"
+                    class="text-destructive text-sm"
+                >
+                    {{ deletionError }}
+                </p>
+                <fieldset
+                    :disabled="form.processing"
+                    class="grid min-w-0 gap-4"
+                >
+                    <template v-if="!deleting">
+                        <div class="grid gap-2">
+                            <Label for="metadata-name">{{
+                                t('metadata.name')
+                            }}</Label>
+                            <Input
+                                id="metadata-name"
+                                v-model="form.name"
+                                name="name"
+                                required
+                                maxlength="255"
+                                :aria-invalid="!!form.errors.name"
+                                aria-describedby="metadata-name-error"
+                            />
+                            <InputError
+                                id="metadata-name-error"
+                                :message="form.errors.name"
+                            />
+                        </div>
+                        <div
+                            v-if="target?.action === 'edit'"
+                            class="grid gap-2"
+                        >
+                            <Label for="metadata-position">{{
+                                t('workflow.position')
+                            }}</Label>
+                            <Input
+                                id="metadata-position"
+                                v-model="form.position"
+                                name="position"
+                                type="number"
+                                min="1"
+                                :max="entries.length"
+                                step="1"
+                                required
+                                :aria-invalid="!!form.errors.position"
+                                aria-describedby="metadata-position-help metadata-position-error"
+                            />
+                            <p
+                                id="metadata-position-help"
+                                class="text-caption text-muted-foreground"
+                            >
+                                {{
+                                    t('metadata.positionHelp', {
+                                        count: entries.length,
+                                    })
+                                }}
+                            </p>
+                            <InputError
+                                id="metadata-position-error"
+                                :message="form.errors.position"
+                            />
+                        </div>
+                        <div v-if="target?.kind === 'type'" class="grid gap-2">
+                            <Label
+                                v-if="target.action === 'create'"
+                                for="metadata-parent"
+                                class="flex items-center gap-3"
+                            >
+                                <Checkbox
+                                    id="metadata-parent"
+                                    v-model="form.is_parent"
+                                    name="is_parent"
+                                    :invalid="!!form.errors.is_parent"
+                                    aria-describedby="metadata-parent-help metadata-parent-error"
+                                />{{ t('metadata.allowChildren') }}
+                            </Label>
+                            <p v-else class="text-sm font-medium">
+                                {{
+                                    t(
+                                        form.is_parent
+                                            ? 'metadata.parentType'
+                                            : 'metadata.standardType',
+                                    )
+                                }}
+                            </p>
+                            <p
+                                id="metadata-parent-help"
+                                class="text-caption text-muted-foreground"
+                            >
+                                {{ t('metadata.parentFixed') }}
+                            </p>
+                            <InputError
+                                id="metadata-parent-error"
+                                :message="form.errors.is_parent"
+                            />
+                        </div>
+                    </template>
+                    <div v-if="needsReplacement" class="grid gap-2">
+                        <p class="text-sm">
+                            {{
+                                t('metadata.replacementHelp', {
+                                    count: target?.entry?.tickets_count ?? 0,
+                                })
+                            }}
+                        </p>
+                        <Label for="metadata-replacement">{{
+                            t('metadata.replacement')
+                        }}</Label>
+                        <select
+                            id="metadata-replacement"
+                            v-model="form.replacement_ticket_type_id"
+                            name="replacement_ticket_type_id"
+                            required
+                            class="border-input bg-background focus-visible:ring-ring min-h-11 w-full min-w-0 rounded-md border px-3 text-sm focus-visible:ring-2"
+                            :aria-invalid="
+                                !!form.errors.replacement_ticket_type_id
+                            "
+                            aria-describedby="metadata-replacement-help metadata-replacement-error"
+                        >
+                            <option value="">
+                                {{ t('metadata.chooseType') }}
+                            </option>
+                            <option
+                                v-for="entry in replacements"
+                                :key="entry.id"
+                                :value="entry.id"
+                            >
+                                {{ entry.name
+                                }}{{
+                                    entry.is_parent
+                                        ? ` (${t('metadata.parentType')})`
+                                        : ''
+                                }}
+                            </option>
+                        </select>
+                        <p
+                            id="metadata-replacement-help"
+                            class="text-caption text-muted-foreground"
+                        >
+                            {{ t('metadata.parentReplacement') }}
+                        </p>
+                    </div>
+                    <InputError
+                        id="metadata-replacement-error"
+                        :message="form.errors.replacement_ticket_type_id"
+                    />
+                </fieldset>
+                <DialogFooter>
+                    <Button
+                        type="button"
+                        variant="outline"
+                        :disabled="form.processing"
+                        @click="close(false)"
+                        >{{ t('common.cancel') }}</Button
+                    >
+                    <Button
+                        type="submit"
+                        :variant="deleting ? 'destructive' : 'default'"
+                        :loading="form.processing"
+                        :disabled="deleting && entries.length <= 1"
+                        >{{
+                            deleting
+                                ? t('workflow.confirmDelete')
+                                : target?.action === 'create'
+                                  ? title
+                                  : t('common.save')
+                        }}</Button
+                    >
+                </DialogFooter>
+            </form>
+        </DialogContent>
+    </Dialog>
+</template>
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { LockKeyhole, Pencil, Plus, Trash2 } from 'lucide-vue-next';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { useLocalization } from '@/composables/useLocalization';
+import type {
+    MetadataEditorTarget,
+    MetadataEntry,
+    MetadataKind,
+} from '@/types/project-metadata';
+
+defineProps<{ kind: MetadataKind; entries: MetadataEntry[] }>();
+defineEmits<{ edit: [target: MetadataEditorTarget] }>();
+const { t } = useLocalization();
+</script>
+
+<template>
+    <section
+        class="bg-card grid min-w-0 gap-4 overflow-hidden rounded-xl border p-4 sm:p-6"
+        :aria-labelledby="`metadata-${kind}`"
+    >
+        <header class="flex flex-wrap items-center justify-between gap-3">
+            <div class="flex items-center gap-2">
+                <h3 :id="`metadata-${kind}`" class="font-semibold">
+                    {{
+                        t(
+                            kind === 'type'
+                                ? 'metadata.types'
+                                : 'metadata.priorities',
+                        )
+                    }}
+                </h3>
+                <Badge variant="secondary">{{ entries.length }}</Badge>
+            </div>
+            <Button
+                type="button"
+                variant="outline"
+                class="w-full sm:w-auto"
+                @click="$emit('edit', { kind, action: 'create' })"
+            >
+                <Plus class="size-4" aria-hidden="true" />{{
+                    t(
+                        kind === 'type'
+                            ? 'metadata.addType'
+                            : 'metadata.addPriority',
+                    )
+                }}
+            </Button>
+        </header>
+        <p class="text-muted-foreground text-sm">
+            {{
+                t(
+                    kind === 'type'
+                        ? 'metadata.typesDescription'
+                        : 'metadata.prioritiesDescription',
+                )
+            }}
+        </p>
+        <ol
+            class="divide-y"
+            :aria-label="
+                t(kind === 'type' ? 'metadata.types' : 'metadata.priorities')
+            "
+        >
+            <li
+                v-for="entry in entries"
+                :key="entry.id"
+                class="flex min-w-0 flex-wrap items-center gap-3 py-4"
+                :data-metadata-entry="`${kind}-${entry.id}`"
+            >
+                <span
+                    class="bg-accent text-accent-foreground flex size-9 shrink-0 items-center justify-center rounded-lg text-sm font-semibold"
+                    :aria-label="
+                        t('workflow.positionValue', {
+                            position: entry.position,
+                        })
+                    "
+                    >{{ entry.position }}</span
+                >
+                <div class="grid min-w-0 flex-1 basis-28 gap-1">
+                    <p class="break-words font-medium">{{ entry.name }}</p>
+                    <div
+                        v-if="kind === 'type'"
+                        class="text-caption text-muted-foreground flex flex-wrap items-center gap-2"
+                    >
+                        <Badge variant="outline">{{
+                            t(
+                                entry.is_parent
+                                    ? 'metadata.parentType'
+                                    : 'metadata.standardType',
+                            )
+                        }}</Badge>
+                        <span>{{
+                            t('metadata.assignedTickets', {
+                                count: entry.tickets_count ?? 0,
+                            })
+                        }}</span>
+                    </div>
+                </div>
+                <div class="flex shrink-0 gap-1">
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        :aria-label="
+                            t('metadata.editEntry', { name: entry.name })
+                        "
+                        @click="$emit('edit', { kind, action: 'edit', entry })"
+                        ><Pencil class="size-4" aria-hidden="true"
+                    /></Button>
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        class="text-destructive"
+                        :disabled="entries.length <= 1"
+                        :aria-label="
+                            t('metadata.deleteEntry', { name: entry.name })
+                        "
+                        :aria-describedby="
+                            entries.length <= 1
+                                ? `metadata-${kind}-protection`
+                                : undefined
+                        "
+                        @click="
+                            $emit('edit', { kind, action: 'delete', entry })
+                        "
+                        ><Trash2 class="size-4" aria-hidden="true"
+                    /></Button>
+                </div>
+            </li>
+        </ol>
+        <p
+            v-if="entries.length <= 1"
+            :id="`metadata-${kind}-protection`"
+            class="text-caption text-muted-foreground flex items-start gap-2"
+        >
+            <LockKeyhole class="size-4 shrink-0" aria-hidden="true" />{{
+                t(
+                    kind === 'type'
+                        ? 'metadata.lastType'
+                        : 'metadata.lastPriority',
+                )
+            }}
+        </p>
+    </section>
+</template>
@@ -1,26 +1,32 @@
 <script setup lang="ts">
 import { useForm } from '@inertiajs/vue3';
-import ProjectController from '@/actions/App/Http/Controllers/ProjectController';
+import { Layers3, RotateCcw } from 'lucide-vue-next';
+import { computed, ref } from 'vue';
+import { resetTemplate } from '@/actions/App/Http/Controllers/ProjectController';
+import FormFeedback from '@/components/FormFeedback.vue';
 import InputError from '@/components/InputError.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardHeader,
-    CardTitle,
-} from '@/components/ui/card';
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
 import { Label } from '@/components/ui/label';
+import { useFormProtection } from '@/composables/useFormProtection';
+import { useLocalization } from '@/composables/useLocalization';
 import type { ProjectTemplateState, ProjectTemplateStateArea } from '@/types';
-import { computed } from 'vue';

 const props = defineProps<{
    areas: string[];
    projectId: number;
    templateState?: ProjectTemplateState | null;
 }>();
-
+const { t } = useLocalization();
 const form = useForm<{
    areas: string[];
    status_replacements: Record<string, number | undefined>;
@@ -28,51 +34,82 @@ const form = useForm<{
    areas: [],
    status_replacements: {},
 });
-
-const activeArea = computed(() => form.areas[0]);
-
+const protection = useFormProtection(form);
+const pendingArea = ref<ProjectTemplateStateArea | null>(null);
 const inheritedAreas = computed(
    () =>
        props.templateState?.inheritedAreas.filter((area) =>
            props.areas.includes(area.value),
        ) ?? [],
 );
-
 const overriddenAreas = computed(
    () =>
        props.templateState?.overriddenAreas.filter((area) =>
            props.areas.includes(area.value),
        ) ?? [],
 );
-
-const statusRequirement = computed(
-    () => props.templateState?.resetRequirements?.ticket_statuses,
+const statusRequirement = computed(() =>
+    pendingArea.value?.value === 'ticket_statuses'
+        ? props.templateState?.resetRequirements?.ticket_statuses
+        : undefined,
 );
-
-const canReset = (area: ProjectTemplateStateArea): boolean => {
-    if (area.value !== 'ticket_statuses') {
-        return true;
-    }
-
-    return (
-        statusRequirement.value?.removedStatuses.every(
-            (status) =>
-                form.status_replacements[String(status.id)] !== undefined,
-        ) ?? true
-    );
-};
-
-const resetArea = (area: ProjectTemplateStateArea): void => {
-    if (!canReset(area)) {
+const canReset = computed(
+    () =>
+        statusRequirement.value?.removedStatuses.every((status) =>
+            statusRequirement.value?.replacementOptions.some(
+                (option) =>
+                    option.id === form.status_replacements[String(status.id)],
+            ),
+        ) ?? true,
+);
+const areaKeys = {
+    project_settings: 'inheritance.area.projectSettings',
+    board_columns: 'inheritance.area.boardColumns',
+    ticket_statuses: 'inheritance.area.ticketStatuses',
+    status_transitions: 'inheritance.area.statusTransitions',
+    ticket_types: 'inheritance.area.ticketTypes',
+    ticket_priorities: 'inheritance.area.ticketPriorities',
+    ticket_fields: 'inheritance.area.ticketFields',
+    ticket_link_types: 'inheritance.area.ticketLinkTypes',
+    repository_connections: 'inheritance.area.repositoryConnections',
+    notification_actions: 'inheritance.area.notificationActions',
+} as const;
+function areaLabel(area: ProjectTemplateStateArea): string {
+    const key = areaKeys[area.value as keyof typeof areaKeys];
+    return key ? t(key) : area.label;
+}
+function openReset(area: ProjectTemplateStateArea): void {
+    form.resetAndClearErrors();
+    protection.clearFeedback();
+    pendingArea.value = area;
+}
+function closeReset(open: boolean): void {
+    if (open || form.processing || !protection.confirmLeave()) {
        return;
    }
-
-    form.areas = [area.value];
-    form.post(ProjectController.resetTemplate.url(props.projectId), {
+    pendingArea.value = null;
+    form.resetAndClearErrors();
+    protection.clearFeedback();
+}
+function resetArea(): void {
+    if (
+        !pendingArea.value ||
+        !canReset.value ||
+        !overriddenAreas.value.some(
+            (area) => area.value === pendingArea.value?.value,
+        )
+    ) {
+        return;
+    }
+    form.areas = [pendingArea.value.value];
+    protection.submit(resetTemplate(props.projectId), {
        preserveScroll: true,
-        onSuccess: () => form.reset(),
+        onSuccess: () => {
+            form.resetAndClearErrors();
+            pendingArea.value = null;
+        },
    });
-};
+}
 </script>

 <template>
@@ -81,97 +118,208 @@ const resetArea = (area: ProjectTemplateStateArea): void => {
            templateState?.inheritsFromTemplate &&
            (inheritedAreas.length > 0 || overriddenAreas.length > 0)
        "
+        class="min-w-0 gap-0 overflow-hidden rounded-xl py-0 shadow-none"
    >
-        <CardHeader>
-            <CardTitle>
-                Template inheritance: {{ templateState.templateName }}
-            </CardTitle>
-            <CardDescription>
-                Every setting area inherits independently. Local changes stay
-                unchanged when the template is updated until that area is reset.
-            </CardDescription>
+        <CardHeader class="gap-stack grid-cols-1 border-b p-5 sm:p-6">
+            <div class="flex items-center gap-2">
+                <Layers3
+                    class="text-primary size-5 shrink-0"
+                    aria-hidden="true"
+                />
+                <h2 class="text-title">{{ t('inheritance.title') }}</h2>
+            </div>
+            <p class="text-muted-foreground break-words">
+                {{
+                    t('inheritance.description', {
+                        template: templateState.templateName,
+                    })
+                }}
+            </p>
        </CardHeader>
-        <CardContent class="space-y-4">
-            <div class="flex flex-wrap gap-2">
-                <Badge
-                    v-for="area in inheritedAreas"
-                    :key="`inherited-${area.value}`"
-                    variant="outline"
-                >
-                    {{ area.label }} · inherited
-                </Badge>
-            </div>
-
-            <div
-                v-for="area in overriddenAreas"
-                :key="`overridden-${area.value}`"
-                class="space-y-3 rounded-lg border p-4"
+        <CardContent class="gap-column grid min-w-0 p-5 sm:p-6">
+            <p class="text-caption text-muted-foreground">
+                {{ t('inheritance.help') }}
+            </p>
+            <ul
+                class="grid min-w-0 divide-y"
+                :aria-label="t('inheritance.areas')"
            >
-                <div class="flex flex-wrap items-center justify-between gap-3">
-                    <Badge>{{ area.label }} · template overridden</Badge>
-                    <Button
-                        type="button"
-                        size="sm"
-                        variant="outline"
-                        :disabled="form.processing || !canReset(area)"
-                        @click="resetArea(area)"
-                    >
-                        {{
-                            activeArea === area.value && form.processing
-                                ? 'Resetting…'
-                                : 'Reset to template'
-                        }}
-                    </Button>
-                </div>
-
-                <div
-                    v-if="area.value === 'ticket_statuses' && statusRequirement"
-                    class="space-y-3"
+                <li
+                    v-for="area in inheritedAreas"
+                    :key="area.value"
+                    class="flex min-w-0 flex-wrap items-center justify-between gap-3 py-3"
                >
-                    <p class="text-muted-foreground text-sm">
-                        Choose where tickets in local statuses should move
-                        before those statuses are removed.
-                    </p>
-                    <div
-                        v-for="status in statusRequirement.removedStatuses"
-                        :key="status.id"
-                        class="grid gap-2 sm:grid-cols-2 sm:items-center"
+                    <span class="min-w-0 break-words font-medium">{{
+                        areaLabel(area)
+                    }}</span>
+                    <Badge
+                        variant="outline"
+                        class="border-primary/25 text-primary"
+                        >{{ t('projectSettings.inherited') }}</Badge
                    >
-                        <Label :for="`replacement-${status.id}`">
-                            {{ status.name }} ({{ status.ticketCount }} tickets)
-                        </Label>
-                        <div class="grid gap-1">
-                            <select
-                                :id="`replacement-${status.id}`"
-                                v-model="
-                                    form.status_replacements[String(status.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 focus-visible:ring-[3px]"
-                            >
-                                <option :value="undefined" disabled>
-                                    Select replacement status
-                                </option>
-                                <option
-                                    v-for="option in statusRequirement.replacementOptions"
-                                    :key="option.id"
-                                    :value="option.id"
-                                >
-                                    {{ option.name }}
-                                </option>
-                            </select>
-                            <InputError
-                                :message="
-                                    form.errors[
-                                        `status_replacements.${status.id}`
-                                    ]
-                                "
-                            />
-                        </div>
+                </li>
+                <li
+                    v-for="area in overriddenAreas"
+                    :key="area.value"
+                    class="gap-stack grid min-w-0 py-3"
+                >
+                    <div
+                        class="flex min-w-0 flex-wrap items-center justify-between gap-3"
+                    >
+                        <span class="min-w-0 break-words font-medium">{{
+                            areaLabel(area)
+                        }}</span>
+                        <Badge variant="secondary">{{
+                            t('projectSettings.override')
+                        }}</Badge>
                    </div>
-                </div>
-
-                <InputError :message="form.errors.areas" />
-            </div>
+                    <div
+                        class="flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center"
+                    >
+                        <p class="text-caption text-muted-foreground">
+                            {{ t('inheritance.overrideHelp') }}
+                        </p>
+                        <Button
+                            type="button"
+                            size="sm"
+                            variant="outline"
+                            class="shrink-0"
+                            :disabled="form.processing"
+                            :aria-label="
+                                t('inheritance.resetArea', {
+                                    area: areaLabel(area),
+                                })
+                            "
+                            @click="openReset(area)"
+                        >
+                            <RotateCcw aria-hidden="true" />{{
+                                t('inheritance.reset')
+                            }}
+                        </Button>
+                    </div>
+                </li>
+            </ul>
        </CardContent>
+        <Dialog :open="pendingArea !== null" @update:open="closeReset">
+            <DialogContent
+                :show-close-button="!form.processing"
+                @escape-key-down="form.processing && $event.preventDefault()"
+                @interact-outside="form.processing && $event.preventDefault()"
+            >
+                <DialogHeader>
+                    <DialogTitle>{{
+                        t('inheritance.confirmTitle')
+                    }}</DialogTitle>
+                    <DialogDescription>{{
+                        t('inheritance.confirmDescription', {
+                            area: pendingArea ? areaLabel(pendingArea) : '',
+                            template: templateState.templateName,
+                        })
+                    }}</DialogDescription>
+                </DialogHeader>
+                <form
+                    class="gap-column grid min-w-0"
+                    :aria-busy="form.processing"
+                    @submit.prevent="resetArea"
+                >
+                    <FormFeedback
+                        :state="protection.state.value"
+                        :title="
+                            form.processing
+                                ? t('inheritance.resetting')
+                                : undefined
+                        "
+                        @retry="resetArea"
+                    />
+                    <InputError
+                        :message="form.errors.areas ?? form.errors['areas.0']"
+                    />
+                    <fieldset
+                        class="gap-column grid min-w-0"
+                        :disabled="form.processing"
+                    >
+                        <legend class="sr-only">
+                            {{ t('inheritance.confirmTitle') }}
+                        </legend>
+                        <div
+                            v-if="statusRequirement"
+                            class="gap-column grid min-w-0"
+                        >
+                            <p class="text-caption text-muted-foreground">
+                                {{ t('inheritance.statusHelp') }}
+                            </p>
+                            <div
+                                v-for="status in statusRequirement.removedStatuses"
+                                :key="status.id"
+                                class="grid gap-2"
+                            >
+                                <Label :for="'replacement-' + status.id">{{
+                                    t('inheritance.statusLabel', {
+                                        status: status.name,
+                                        count: status.ticketCount,
+                                    })
+                                }}</Label>
+                                <select
+                                    :id="'replacement-' + status.id"
+                                    v-model="
+                                        form.status_replacements[
+                                            String(status.id)
+                                        ]
+                                    "
+                                    class="border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 min-h-11 w-full min-w-0 rounded-md border px-3 py-2 text-sm outline-none focus-visible:ring-2"
+                                    :aria-invalid="
+                                        !!form.errors[
+                                            `status_replacements.${status.id}`
+                                        ]
+                                    "
+                                    :aria-describedby="
+                                        'replacement-error-' + status.id
+                                    "
+                                >
+                                    <option :value="undefined" disabled>
+                                        {{ t('inheritance.selectStatus') }}
+                                    </option>
+                                    <option
+                                        v-for="option in statusRequirement.replacementOptions"
+                                        :key="option.id"
+                                        :value="option.id"
+                                    >
+                                        {{ option.name }}
+                                    </option>
+                                </select>
+                                <InputError
+                                    :id="'replacement-error-' + status.id"
+                                    :message="
+                                        form.errors[
+                                            `status_replacements.${status.id}`
+                                        ]
+                                    "
+                                />
+                            </div>
+                        </div>
+                        <p
+                            class="border-destructive/25 bg-destructive/8 rounded-lg border p-3 text-sm"
+                        >
+                            {{ t('inheritance.resetWarning') }}
+                        </p>
+                        <DialogFooter>
+                            <Button
+                                type="button"
+                                variant="secondary"
+                                @click="closeReset(false)"
+                                >{{ t('common.cancel') }}</Button
+                            >
+                            <Button type="submit" :disabled="!canReset">{{
+                                t(
+                                    form.processing
+                                        ? 'inheritance.resetting'
+                                        : 'inheritance.reset',
+                                )
+                            }}</Button>
+                        </DialogFooter>
+                    </fieldset>
+                </form>
+            </DialogContent>
+        </Dialog>
    </Card>
 </template>
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { useForm } from '@inertiajs/vue3';
+import { watch } from 'vue';
+import { update } from '@/actions/App/Http/Controllers/ProjectTicketMetadataSettingsController';
+import FormFeedback from '@/components/FormFeedback.vue';
+import InputError from '@/components/InputError.vue';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { useFormProtection } from '@/composables/useFormProtection';
+import { useLocalization } from '@/composables/useLocalization';
+import type { ProjectModel } from '@/types/models/project-model';
+
+const props = defineProps<{ project: ProjectModel }>();
+const { t } = useLocalization();
+const form = useForm({
+    show_author: props.project.show_author,
+    show_story_points: props.project.show_story_points,
+});
+const protection = useFormProtection(form);
+watch(
+    () => [props.project.show_author, props.project.show_story_points],
+    () => {
+        form.defaults({
+            show_author: props.project.show_author,
+            show_story_points: props.project.show_story_points,
+        });
+        form.resetAndClearErrors();
+    },
+);
+function submit(): void {
+    protection.submit(update(props.project.id), {
+        preserveScroll: true,
+        onSuccess: () => form.defaults(),
+    });
+}
+</script>
+
+<template>
+    <form
+        class="bg-card grid min-w-0 gap-4 rounded-xl border p-4 sm:p-6"
+        :aria-busy="form.processing"
+        @submit.prevent="submit"
+    >
+        <h3 class="font-semibold">{{ t('metadata.display') }}</h3>
+        <p class="text-muted-foreground text-sm">
+            {{ t('metadata.displayDescription') }}
+        </p>
+        <FormFeedback :state="protection.state.value" @retry="submit" />
+        <fieldset :disabled="form.processing" class="grid gap-4">
+            <div
+                v-for="option in ['show_author', 'show_story_points'] as const"
+                :key="option"
+                class="grid gap-2"
+            >
+                <Label
+                    :for="option"
+                    class="bg-muted/35 flex min-h-14 cursor-pointer items-start gap-3 rounded-lg border p-4"
+                >
+                    <Checkbox
+                        :id="option"
+                        v-model="form[option]"
+                        :name="option"
+                        :invalid="!!form.errors[option]"
+                        :aria-describedby="`${option}-help ${option}-error`"
+                    />
+                    <span class="grid gap-1">
+                        <span>{{
+                            t(
+                                option === 'show_author'
+                                    ? 'metadata.author'
+                                    : 'metadata.storyPoints',
+                            )
+                        }}</span>
+                        <span
+                            :id="`${option}-help`"
+                            class="text-muted-foreground text-sm font-normal"
+                            >{{
+                                t(
+                                    option === 'show_author'
+                                        ? 'metadata.authorHelp'
+                                        : 'metadata.storyPointsHelp',
+                                )
+                            }}</span
+                        >
+                    </span>
+                </Label>
+                <InputError
+                    :id="`${option}-error`"
+                    :message="form.errors[option]"
+                />
+            </div>
+        </fieldset>
+        <Button
+            type="submit"
+            class="w-full sm:w-fit"
+            :loading="form.processing"
+            >{{ t('common.save') }}</Button
+        >
+    </form>
+</template>
@@ -0,0 +1,277 @@
+<script setup lang="ts">
+import { useForm } from '@inertiajs/vue3';
+import { computed, watch } from 'vue';
+import {
+    destroy,
+    destroyStatus,
+    store,
+    storeStatus,
+    update,
+    updateStatus,
+} from '@/actions/App/Http/Controllers/ProjectBoardSettingsController';
+import FormFeedback from '@/components/FormFeedback.vue';
+import InputError from '@/components/InputError.vue';
+import { Button } from '@/components/ui/button';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useFormProtection } from '@/composables/useFormProtection';
+import { useLocalization } from '@/composables/useLocalization';
+import type { WorkflowEditorTarget } from '@/types/project-workflow';
+
+const props = defineProps<{
+    projectId: number;
+    columnCount: number;
+    target: WorkflowEditorTarget | null;
+}>();
+const emit = defineEmits<{ close: [] }>();
+const { t } = useLocalization();
+const form = useForm({ name: '', position: 1 });
+const protection = useFormProtection(form, {
+    isDirty: () => props.target !== null && form.isDirty,
+});
+const deleting = computed(() => props.target?.action === 'delete');
+const title = computed(() => {
+    if (props.target?.kind === 'column') {
+        return t(
+            props.target.action === 'create'
+                ? 'workflow.addColumn'
+                : props.target.action === 'edit'
+                  ? 'workflow.editColumn'
+                  : 'workflow.deleteColumn',
+        );
+    }
+    return t(
+        props.target?.action === 'create'
+            ? 'workflow.addStatus'
+            : props.target?.action === 'edit'
+              ? 'workflow.editStatus'
+              : 'workflow.deleteStatus',
+    );
+});
+const description = computed(() => {
+    const target = props.target;
+    if (!target) {
+        return '';
+    }
+    if (target.kind === 'column') {
+        return t(
+            target.action === 'delete'
+                ? 'workflow.deleteColumnDescription'
+                : target.action === 'create'
+                  ? 'workflow.addColumnDescription'
+                  : 'workflow.editColumnDescription',
+            { name: target.column?.name ?? '' },
+        );
+    }
+    return t(
+        target.action === 'delete'
+            ? 'workflow.deleteStatusDescription'
+            : 'workflow.statusContext',
+        {
+            name: target.status?.name ?? '',
+            context: target.column?.name ?? t('workflow.backlog'),
+            replacement: target.replacement?.name ?? '',
+        },
+    );
+});
+const otherErrors = computed(() =>
+    Object.entries(form.errors)
+        .filter(([key]) => !['name', 'position'].includes(key))
+        .map(([, message]) => message),
+);
+watch(
+    () => props.target,
+    (target) => {
+        if (!target) {
+            return;
+        }
+        form.defaults({
+            name:
+                target.kind === 'column'
+                    ? (target.column?.name ?? '')
+                    : (target.status?.name ?? ''),
+            position: target.column?.position ?? 1,
+        });
+        form.resetAndClearErrors();
+        protection.clearFeedback();
+    },
+);
+function close(open: boolean): void {
+    if (open || form.processing || !protection.confirmLeave()) {
+        return;
+    }
+    form.resetAndClearErrors();
+    protection.clearFeedback();
+    emit('close');
+}
+function submit(): void {
+    const target = props.target;
+    if (
+        !target ||
+        form.processing ||
+        (target.kind === 'status' &&
+            target.action === 'delete' &&
+            !target.replacement)
+    ) {
+        return;
+    }
+    const route =
+        target.kind === 'column'
+            ? target.action === 'create'
+                ? store(props.projectId)
+                : target.action === 'edit'
+                  ? update([props.projectId, target.column.id])
+                  : destroy([props.projectId, target.column.id])
+            : target.action === 'create'
+              ? storeStatus(props.projectId)
+              : target.action === 'edit'
+                ? updateStatus([props.projectId, target.status.id])
+                : destroyStatus([props.projectId, target.status.id]);
+    form.transform((data) =>
+        target.action === 'delete'
+            ? {}
+            : target.kind === 'column' && target.action === 'edit'
+              ? data
+              : target.kind === 'status' && target.action === 'create'
+                ? {
+                      name: data.name,
+                      board_column_id: target.column?.id ?? null,
+                  }
+                : { name: data.name },
+    );
+    protection.submit(route, {
+        preserveScroll: true,
+        onSuccess: () => {
+            form.resetAndClearErrors();
+            emit('close');
+        },
+    });
+}
+</script>
+
+<template>
+    <Dialog :open="target !== null" @update:open="close">
+        <DialogContent
+            :show-close-button="!form.processing"
+            @escape-key-down="form.processing && $event.preventDefault()"
+            @interact-outside="form.processing && $event.preventDefault()"
+        >
+            <DialogHeader>
+                <DialogTitle>{{ title }}</DialogTitle>
+                <DialogDescription class="break-words">{{
+                    description
+                }}</DialogDescription>
+            </DialogHeader>
+            <form
+                class="gap-column grid min-w-0"
+                :aria-busy="form.processing"
+                @submit.prevent="submit"
+            >
+                <FormFeedback :state="protection.state.value" @retry="submit" />
+                <InputError
+                    v-for="message in otherErrors"
+                    :key="message"
+                    :message="message"
+                />
+                <fieldset
+                    v-if="!deleting"
+                    :disabled="form.processing"
+                    class="grid min-w-0 gap-4"
+                >
+                    <div class="grid gap-2">
+                        <Label for="workflow-name">{{
+                            t(
+                                target?.kind === 'column'
+                                    ? 'workflow.columnName'
+                                    : 'workflow.statusName',
+                            )
+                        }}</Label>
+                        <Input
+                            id="workflow-name"
+                            v-model="form.name"
+                            name="name"
+                            required
+                            maxlength="255"
+                            :aria-invalid="!!form.errors.name"
+                            :aria-describedby="
+                                form.errors.name
+                                    ? 'workflow-name-error'
+                                    : undefined
+                            "
+                        />
+                        <InputError
+                            id="workflow-name-error"
+                            :message="form.errors.name"
+                        />
+                    </div>
+                    <div
+                        v-if="
+                            target?.kind === 'column' &&
+                            target.action === 'edit'
+                        "
+                        class="grid gap-2"
+                    >
+                        <Label for="workflow-position">{{
+                            t('workflow.position')
+                        }}</Label>
+                        <Input
+                            id="workflow-position"
+                            v-model="form.position"
+                            name="position"
+                            type="number"
+                            min="1"
+                            :max="columnCount"
+                            step="1"
+                            required
+                            :aria-invalid="!!form.errors.position"
+                            aria-describedby="workflow-position-help workflow-position-error"
+                        />
+                        <p
+                            id="workflow-position-help"
+                            class="text-caption text-muted-foreground"
+                        >
+                            {{
+                                t('workflow.positionHelp', {
+                                    count: columnCount,
+                                })
+                            }}
+                        </p>
+                        <InputError
+                            id="workflow-position-error"
+                            :message="form.errors.position"
+                        />
+                    </div>
+                </fieldset>
+                <DialogFooter>
+                    <Button
+                        type="button"
+                        variant="outline"
+                        :disabled="form.processing"
+                        @click="close(false)"
+                        >{{ t('common.cancel') }}</Button
+                    >
+                    <Button
+                        type="submit"
+                        :variant="deleting ? 'destructive' : 'default'"
+                        :loading="form.processing"
+                        >{{
+                            deleting
+                                ? t('workflow.confirmDelete')
+                                : target?.action === 'create'
+                                  ? title
+                                  : t('common.save')
+                        }}</Button
+                    >
+                </DialogFooter>
+            </form>
+        </DialogContent>
+    </Dialog>
+</template>
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { Pencil, Plus, Trash2 } from 'lucide-vue-next';
+import { Button } from '@/components/ui/button';
+import { useLocalization } from '@/composables/useLocalization';
+import type { BoardColumnModel } from '@/types/models/board-column-model';
+import type { TicketStatusModel } from '@/types/models/ticket-status-model';
+import type { WorkflowEditorTarget } from '@/types/project-workflow';
+
+defineProps<{
+    column: BoardColumnModel | null;
+    statuses: TicketStatusModel[];
+}>();
+defineEmits<{ edit: [target: WorkflowEditorTarget] }>();
+const { t } = useLocalization();
+</script>
+
+<template>
+    <div class="grid min-w-0 gap-3">
+        <ul
+            class="divide-y"
+            :aria-label="
+                t('workflow.statusesIn', {
+                    context: column?.name ?? t('workflow.backlog'),
+                })
+            "
+        >
+            <li
+                v-for="status in statuses"
+                :key="status.id"
+                class="flex min-w-0 flex-wrap items-center justify-between gap-2 py-3 first:pt-0"
+            >
+                <span
+                    class="min-w-0 flex-1 basis-28 break-words text-sm font-medium"
+                    >{{ status.name }}</span
+                >
+                <div class="flex shrink-0 gap-1">
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        :aria-label="
+                            t('workflow.renameStatus', { name: status.name })
+                        "
+                        @click="
+                            $emit('edit', {
+                                kind: 'status',
+                                action: 'edit',
+                                column,
+                                status,
+                            })
+                        "
+                        ><Pencil class="size-4" aria-hidden="true"
+                    /></Button>
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        class="text-destructive"
+                        :disabled="statuses.length <= 1"
+                        :aria-label="
+                            t('workflow.removeStatus', { name: status.name })
+                        "
+                        :aria-describedby="
+                            statuses.length <= 1
+                                ? `status-protection-${column?.id ?? 'backlog'}`
+                                : undefined
+                        "
+                        @click="
+                            $emit('edit', {
+                                kind: 'status',
+                                action: 'delete',
+                                column,
+                                status,
+                                replacement: statuses.find(
+                                    (item) => item.id !== status.id,
+                                ),
+                            })
+                        "
+                        ><Trash2 class="size-4" aria-hidden="true"
+                    /></Button>
+                </div>
+            </li>
+        </ul>
+        <p
+            v-if="statuses.length <= 1"
+            :id="`status-protection-${column?.id ?? 'backlog'}`"
+            class="text-caption text-muted-foreground"
+        >
+            {{ t('workflow.lastStatus') }}
+        </p>
+        <Button
+            type="button"
+            variant="outline"
+            class="w-full sm:w-fit"
+            :aria-label="
+                t('workflow.addStatusTo', {
+                    context: column?.name ?? t('workflow.backlog'),
+                })
+            "
+            @click="$emit('edit', { kind: 'status', action: 'create', column })"
+            ><Plus class="size-4" aria-hidden="true" />{{
+                t('workflow.addStatus')
+            }}</Button
+        >
+    </div>
+</template>
@@ -0,0 +1,282 @@
+<script setup lang="ts">
+import { useForm } from '@inertiajs/vue3';
+import { ArrowRightLeft } from 'lucide-vue-next';
+import { computed, ref, watch } from 'vue';
+import { updateStatusTransitions } from '@/actions/App/Http/Controllers/ProjectBoardSettingsController';
+import FormFeedback from '@/components/FormFeedback.vue';
+import InputError from '@/components/InputError.vue';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { useFormProtection } from '@/composables/useFormProtection';
+import { useLocalization } from '@/composables/useLocalization';
+import { ticketStatusLabel } from '@/lib/tickets';
+import type { TicketStatusModel } from '@/types/models/ticket-status-model';
+
+const props = defineProps<{
+    projectId: number;
+    statuses: TicketStatusModel[];
+}>();
+const { t } = useLocalization();
+const sourceId = ref(props.statuses[0]?.id ?? null);
+const source = computed(() =>
+    props.statuses.find((status) => status.id === sourceId.value),
+);
+const targets = computed(() =>
+    props.statuses.filter((status) => status.id !== sourceId.value),
+);
+const savedTargets = computed(
+    () =>
+        source.value?.allowed_target_statuses
+            ?.map((status) => status.id)
+            .sort((a, b) => a - b) ?? [],
+);
+const form = useForm({ allowed_ticket_status_ids: [...savedTargets.value] });
+const protection = useFormProtection(form);
+const saved = ref(false);
+const hasErrors = computed(() => Object.keys(form.errors).length > 0);
+
+function reset(): void {
+    saved.value = false;
+    form.defaults({ allowed_ticket_status_ids: [...savedTargets.value] });
+    form.resetAndClearErrors();
+    protection.clearFeedback();
+}
+
+watch(
+    () => props.statuses,
+    () => {
+        if (!source.value) {
+            sourceId.value = props.statuses[0]?.id ?? null;
+            reset();
+        } else if (!form.isDirty && !form.processing) {
+            reset();
+        }
+    },
+);
+
+function selectSource(event: Event): void {
+    const select = event.target as HTMLSelectElement;
+    if (form.processing || !protection.confirmLeave()) {
+        select.value = String(sourceId.value);
+        return;
+    }
+    sourceId.value = Number(select.value);
+    reset();
+}
+
+function toggleTarget(id: number, event: Event): void {
+    saved.value = false;
+    const checked = (event.target as HTMLInputElement).checked;
+    form.allowed_ticket_status_ids = checked
+        ? [...form.allowed_ticket_status_ids, id].sort((a, b) => a - b)
+        : form.allowed_ticket_status_ids.filter((target) => target !== id);
+    form.clearErrors();
+    protection.clearFeedback();
+}
+
+function submit(): void {
+    if (!source.value || !form.isDirty || form.processing) {
+        return;
+    }
+    protection.submit(
+        updateStatusTransitions([props.projectId, source.value.id]),
+        {
+            preserveScroll: true,
+            onSuccess: () => {
+                saved.value = true;
+                form.defaults({
+                    allowed_ticket_status_ids: [...savedTargets.value],
+                });
+                form.resetAndClearErrors();
+            },
+        },
+    );
+}
+</script>
+
+<template>
+    <section
+        class="bg-card min-w-0 overflow-hidden rounded-xl border"
+        aria-labelledby="workflow-transitions"
+    >
+        <header class="grid gap-3 border-b p-5 sm:p-6">
+            <div class="flex items-center gap-2">
+                <ArrowRightLeft
+                    class="text-primary size-5 shrink-0"
+                    aria-hidden="true"
+                />
+                <h3 id="workflow-transitions" class="font-semibold">
+                    {{ t('workflow.transitions') }}
+                </h3>
+            </div>
+            <p class="text-muted-foreground text-sm">
+                {{ t('workflow.transitionsDescription') }}
+            </p>
+        </header>
+        <div class="grid min-w-0 gap-5 p-5 sm:p-6">
+            <p v-if="!source" class="text-muted-foreground text-sm">
+                {{ t('workflow.noStatuses') }}
+            </p>
+            <template v-else>
+                <div class="grid min-w-0 gap-2">
+                    <Label for="workflow-source">{{
+                        t('workflow.sourceStatus')
+                    }}</Label>
+                    <select
+                        id="workflow-source"
+                        :value="sourceId"
+                        :disabled="form.processing"
+                        class="border-input bg-background focus-visible:ring-ring/40 min-h-11 w-full min-w-0 rounded-lg border px-3 py-2 text-sm outline-none focus-visible:ring-2 disabled:opacity-50"
+                        @change="selectSource"
+                    >
+                        <option
+                            v-for="status in statuses"
+                            :key="status.id"
+                            :value="status.id"
+                        >
+                            {{ ticketStatusLabel(status, '') }}
+                        </option>
+                    </select>
+                    <p class="text-muted-foreground text-sm">
+                        {{ t('workflow.directionHelp') }}
+                    </p>
+                </div>
+                <form
+                    class="grid min-w-0 gap-4"
+                    :aria-busy="form.processing"
+                    @submit.prevent="submit"
+                >
+                    <fieldset
+                        :disabled="form.processing"
+                        class="grid min-w-0 gap-3"
+                        aria-describedby="workflow-target-help workflow-transition-errors"
+                        :aria-invalid="hasErrors"
+                    >
+                        <legend class="mb-3 break-words font-medium">
+                            {{
+                                t('workflow.targetsFrom', { name: source.name })
+                            }}
+                        </legend>
+                        <p
+                            id="workflow-target-help"
+                            class="text-muted-foreground text-sm"
+                        >
+                            {{ t('workflow.targetHelp') }}
+                        </p>
+                        <p
+                            v-if="targets.length === 0"
+                            class="text-muted-foreground text-sm"
+                        >
+                            {{ t('workflow.noTargets') }}
+                        </p>
+                        <div v-else class="grid min-w-0 gap-2 sm:grid-cols-2">
+                            <label
+                                v-for="target in targets"
+                                :key="target.id"
+                                class="has-[:focus-visible]:ring-ring/40 flex min-h-14 min-w-0 cursor-pointer items-center gap-3 rounded-lg border p-3 has-[:focus-visible]:ring-2"
+                                :class="
+                                    form.allowed_ticket_status_ids.includes(
+                                        target.id,
+                                    )
+                                        ? 'border-primary/40 bg-accent/40'
+                                        : 'border-input'
+                                "
+                            >
+                                <input
+                                    type="checkbox"
+                                    name="allowed_ticket_status_ids[]"
+                                    :value="target.id"
+                                    :checked="
+                                        form.allowed_ticket_status_ids.includes(
+                                            target.id,
+                                        )
+                                    "
+                                    class="accent-primary size-4 shrink-0"
+                                    @change="toggleTarget(target.id, $event)"
+                                />
+                                <span class="grid min-w-0 gap-1">
+                                    <span
+                                        class="break-words text-sm font-medium"
+                                        >{{
+                                            ticketStatusLabel(target, '')
+                                        }}</span
+                                    >
+                                    <span
+                                        class="text-muted-foreground text-xs"
+                                        >{{
+                                            t(
+                                                form.allowed_ticket_status_ids.includes(
+                                                    target.id,
+                                                )
+                                                    ? 'workflow.allowed'
+                                                    : 'workflow.notAllowed',
+                                            )
+                                        }}</span
+                                    >
+                                </span>
+                            </label>
+                        </div>
+                    </fieldset>
+                    <p
+                        v-if="
+                            targets.length > 0 &&
+                            form.allowed_ticket_status_ids.length === 0
+                        "
+                        class="text-muted-foreground text-sm"
+                    >
+                        {{ t('workflow.noMovesHelp') }}
+                    </p>
+                    <div id="workflow-transition-errors" role="alert">
+                        <InputError
+                            v-for="(message, key) in form.errors"
+                            :key="key"
+                            :message="message"
+                        />
+                    </div>
+                    <FormFeedback
+                        :state="
+                            !saved && protection.state.value === 'success'
+                                ? 'idle'
+                                : protection.state.value
+                        "
+                        @retry="submit"
+                    />
+                    <div
+                        class="flex flex-wrap items-center gap-3 border-t pt-4"
+                    >
+                        <Badge
+                            :variant="form.isDirty ? 'warning' : 'secondary'"
+                            role="status"
+                            >{{
+                                t(
+                                    form.isDirty
+                                        ? 'workflow.unsavedMoves'
+                                        : 'workflow.savedMoves',
+                                    { count: savedTargets.length },
+                                )
+                            }}</Badge
+                        >
+                        <div
+                            class="flex w-full flex-wrap gap-2 sm:ml-auto sm:w-auto"
+                        >
+                            <Button
+                                type="button"
+                                variant="outline"
+                                :disabled="!form.isDirty || form.processing"
+                                @click="reset"
+                                >{{ t('workflow.resetMoves') }}</Button
+                            >
+                            <Button
+                                type="submit"
+                                :disabled="!form.isDirty"
+                                :loading="form.processing"
+                                >{{ t('workflow.saveMoves') }}</Button
+                            >
+                        </div>
+                    </div>
+                </form>
+            </template>
+        </div>
+    </section>
+</template>
@@ -0,0 +1,320 @@
+<script setup lang="ts">
+import {
+    ClipboardCheck,
+    IndentDecrease,
+    IndentIncrease,
+    Plus,
+    Trash2,
+} from 'lucide-vue-next';
+import { computed, nextTick, ref, useId, watch } from 'vue';
+import { Button } from '@/components/ui/button';
+import InputError from '@/components/InputError.vue';
+import { useLocalization } from '@/composables/useLocalization';
+import {
+    canIndentAcceptanceCriterion,
+    indentAcceptanceCriterion,
+    removeAcceptanceCriterion,
+    syncAcceptanceCriteriaDescendantCheckedState,
+} from '@/lib/acceptance-criteria';
+import type { AcceptanceCriteriaModel } from '@/types/models/acceptance-criteria-model';
+
+const props = withDefaults(
+    defineProps<{
+        modelValue: AcceptanceCriteriaModel;
+        readonly?: boolean;
+        disabled?: boolean;
+        persistToggles?: boolean;
+        allowEditing?: boolean;
+        saving?: boolean;
+        dirty?: boolean;
+        error?: string;
+    }>(),
+    {
+        readonly: false,
+        disabled: false,
+        persistToggles: false,
+        allowEditing: true,
+        saving: undefined,
+        dirty: false,
+        error: '',
+    },
+);
+const emit = defineEmits<{
+    'update:modelValue': [items: AcceptanceCriteriaModel];
+    toggle: [index: number, checked: boolean];
+}>();
+const { t } = useLocalization();
+const id = useId();
+const root = ref<HTMLElement>();
+const editing = ref(!props.persistToggles);
+const completed = computed(
+    () => props.modelValue.filter((item) => item.checked).length,
+);
+const locked = computed(() => props.readonly || props.disabled);
+const update = (items: AcceptanceCriteriaModel): void => {
+    if (!locked.value) {
+        emit('update:modelValue', items);
+    }
+};
+const focusRow = async (index: number): Promise<void> => {
+    await nextTick();
+    const inputs =
+        root.value?.querySelectorAll<HTMLTextAreaElement>('textarea');
+    if (inputs?.[index]) {
+        inputs[index].focus();
+    } else {
+        root.value
+            ?.querySelector<HTMLButtonElement>('[data-add-criterion]')
+            ?.focus();
+    }
+};
+const add = (): void => {
+    update([...props.modelValue, { text: '', checked: false, indent: 0 }]);
+    void focusRow(props.modelValue.length);
+};
+const remove = (index: number): void => {
+    update(removeAcceptanceCriterion(props.modelValue, index));
+    void focusRow(Math.max(0, index - 1));
+};
+watch(
+    () => props.modelValue,
+    async () => {
+        await nextTick();
+        root.value
+            ?.querySelectorAll<HTMLTextAreaElement>('textarea')
+            .forEach((input) => {
+                input.setCustomValidity(
+                    input.value.trim() === '' ? t('criteria.required') : '',
+                );
+            });
+    },
+);
+const changeText = (index: number, event: Event): void => {
+    const text = (event.target as HTMLTextAreaElement).value;
+    update(
+        props.modelValue.map((item, position) =>
+            position === index ? { ...item, text } : item,
+        ),
+    );
+};
+const toggle = (index: number, event: Event): void => {
+    const target = event.target as HTMLInputElement;
+    const checked = target.checked;
+    target.checked = props.modelValue[index].checked;
+    if (locked.value) {
+        return;
+    }
+    if (props.persistToggles && !editing.value && !props.dirty) {
+        emit('toggle', index, checked);
+    } else {
+        update(
+            syncAcceptanceCriteriaDescendantCheckedState(
+                props.modelValue,
+                index,
+                checked,
+            ),
+        );
+    }
+};
+const onKeydown = (index: number, event: KeyboardEvent): void => {
+    if (!event.altKey || !['ArrowLeft', 'ArrowRight'].includes(event.key)) {
+        return;
+    }
+    event.preventDefault();
+    update(
+        indentAcceptanceCriterion(
+            props.modelValue,
+            index,
+            event.key === 'ArrowRight' ? 1 : -1,
+        ),
+    );
+};
+</script>
+
+<template>
+    <section
+        ref="root"
+        class="border-border bg-card min-w-0 space-y-4 rounded-xl border p-4 sm:p-5"
+        :aria-labelledby="`${id}-title`"
+        :aria-busy="disabled"
+    >
+        <div class="flex flex-wrap items-center justify-between gap-3">
+            <h3
+                :id="`${id}-title`"
+                class="flex items-center gap-2 font-semibold"
+            >
+                <ClipboardCheck
+                    class="text-primary size-5"
+                    aria-hidden="true"
+                />
+                {{ t('criteria.title') }}
+            </h3>
+            <span class="text-muted-foreground text-sm" aria-live="polite">{{
+                t('criteria.progress', { completed, total: modelValue.length })
+            }}</span>
+            <Button
+                v-if="persistToggles && allowEditing && !readonly"
+                type="button"
+                variant="outline"
+                :disabled="
+                    disabled ||
+                    (editing &&
+                        modelValue.some((item) => item.text.trim() === ''))
+                "
+                :aria-pressed="editing"
+                @click="editing = !editing"
+            >
+                {{ t(editing ? 'criteria.preview' : 'criteria.edit') }}
+            </Button>
+        </div>
+        <p v-if="!modelValue.length" class="text-muted-foreground text-sm">
+            {{ t('criteria.empty') }}
+        </p>
+        <ol v-else class="space-y-3">
+            <li
+                v-for="(item, index) in modelValue"
+                :key="item.id ?? `new-${index}`"
+                :data-indent="item.indent"
+                class="border-border min-w-0"
+                :class="{ 'border-s-2 ps-2': item.indent > 0 }"
+                :style="{ marginInlineStart: `${item.indent * 0.5}rem` }"
+            >
+                <div class="flex min-w-0 items-start gap-2">
+                    <label
+                        class="focus-within:ring-ring flex min-h-11 w-11 shrink-0 cursor-pointer items-center justify-center rounded-md focus-within:ring-2"
+                        :class="{ 'cursor-not-allowed opacity-60': locked }"
+                    >
+                        <input
+                            :checked="item.checked"
+                            type="checkbox"
+                            :disabled="locked"
+                            :aria-label="
+                                t('criteria.complete', {
+                                    number: index + 1,
+                                    text: item.text,
+                                })
+                            "
+                            class="border-input accent-primary size-5 rounded"
+                            @change="toggle(index, $event)"
+                        />
+                    </label>
+                    <div class="min-w-0 flex-1">
+                        <textarea
+                            v-if="editing && !readonly"
+                            :value="item.text"
+                            :aria-label="
+                                t('criteria.item', { number: index + 1 })
+                            "
+                            :aria-describedby="`${id}-hint ${id}-error`"
+                            :disabled="disabled"
+                            :aria-invalid="Boolean(error)"
+                            required
+                            rows="2"
+                            class="border-input bg-background focus-visible:ring-ring min-h-11 w-full rounded-md border px-3 py-2 text-sm outline-none focus-visible:ring-2 disabled:opacity-60"
+                            @input="changeText(index, $event)"
+                            @keydown="onKeydown(index, $event)"
+                        />
+                        <p
+                            v-else
+                            class="wrap-anywhere min-h-11 whitespace-pre-wrap py-2.5 text-sm"
+                            :class="{
+                                'text-muted-foreground line-through':
+                                    item.checked,
+                            }"
+                        >
+                            {{ item.text }}
+                        </p>
+                        <div
+                            v-if="editing && !readonly"
+                            class="flex flex-wrap gap-1"
+                        >
+                            <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                :disabled="disabled || item.indent === 0"
+                                :aria-label="
+                                    t('criteria.outdent', { number: index + 1 })
+                                "
+                                @click="
+                                    update(
+                                        indentAcceptanceCriterion(
+                                            modelValue,
+                                            index,
+                                            -1,
+                                        ),
+                                    )
+                                "
+                                ><IndentDecrease aria-hidden="true"
+                            /></Button>
+                            <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                :disabled="
+                                    disabled ||
+                                    !canIndentAcceptanceCriterion(
+                                        modelValue,
+                                        index,
+                                    )
+                                "
+                                :aria-label="
+                                    t('criteria.indent', { number: index + 1 })
+                                "
+                                @click="
+                                    update(
+                                        indentAcceptanceCriterion(
+                                            modelValue,
+                                            index,
+                                            1,
+                                        ),
+                                    )
+                                "
+                                ><IndentIncrease aria-hidden="true"
+                            /></Button>
+                            <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                :disabled="disabled"
+                                :aria-label="
+                                    t('criteria.remove', { number: index + 1 })
+                                "
+                                @click="remove(index)"
+                                ><Trash2 aria-hidden="true"
+                            /></Button>
+                        </div>
+                    </div>
+                </div>
+            </li>
+        </ol>
+        <template v-if="editing && !readonly">
+            <Button
+                data-add-criterion
+                type="button"
+                variant="outline"
+                :disabled="disabled"
+                @click="add"
+                ><Plus aria-hidden="true" />{{ t('criteria.add') }}</Button
+            >
+            <p :id="`${id}-hint`" class="text-muted-foreground text-xs">
+                {{ t('criteria.hint') }}
+            </p>
+        </template>
+        <p
+            v-if="persistToggles && dirty"
+            class="text-muted-foreground text-sm"
+            role="status"
+        >
+            {{ t('criteria.unsaved') }}
+        </p>
+        <p
+            v-if="saving ?? disabled"
+            class="text-muted-foreground text-sm"
+            role="status"
+        >
+            {{ t('criteria.saving') }}
+        </p>
+        <InputError :id="`${id}-error`" :message="error" role="alert" />
+    </section>
+</template>
@@ -11,6 +11,7 @@ import type {
 } from '@/types/ticket-presentation';

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

-        <div v-if="$slots.actions" class="border-t p-4">
-            <slot name="actions" />
+                <h3
+                    class="text-body group-hover:text-primary wrap-anywhere min-w-0 font-semibold"
+                >
+                    {{ ticket.title }}
+                </h3>
+
+                <TicketMetadata :ticket="ticket" :show-status="showStatus" />
+
+                <p
+                    v-if="showDescription && ticket.description"
+                    class="text-caption text-muted-foreground wrap-anywhere line-clamp-3"
+                >
+                    {{ ticket.description }}
+                </p>
+
+                <p
+                    v-if="ticket.is_blocked && ticket.blocked_comment"
+                    class="text-caption text-warning-foreground bg-warning wrap-anywhere rounded-sm px-3 py-2"
+                >
+                    {{
+                        t('tickets.blockerComment', {
+                            comment: ticket.blocked_comment,
+                        })
+                    }}
+                </p>
+            </Link>
+
+            <div
+                v-if="$slots.actions"
+                :class="[
+                    'border-t p-4',
+                    layout === 'list'
+                        ? 'lg:flex lg:w-80 lg:items-center lg:border-l lg:border-t-0'
+                        : '',
+                ]"
+            >
+                <slot name="actions" />
+            </div>
        </div>
    </article>
 </template>
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import InputError from '@/components/InputError.vue';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+withDefaults(
+    defineProps<{
+        id: string;
+        label: string;
+        kind?: 'text' | 'number' | 'textarea' | 'select';
+        options?: { value: string | number; label: string }[];
+        error?: string;
+        hint?: string;
+        disabled?: boolean;
+        required?: boolean;
+        autofocus?: boolean;
+        placeholder?: string;
+        rows?: number;
+        min?: number;
+        step?: string;
+    }>(),
+    { kind: 'text', rows: 5 },
+);
+
+const model = defineModel<string | number | null>({ required: true });
+const controlClass =
+    'min-h-control border-input bg-card focus-visible:border-ring focus-visible:ring-ring/35 w-full min-w-0 rounded-md border px-3 py-2 text-base shadow-xs outline-none transition-[border-color,box-shadow] hover:border-primary/45 focus-visible:ring-2 disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/25 md:text-body';
+</script>
+
+<template>
+    <div class="grid min-w-0 content-start gap-2">
+        <Label :for="id">{{ label }}</Label>
+        <select
+            v-if="kind === 'select'"
+            :id="id"
+            v-model="model"
+            :name="id"
+            :disabled="disabled"
+            :required="required"
+            :aria-invalid="Boolean(error)"
+            :aria-describedby="`${id}-hint ${id}-error`"
+            :class="controlClass"
+        >
+            <option
+                v-for="option in options"
+                :key="option.value"
+                :value="option.value"
+            >
+                {{ option.label }}
+            </option>
+        </select>
+        <textarea
+            v-else-if="kind === 'textarea'"
+            :id="id"
+            v-model="model"
+            :name="id"
+            :rows="rows"
+            :disabled="disabled"
+            :required="required"
+            :placeholder="placeholder"
+            :aria-invalid="Boolean(error)"
+            :aria-describedby="`${id}-hint ${id}-error`"
+            :class="controlClass"
+        />
+        <Input
+            v-else
+            :id="id"
+            v-model="model"
+            :name="id"
+            :type="kind"
+            :disabled="disabled"
+            :required="required"
+            :autofocus="autofocus"
+            :placeholder="placeholder"
+            :min="min"
+            :step="step"
+            :maxlength="kind === 'text' ? 255 : undefined"
+            :invalid="Boolean(error)"
+            :aria-describedby="`${id}-hint ${id}-error`"
+        />
+        <p
+            :id="`${id}-hint`"
+            class="text-muted-foreground text-xs empty:hidden"
+        >
+            {{ hint }}
+        </p>
+        <InputError :id="`${id}-error`" :message="error" />
+    </div>
+</template>
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import TicketFormField from '@/components/tickets/TicketFormField.vue';
+import { useLocalization } from '@/composables/useLocalization';
+import { ticketStatusLabel } from '@/lib/tickets';
+import type { ProjectTicketCreatePageProps } from '@/types';
+
+const props = defineProps<
+    Pick<
+        ProjectTicketCreatePageProps,
+        | 'project'
+        | 'ticketTypes'
+        | 'ticketPriorities'
+        | 'users'
+        | 'parentTicketOptions'
+    > & {
+        errors: Record<string, string>;
+        disabled?: boolean;
+        autofocus?: boolean;
+        ticketStatusOptions?: ProjectTicketCreatePageProps['ticketStatusOptions'];
+    }
+>();
+const title = defineModel<string>('title', { required: true });
+const description = defineModel<string>('description', { required: true });
+const type = defineModel<string | number>('type', { required: true });
+const priority = defineModel<string | number>('priority', { required: true });
+const assignee = defineModel<string | number>('assignee', { required: true });
+const parent = defineModel<string | number>('parent', { required: true });
+const points = defineModel<string | number | null>('points', {
+    required: true,
+});
+const status = defineModel<string | number>('status');
+const { t } = useLocalization();
+const typeOptions = computed(() =>
+    props.ticketTypes.map((item) => ({ value: item.id, label: item.name })),
+);
+const priorityOptions = computed(() =>
+    props.ticketPriorities.map((item) => ({
+        value: item.id,
+        label: item.name,
+    })),
+);
+const userOptions = computed(() => [
+    { value: '', label: t('tickets.unassigned') },
+    ...props.users.map((item) => ({ value: item.id, label: item.name })),
+]);
+const parentOptions = computed(() => [
+    { value: '', label: t('ticketDetail.noParent') },
+    ...props.parentTicketOptions.map((item) => ({
+        value: item.id,
+        label: `${item.ticket_key} - ${item.title}`,
+    })),
+]);
+const statusOptions = computed(
+    () =>
+        props.ticketStatusOptions?.map((item) => ({
+            value: item.id,
+            label: ticketStatusLabel(item, t('ticketDetail.notSet')),
+        })) ?? [],
+);
+</script>
+
+<template>
+    <div class="grid min-w-0 gap-6">
+        <TicketFormField
+            id="title"
+            v-model="title"
+            :label="t('ticketDetail.title')"
+            :error="errors.title"
+            :disabled="disabled"
+            :autofocus="autofocus"
+            :placeholder="t('ticketForm.titlePlaceholder')"
+            required
+        />
+        <TicketFormField
+            id="description"
+            v-model="description"
+            kind="textarea"
+            :label="t('ticketDetail.description')"
+            :error="errors.description"
+            :disabled="disabled"
+            :placeholder="t('ticketForm.descriptionPlaceholder')"
+        />
+        <slot name="content" />
+        <fieldset
+            class="bg-muted/20 grid min-w-0 gap-5 rounded-xl border p-4 sm:p-5"
+            :disabled="disabled"
+        >
+            <legend class="px-2 text-sm font-semibold">
+                {{ t('ticketDetail.metadata') }}
+            </legend>
+            <div class="grid min-w-0 gap-5 sm:grid-cols-2">
+                <TicketFormField
+                    id="ticket_type_id"
+                    v-model="type"
+                    kind="select"
+                    :label="t('ticketDetail.type')"
+                    :options="typeOptions"
+                    :error="errors.ticket_type_id"
+                    :disabled="disabled"
+                    required
+                />
+                <TicketFormField
+                    id="ticket_priority_id"
+                    v-model="priority"
+                    kind="select"
+                    :label="t('ticketDetail.priority')"
+                    :options="priorityOptions"
+                    :error="errors.ticket_priority_id"
+                    :disabled="disabled"
+                    required
+                />
+                <TicketFormField
+                    v-if="ticketStatusOptions && status !== undefined"
+                    id="ticket_status_id"
+                    v-model="status"
+                    kind="select"
+                    :label="t('ticketDetail.status')"
+                    :options="statusOptions"
+                    :error="errors.ticket_status_id"
+                    :disabled="disabled"
+                    required
+                />
+                <TicketFormField
+                    id="assignee_user_id"
+                    v-model="assignee"
+                    kind="select"
+                    :label="t('ticketDetail.assignee')"
+                    :options="userOptions"
+                    :error="errors.assignee_user_id"
+                    :disabled="disabled"
+                />
+                <TicketFormField
+                    id="parent_ticket_id"
+                    v-model="parent"
+                    kind="select"
+                    :label="t('ticketDetail.parent')"
+                    :options="parentOptions"
+                    :error="errors.parent_ticket_id"
+                    :disabled="disabled"
+                />
+                <TicketFormField
+                    v-if="project.show_story_points"
+                    id="story_points"
+                    v-model="points"
+                    kind="number"
+                    :label="t('ticketDetail.storyPoints')"
+                    :error="errors.story_points"
+                    :disabled="disabled"
+                    :min="0"
+                    step="1"
+                />
+                <slot name="metadata" />
+            </div>
+        </fieldset>
+    </div>
+</template>
@@ -0,0 +1,416 @@
+<script setup lang="ts">
+import { Link, useForm, usePage } from '@inertiajs/vue3';
+import {
+    CheckCircle2,
+    CircleAlert,
+    GitBranchPlus,
+    LoaderCircle,
+} from 'lucide-vue-next';
+import { computed, ref, watch } from 'vue';
+import {
+    store,
+    validate as validateBranch,
+} from '@/actions/App/Http/Controllers/ProjectTicketBranchController';
+import FormFeedback from '@/components/FormFeedback.vue';
+import InputError from '@/components/InputError.vue';
+import { Button } from '@/components/ui/button';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useFormProtection } from '@/composables/useFormProtection';
+import { useLocalization } from '@/composables/useLocalization';
+import { edit as editGitConnections } from '@/routes/git-connections';
+import type { BranchNameValidationModel } from '@/types/models/branch-name-validation-model';
+import type {
+    TicketBranchCreateDialogProps,
+    TicketBranchFormData,
+} from '@/types/ticket-detail';
+
+const props = defineProps<TicketBranchCreateDialogProps>();
+const { t } = useLocalization();
+const appName = String(usePage().props.name);
+const draftKey = `projects:${props.project.id}:tickets:${props.ticket.id}:branch`;
+const isOpen = ref(false);
+const isCheckingBranchName = ref(false);
+const branchNameValidation = ref<BranchNameValidationModel | null>(null);
+
+const defaultRepositoryConnectionId = computed(() =>
+    String(
+        props.repositoryConnections.find(
+            (repositoryConnection) => repositoryConnection.has_personal_access,
+        )?.id ??
+            props.repositoryConnections[0]?.id ??
+            '',
+    ),
+);
+
+const form = useForm<TicketBranchFormData>(draftKey, {
+    branch_name: props.suggestedBranchName,
+    repository_connection_id: defaultRepositoryConnectionId.value,
+});
+const protection = useFormProtection(form, {
+    isDirty: () => isOpen.value && form.isDirty,
+});
+
+const selectedRepositoryConnection = computed(
+    () =>
+        props.repositoryConnections.find(
+            (repositoryConnection) =>
+                String(repositoryConnection.id) ===
+                form.repository_connection_id,
+        ) ?? null,
+);
+const selectedRepositoryHasPersonalAccess = computed(
+    () => selectedRepositoryConnection.value?.has_personal_access ?? false,
+);
+const validationStateClasses = computed(() => {
+    if (isCheckingBranchName.value) {
+        return 'border-primary/30 bg-primary/5 text-foreground';
+    }
+
+    if (branchNameValidation.value?.is_valid) {
+        return 'border-success/40 bg-success/10 text-success-foreground';
+    }
+
+    if (branchNameValidation.value !== null) {
+        return 'border-warning/40 bg-warning/10 text-warning-foreground';
+    }
+
+    return 'border-border bg-muted/30 text-muted-foreground';
+});
+
+function updateOpen(open: boolean): void {
+    if (!open && !protection.confirmLeave()) {
+        return;
+    }
+
+    isOpen.value = open;
+}
+
+function initializeForm(): void {
+    if (form.isDirty) {
+        return;
+    }
+
+    form.clearErrors();
+    protection.clearFeedback();
+    form.branch_name = props.suggestedBranchName;
+    form.repository_connection_id = defaultRepositoryConnectionId.value;
+    branchNameValidation.value = null;
+    isCheckingBranchName.value = false;
+}
+
+watch(isOpen, (open) => {
+    if (!open) {
+        form.clearErrors();
+        protection.clearFeedback();
+        branchNameValidation.value = null;
+        isCheckingBranchName.value = false;
+
+        return;
+    }
+
+    initializeForm();
+});
+
+watch(
+    [isOpen, () => form.repository_connection_id, () => form.branch_name],
+    (
+        [open, repositoryConnectionId, branchName],
+        _previousValues,
+        onCleanup,
+    ) => {
+        if (!open) {
+            return;
+        }
+
+        const repositoryConnection = selectedRepositoryConnection.value;
+
+        if (repositoryConnection === null || repositoryConnectionId === '') {
+            branchNameValidation.value = null;
+            isCheckingBranchName.value = false;
+
+            return;
+        }
+
+        if (!repositoryConnection.has_personal_access) {
+            branchNameValidation.value = {
+                is_valid: false,
+                message: t('ticketDetail.connectGitFirst'),
+            };
+            isCheckingBranchName.value = false;
+
+            return;
+        }
+
+        if (branchName.trim() === '') {
+            branchNameValidation.value = {
+                is_valid: false,
+                message: t('ticketDetail.branchRequired'),
+            };
+            isCheckingBranchName.value = false;
+
+            return;
+        }
+
+        branchNameValidation.value = null;
+        isCheckingBranchName.value = true;
+
+        const abortController = new AbortController();
+        const timeoutId = window.setTimeout(async () => {
+            try {
+                const response = await fetch(
+                    validateBranch.url(
+                        {
+                            project: props.project.id,
+                            ticket: props.ticket.id,
+                        },
+                        {
+                            query: {
+                                branch_name: branchName,
+                                repository_connection_id:
+                                    repositoryConnectionId,
+                            },
+                        },
+                    ),
+                    {
+                        credentials: 'same-origin',
+                        headers: {
+                            Accept: 'application/json',
+                            'X-Requested-With': 'XMLHttpRequest',
+                        },
+                        method: 'GET',
+                        signal: abortController.signal,
+                    },
+                );
+
+                if (!response.ok) {
+                    throw new Error('Branch validation failed.');
+                }
+
+                branchNameValidation.value =
+                    (await response.json()) as BranchNameValidationModel;
+            } catch (error) {
+                if (
+                    error instanceof DOMException &&
+                    error.name === 'AbortError'
+                ) {
+                    return;
+                }
+
+                branchNameValidation.value = {
+                    is_valid: false,
+                    message: t('ticketDetail.branchValidationFailed', {
+                        app: appName,
+                    }),
+                };
+            } finally {
+                if (!abortController.signal.aborted) {
+                    isCheckingBranchName.value = false;
+                }
+            }
+        }, 300);
+
+        onCleanup(() => {
+            abortController.abort();
+            window.clearTimeout(timeoutId);
+            isCheckingBranchName.value = false;
+        });
+    },
+    { immediate: true },
+);
+
+function submit(): void {
+    if (
+        !selectedRepositoryHasPersonalAccess.value ||
+        branchNameValidation.value?.is_valid !== true
+    ) {
+        return;
+    }
+
+    protection.submit(
+        store({
+            project: props.project.id,
+            ticket: props.ticket.id,
+        }),
+        {
+            onSuccess: () => {
+                isOpen.value = false;
+            },
+            preserveScroll: true,
+        },
+    );
+}
+</script>
+
+<template>
+    <Dialog :open="isOpen" @update:open="updateOpen">
+        <Button
+            type="button"
+            variant="outline"
+            class="w-full gap-2 sm:w-auto"
+            @click="isOpen = true"
+        >
+            <GitBranchPlus class="size-4" aria-hidden="true" />
+            {{ t('ticketDetail.createBranch') }}
+        </Button>
+
+        <DialogContent class="sm:max-w-lg">
+            <DialogHeader class="space-y-3">
+                <DialogTitle>{{
+                    t('ticketDetail.createBranchTitle')
+                }}</DialogTitle>
+                <DialogDescription>{{
+                    t('ticketDetail.createBranchDescription')
+                }}</DialogDescription>
+            </DialogHeader>
+
+            <form class="grid gap-4" @submit.prevent="submit">
+                <FormFeedback
+                    :state="protection.state.value"
+                    :title="
+                        protection.state.value === 'loading'
+                            ? t('ticketDetail.creatingBranch')
+                            : undefined
+                    "
+                    @retry="submit"
+                />
+
+                <fieldset
+                    :disabled="form.processing"
+                    class="grid min-w-0 gap-4"
+                >
+                    <div class="grid min-w-0 gap-2">
+                        <Label for="repository_connection_id">{{
+                            t('ticketDetail.repository')
+                        }}</Label>
+                        <select
+                            id="repository_connection_id"
+                            v-model="form.repository_connection_id"
+                            class="min-h-control border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 w-full min-w-0 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
+                        >
+                            <option
+                                v-for="repositoryConnection in repositoryConnections"
+                                :key="repositoryConnection.id"
+                                :value="String(repositoryConnection.id)"
+                            >
+                                {{ repositoryConnection.repository_full_name
+                                }}{{
+                                    repositoryConnection.has_personal_access
+                                        ? ''
+                                        : ` — ${t('ticketDetail.personalAccessRequired')}`
+                                }}
+                            </option>
+                        </select>
+                        <InputError
+                            :message="form.errors.repository_connection_id"
+                        />
+                    </div>
+
+                    <div class="grid min-w-0 gap-2">
+                        <Label for="branch_name">{{
+                            t('ticketDetail.branchName')
+                        }}</Label>
+                        <Input
+                            id="branch_name"
+                            v-model="form.branch_name"
+                            :disabled="!selectedRepositoryHasPersonalAccess"
+                            autocomplete="off"
+                        />
+                        <InputError :message="form.errors.branch_name" />
+                    </div>
+                </fieldset>
+
+                <div
+                    role="status"
+                    aria-live="polite"
+                    :aria-busy="isCheckingBranchName || undefined"
+                    class="rounded-lg border px-4 py-3 transition-colors"
+                    :class="validationStateClasses"
+                >
+                    <div class="flex items-start gap-3">
+                        <LoaderCircle
+                            v-if="isCheckingBranchName"
+                            class="mt-0.5 size-4 shrink-0 animate-spin motion-reduce:animate-none"
+                            aria-hidden="true"
+                        />
+                        <CheckCircle2
+                            v-else-if="branchNameValidation?.is_valid"
+                            class="mt-0.5 size-4 shrink-0"
+                            aria-hidden="true"
+                        />
+                        <CircleAlert
+                            v-else-if="branchNameValidation !== null"
+                            class="mt-0.5 size-4 shrink-0"
+                            aria-hidden="true"
+                        />
+                        <p class="text-sm">
+                            {{
+                                isCheckingBranchName
+                                    ? t('ticketDetail.checkingBranch')
+                                    : (branchNameValidation?.message ??
+                                      t('ticketDetail.selectRepository'))
+                            }}
+                        </p>
+                    </div>
+                </div>
+
+                <div
+                    v-if="
+                        !selectedRepositoryHasPersonalAccess &&
+                        selectedRepositoryConnection !== null
+                    "
+                    class="border-border bg-muted/20 grid gap-3 rounded-lg border border-dashed px-4 py-4"
+                >
+                    <div class="grid gap-1">
+                        <p class="font-semibold">
+                            {{ t('ticketDetail.gitAccessRequired') }}
+                        </p>
+                        <p class="text-muted-foreground text-sm">
+                            {{ t('ticketDetail.branchAccess') }}
+                        </p>
+                    </div>
+                    <Button
+                        as-child
+                        variant="outline"
+                        size="sm"
+                        class="justify-self-start"
+                    >
+                        <Link :href="editGitConnections()">{{
+                            t('ticketDetail.openGitConnections')
+                        }}</Link>
+                    </Button>
+                </div>
+
+                <DialogFooter class="gap-2">
+                    <Button
+                        type="button"
+                        variant="secondary"
+                        :disabled="form.processing"
+                        @click="updateOpen(false)"
+                    >
+                        {{ t('common.cancel') }}
+                    </Button>
+                    <Button
+                        type="submit"
+                        :disabled="
+                            isCheckingBranchName ||
+                            branchNameValidation?.is_valid !== true
+                        "
+                        :loading="form.processing"
+                        :loading-label="t('ticketDetail.creatingBranch')"
+                    >
+                        {{ t('ticketDetail.createNow') }}
+                    </Button>
+                </DialogFooter>
+            </form>
+        </DialogContent>
+    </Dialog>
+</template>
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { useForm } from '@inertiajs/vue3';
+import { computed } from 'vue';
+import ProjectTicketController from '@/actions/App/Http/Controllers/ProjectTicketController';
+import FormFeedback from '@/components/FormFeedback.vue';
+import InputError from '@/components/InputError.vue';
+import TicketFormField from '@/components/tickets/TicketFormField.vue';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+} from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { useFormProtection } from '@/composables/useFormProtection';
+import { useLocalization } from '@/composables/useLocalization';
+import type { TicketDetailBlockerProps } from '@/types/ticket-detail';
+
+const props = defineProps<TicketDetailBlockerProps>();
+const { t } = useLocalization();
+
+const savedFormData = () => ({
+    acceptance_criteria: props.ticket.acceptance_criteria,
+    assignee_user_id: props.ticket.assignee_user_id,
+    blocked_comment: props.ticket.blocked_comment ?? '',
+    description: props.ticket.description,
+    field_values: (props.ticket.field_values ?? []).map((fieldValue) => ({
+        ticket_field_definition_id: fieldValue.ticket_field_definition_id,
+        value_number: fieldValue.value_number,
+        value_user_id: fieldValue.value_user_id,
+    })),
+    is_blocked: props.ticket.is_blocked,
+    parent_ticket_id: props.ticket.parent_ticket_id,
+    story_points: props.ticket.story_points,
+    ticket_priority_id: props.ticket.ticket_priority_id,
+    ticket_type_id: props.ticket.ticket_type_id,
+    title: props.ticket.title,
+});
+
+const form = useForm(
+    `projects:${props.project.id}:tickets:${props.ticket.id}:blocker`,
+    savedFormData(),
+);
+const protection = useFormProtection(form);
+const isBlocked = computed(() => Boolean(form.is_blocked));
+
+const reset = (): void => {
+    if (form.processing || !protection.confirmLeave()) {
+        return;
+    }
+
+    form.reset();
+    form.clearErrors();
+    protection.clearFeedback();
+};
+
+const submit = (): void => {
+    if (!props.canEditTicket || form.processing) {
+        return;
+    }
+
+    protection.submit(
+        ProjectTicketController.update({
+            project: props.project.id,
+            ticket: props.ticket.id,
+        }),
+        {
+            preserveScroll: true,
+            onSuccess: () => {
+                Object.assign(form, savedFormData());
+                form.defaults();
+            },
+        },
+    );
+};
+</script>
+
+<template>
+    <section
+        id="ticket-blocker"
+        aria-labelledby="ticket-blocker-title"
+        class="min-w-0 scroll-mt-6"
+    >
+        <Card :class="{ 'border-warning/40': isBlocked }">
+            <CardHeader>
+                <div class="flex flex-wrap items-center justify-between gap-3">
+                    <h2 id="ticket-blocker-title" class="text-lg font-semibold">
+                        {{ t('ticketDetail.blocker') }}
+                    </h2>
+                    <Badge :variant="isBlocked ? 'warning' : 'outline'">
+                        {{
+                            isBlocked
+                                ? t('ticketDetail.blockerActive')
+                                : t('ticketDetail.blockerInactive')
+                        }}
+                    </Badge>
+                </div>
+                <CardDescription>
+                    {{ t('ticketDetail.blockerDescription') }}
+                </CardDescription>
+            </CardHeader>
+
+            <CardContent v-if="canEditTicket">
+                <form class="grid min-w-0 gap-5" @submit.prevent="submit">
+                    <FormFeedback
+                        :state="protection.state.value"
+                        @retry="submit"
+                    />
+
+                    <div
+                        class="bg-muted/30 flex min-w-0 items-start gap-3 rounded-xl border p-4"
+                    >
+                        <input
+                            id="is_blocked"
+                            v-model="form.is_blocked"
+                            type="checkbox"
+                            :disabled="form.processing"
+                            :aria-invalid="Boolean(form.errors.is_blocked)"
+                            aria-describedby="ticket-blocker-state-description is_blocked-error"
+                            class="border-input text-primary focus-visible:ring-ring mt-0.5 size-4 shrink-0 rounded focus-visible:ring-2"
+                        />
+                        <div class="grid min-w-0 gap-1">
+                            <Label for="is_blocked">
+                                {{ t('ticketDetail.blocked') }}
+                            </Label>
+                            <p
+                                id="ticket-blocker-state-description"
+                                class="text-muted-foreground text-sm"
+                            >
+                                {{
+                                    isBlocked
+                                        ? t(
+                                              'ticketDetail.blockerActiveDescription',
+                                          )
+                                        : t(
+                                              'ticketDetail.blockerInactiveDescription',
+                                          )
+                                }}
+                            </p>
+                        </div>
+                    </div>
+                    <InputError
+                        id="is_blocked-error"
+                        :message="form.errors.is_blocked"
+                    />
+
+                    <TicketFormField
+                        v-if="isBlocked"
+                        id="blocked_comment"
+                        v-model="form.blocked_comment"
+                        kind="textarea"
+                        :rows="3"
+                        :label="t('ticketDetail.blockerComment')"
+                        :hint="t('ticketDetail.blockerCommentHelp')"
+                        :placeholder="t('ticketDetail.blockerPlaceholder')"
+                        :error="form.errors.blocked_comment"
+                        :disabled="form.processing"
+                        required
+                    />
+
+                    <div
+                        class="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end"
+                    >
+                        <Button
+                            type="button"
+                            variant="outline"
+                            :disabled="!form.isDirty || form.processing"
+                            @click="reset"
+                        >
+                            {{ t('ticketDetail.resetBlocker') }}
+                        </Button>
+                        <Button
+                            type="submit"
+                            :loading="form.processing"
+                            :loading-label="t('ticketDetail.savingBlocker')"
+                            :disabled="!form.isDirty"
+                        >
+                            {{
+                                isBlocked
+                                    ? t('ticketDetail.saveBlocker')
+                                    : t('ticketDetail.unblockTicket')
+                            }}
+                        </Button>
+                    </div>
+                </form>
+            </CardContent>
+
+            <CardContent v-else>
+                <p
+                    class="whitespace-pre-wrap text-sm leading-6"
+                    :class="{ 'text-muted-foreground': !isBlocked }"
+                >
+                    {{
+                        isBlocked
+                            ? ticket.blocked_comment
+                            : t('ticketDetail.blockerInactiveDescription')
+                    }}
+                </p>
+            </CardContent>
+        </Card>
+    </section>
+</template>
@@ -0,0 +1,497 @@
+<script setup lang="ts">
+import { useLocalization } from '@/composables/useLocalization';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+
+import { useForm, useRemember } from '@inertiajs/vue3';
+import {
+    computed,
+    ref,
+    toRef,
+    unref,
+    useTemplateRef,
+    nextTick,
+    watch,
+} from 'vue';
+import ProjectTicketController from '@/actions/App/Http/Controllers/ProjectTicketController';
+import InputError from '@/components/InputError.vue';
+import AcceptanceCriteriaChecklist from '@/components/tickets/AcceptanceCriteriaChecklist.vue';
+import FormFeedback from '@/components/FormFeedback.vue';
+import { Button } from '@/components/ui/button';
+import TicketFormField from '@/components/tickets/TicketFormField.vue';
+import TicketFormFields from '@/components/tickets/TicketFormFields.vue';
+import { useFormProtection } from '@/composables/useFormProtection';
+import {
+    normalizeAcceptanceCriteria,
+    syncAcceptanceCriteriaDescendantCheckedState,
+} from '@/lib/acceptance-criteria';
+import type { TicketDetailContentProps } from '@/types/ticket-detail';
+const props = defineProps<TicketDetailContentProps>();
+const { t } = useLocalization();
+const editor = useTemplateRef<HTMLDetailsElement>('editor');
+async function editParent(): Promise<void> {
+    if (!props.canEditTicket || !editor.value) {
+        return;
+    }
+    editor.value.open = true;
+    await nextTick();
+    editor.value
+        ?.querySelector<HTMLSelectElement>('#parent_ticket_id')
+        ?.focus();
+}
+defineExpose({ editParent });
+const canEditAuthor = computed(
+    () => props.canEditTicket && props.canManageProject,
+);
+const canViewAuthor = computed(
+    () => props.project.show_author || props.canManageProject,
+);
+const draftKey = `projects:${props.project.id}:tickets:${props.ticket.id}:edit`;
+const acceptanceCriteriaDraft = useRemember(
+    { items: normalizeAcceptanceCriteria(props.ticket.acceptance_criteria) },
+    `${draftKey}:criteria`,
+);
+const acceptanceCriteriaItems = toRef(unref(acceptanceCriteriaDraft), 'items');
+const savedAcceptanceCriteria = ref(
+    normalizeAcceptanceCriteria(props.ticket.acceptance_criteria),
+);
+const isPersistingAcceptanceCriteriaToggle = ref(false);
+const acceptanceCriteriaToggleError = ref('');
+
+const savedFormData = () => ({
+    acceptance_criteria: normalizeAcceptanceCriteria(
+        savedAcceptanceCriteria.value,
+    ),
+    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.ticketFieldDefinitions.map((ticketFieldDefinition) => {
+        const currentFieldValue = props.ticket.field_values?.find(
+            (fieldValue) =>
+                fieldValue.ticket_field_definition_id ===
+                ticketFieldDefinition.id,
+        );
+
+        return {
+            ticket_field_definition_id: ticketFieldDefinition.id,
+            value_number: currentFieldValue?.value_number ?? '',
+            value_user_id: currentFieldValue?.value_user_id ?? '',
+        };
+    }),
+    is_blocked: props.ticket.is_blocked,
+    parent_ticket_id: props.ticket.parent_ticket_id ?? '',
+    ticket_priority_id: props.ticket.ticket_priority_id,
+    ticket_type_id: props.ticket.ticket_type_id,
+    title: props.ticket.title,
+    story_points: props.ticket.story_points,
+});
+
+const form = useForm(draftKey, savedFormData());
+
+watch(
+    () => [props.ticket.is_blocked, props.ticket.blocked_comment] as const,
+    ([isBlocked, blockedComment]) => {
+        form.is_blocked = isBlocked;
+        form.blocked_comment = blockedComment ?? '';
+        form.defaults('is_blocked', isBlocked);
+        form.defaults('blocked_comment', blockedComment ?? '');
+    },
+);
+
+const hasUnsavedAcceptanceCriteriaDraft = computed(
+    () =>
+        JSON.stringify(acceptanceCriteriaItems.value) !==
+        JSON.stringify(savedAcceptanceCriteria.value),
+);
+
+const isDirty = computed(
+    () =>
+        props.canEditTicket &&
+        (form.isDirty || hasUnsavedAcceptanceCriteriaDraft.value),
+);
+const protection = useFormProtection(form, { isDirty: () => isDirty.value });
+const reset = (): void => {
+    if (
+        form.processing ||
+        isPersistingAcceptanceCriteriaToggle.value ||
+        !protection.confirmLeave()
+    ) {
+        return;
+    }
+    form.reset();
+    form.clearErrors();
+    acceptanceCriteriaItems.value = normalizeAcceptanceCriteria(
+        savedAcceptanceCriteria.value,
+    );
+    acceptanceCriteriaToggleError.value = '';
+    protection.clearFeedback();
+};
+
+const acceptanceCriteriaError = computed(() => {
+    return (
+        form.errors.acceptance_criteria ??
+        Object.entries(form.errors).find(([key]) =>
+            key.startsWith('acceptance_criteria.'),
+        )?.[1] ??
+        ''
+    );
+});
+
+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 persistAcceptanceCriteriaToggle = async (
+    index: number,
+    checked: boolean,
+): Promise<void> => {
+    if (
+        !props.canEditTicket ||
+        form.processing ||
+        isPersistingAcceptanceCriteriaToggle.value ||
+        hasUnsavedAcceptanceCriteriaDraft.value
+    ) {
+        return;
+    }
+
+    const nextAcceptanceCriteria = syncAcceptanceCriteriaDescendantCheckedState(
+        savedAcceptanceCriteria.value,
+        index,
+        checked,
+    );
+    const csrfToken = document
+        .querySelector('meta[name="csrf-token"]')
+        ?.getAttribute('content');
+
+    isPersistingAcceptanceCriteriaToggle.value = true;
+    acceptanceCriteriaToggleError.value = '';
+
+    try {
+        const response = await fetch(
+            ProjectTicketController.update.url({
+                project: props.project.id,
+                ticket: props.ticket.id,
+            }),
+            {
+                method: 'PATCH',
+                credentials: 'same-origin',
+                headers: {
+                    Accept: 'application/json',
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': csrfToken ?? '',
+                    'X-Requested-With': 'XMLHttpRequest',
+                },
+                body: JSON.stringify(
+                    buildSavedTicketPayload(nextAcceptanceCriteria),
+                ),
+            },
+        );
+
+        if (!response.ok) {
+            throw new Error('Checklist toggle update failed.');
+        }
+
+        savedAcceptanceCriteria.value = nextAcceptanceCriteria;
+
+        acceptanceCriteriaItems.value = normalizeAcceptanceCriteria(
+            nextAcceptanceCriteria,
+        );
+        form.acceptance_criteria = nextAcceptanceCriteria;
+        form.defaults('acceptance_criteria', nextAcceptanceCriteria);
+    } catch (_error) {
+        acceptanceCriteriaToggleError.value = t('criteria.saveError');
+    } finally {
+        isPersistingAcceptanceCriteriaToggle.value = false;
+    }
+};
+
+const submit = (): void => {
+    if (
+        !props.canEditTicket ||
+        form.processing ||
+        isPersistingAcceptanceCriteriaToggle.value
+    ) {
+        return;
+    }
+
+    form.acceptance_criteria = acceptanceCriteriaItems.value;
+
+    protection.submit(
+        ProjectTicketController.update({
+            project: props.project.id,
+            ticket: props.ticket.id,
+        }),
+        {
+            preserveScroll: true,
+            onSuccess: () => {
+                savedAcceptanceCriteria.value = normalizeAcceptanceCriteria(
+                    props.ticket.acceptance_criteria,
+                );
+                acceptanceCriteriaItems.value = normalizeAcceptanceCriteria(
+                    savedAcceptanceCriteria.value,
+                );
+                Object.assign(form, savedFormData());
+                form.defaults();
+            },
+        },
+    );
+};
+</script>
+
+<template>
+    <div class="flex min-w-0 flex-col gap-6">
+        <section
+            id="ticket-description"
+            aria-labelledby="ticket-description-title"
+            class="scroll-mt-6"
+        >
+            <Card>
+                <CardHeader
+                    ><h2
+                        id="ticket-description-title"
+                        class="text-lg font-semibold"
+                    >
+                        {{ t('ticketDetail.description') }}
+                    </h2></CardHeader
+                >
+                <CardContent>
+                    <p
+                        class="wrap-anywhere whitespace-pre-wrap text-sm leading-7"
+                        :class="{
+                            'text-muted-foreground': !ticket.description,
+                        }"
+                    >
+                        {{
+                            ticket.description ||
+                            t('ticketDetail.noDescription')
+                        }}
+                    </p>
+                </CardContent>
+            </Card>
+        </section>
+        <div id="ticket-checklist" class="scroll-mt-6">
+            <AcceptanceCriteriaChecklist
+                :model-value="savedAcceptanceCriteria"
+                :readonly="!canEditTicket"
+                :disabled="
+                    form.processing ||
+                    isPersistingAcceptanceCriteriaToggle ||
+                    hasUnsavedAcceptanceCriteriaDraft
+                "
+                :saving="
+                    form.processing || isPersistingAcceptanceCriteriaToggle
+                "
+                :allow-editing="false"
+                persist-toggles
+                :dirty="hasUnsavedAcceptanceCriteriaDraft"
+                :error="acceptanceCriteriaToggleError"
+                @toggle="persistAcceptanceCriteriaToggle"
+            />
+        </div>
+        <details
+            v-if="canEditTicket"
+            id="ticket-edit"
+            ref="editor"
+            class="bg-card group rounded-xl border shadow-sm"
+        >
+            <summary
+                class="min-h-control focus-visible:ring-ring cursor-pointer rounded-xl px-6 py-4 font-semibold focus-visible:outline-none focus-visible:ring-2"
+            >
+                {{ t('ticketDetail.edit') }}
+            </summary>
+            <div class="border-t p-4 sm:p-6">
+                <p class="text-muted-foreground mb-6 text-sm">
+                    {{ t('ticketDetail.editDescription') }}
+                </p>
+                <form class="grid min-w-0 gap-6" @submit.prevent="submit">
+                    <FormFeedback
+                        :state="protection.state.value"
+                        @retry="submit"
+                    />
+                    <TicketFormFields
+                        v-model:title="form.title"
+                        v-model:description="form.description"
+                        v-model:type="form.ticket_type_id"
+                        v-model:priority="form.ticket_priority_id"
+                        v-model:assignee="form.assignee_user_id"
+                        v-model:parent="form.parent_ticket_id"
+                        v-model:points="form.story_points"
+                        :project="project"
+                        :ticket-types="ticketTypes"
+                        :ticket-priorities="ticketPriorities"
+                        :users="users"
+                        :parent-ticket-options="parentTicketOptions"
+                        :errors="form.errors"
+                        :disabled="
+                            form.processing ||
+                            isPersistingAcceptanceCriteriaToggle
+                        "
+                    >
+                        <template #content>
+                            <AcceptanceCriteriaChecklist
+                                v-model="acceptanceCriteriaItems"
+                                :disabled="
+                                    form.processing ||
+                                    isPersistingAcceptanceCriteriaToggle
+                                "
+                                :error="acceptanceCriteriaError"
+                            />
+                        </template>
+                        <template #metadata>
+                            <TicketFormField
+                                v-if="canViewAuthor"
+                                id="author_user_id"
+                                v-model="form.author_user_id"
+                                kind="select"
+                                :label="t('ticketDetail.author')"
+                                :hint="
+                                    !canEditAuthor
+                                        ? t('ticketForm.authorRestricted')
+                                        : undefined
+                                "
+                                :options="[
+                                    {
+                                        value: '',
+                                        label: t('ticketDetail.noAuthor'),
+                                    },
+                                    ...users.map((user) => ({
+                                        value: user.id,
+                                        label: user.name,
+                                    })),
+                                ]"
+                                :error="form.errors.author_user_id"
+                                :disabled="!canEditAuthor || form.processing"
+                            />
+                        </template>
+                    </TicketFormFields>
+                    <fieldset
+                        class="grid min-w-0 gap-4 rounded-xl border p-4 sm:p-5"
+                        :disabled="
+                            form.processing ||
+                            isPersistingAcceptanceCriteriaToggle
+                        "
+                    >
+                        <legend class="px-2 text-sm font-semibold">
+                            {{ t('ticketDetail.customFields') }}
+                        </legend>
+                        <p class="text-muted-foreground text-sm">
+                            {{ t('ticketDetail.customFieldsDescription') }}
+                        </p>
+                        <InputError :message="form.errors.field_values" />
+                        <p
+                            v-if="!ticketFieldDefinitions.length"
+                            class="text-muted-foreground text-sm"
+                        >
+                            {{ t('ticketDetail.noCustomFields') }}
+                        </p>
+                        <div v-else class="grid min-w-0 gap-5 sm:grid-cols-2">
+                            <template
+                                v-for="(
+                                    definition, index
+                                ) in ticketFieldDefinitions"
+                                :key="definition.id"
+                            >
+                                <TicketFormField
+                                    v-if="definition.field_type === 'user'"
+                                    :id="`field-${definition.id}`"
+                                    v-model="
+                                        form.field_values[index].value_user_id
+                                    "
+                                    kind="select"
+                                    :label="definition.label"
+                                    :options="[
+                                        {
+                                            value: '',
+                                            label: t('tickets.unassigned'),
+                                        },
+                                        ...users.map((user) => ({
+                                            value: user.id,
+                                            label: user.name,
+                                        })),
+                                    ]"
+                                    :error="
+                                        form.errors[
+                                            `field_values.${index}.value_user_id`
+                                        ] ??
+                                        form.errors[
+                                            `field_values.${index}.ticket_field_definition_id`
+                                        ]
+                                    "
+                                />
+                                <TicketFormField
+                                    v-else
+                                    :id="`field-${definition.id}`"
+                                    v-model="
+                                        form.field_values[index].value_number
+                                    "
+                                    kind="number"
+                                    step="0.1"
+                                    :label="definition.label"
+                                    :error="
+                                        form.errors[
+                                            `field_values.${index}.value_number`
+                                        ] ??
+                                        form.errors[
+                                            `field_values.${index}.ticket_field_definition_id`
+                                        ]
+                                    "
+                                />
+                            </template>
+                        </div>
+                    </fieldset>
+                    <div
+                        class="flex flex-wrap items-center gap-3 border-t pt-5"
+                    >
+                        <Button
+                            type="submit"
+                            :disabled="
+                                form.processing ||
+                                isPersistingAcceptanceCriteriaToggle
+                            "
+                            >{{
+                                form.processing
+                                    ? t('ticketForm.saving')
+                                    : t('ticketDetail.saveChanges')
+                            }}</Button
+                        >
+                        <Button
+                            type="button"
+                            variant="outline"
+                            :disabled="
+                                form.processing ||
+                                isPersistingAcceptanceCriteriaToggle ||
+                                !isDirty
+                            "
+                            @click="reset"
+                            >{{ t('ticketForm.reset') }}</Button
+                        >
+                        <p role="status" class="text-muted-foreground text-sm">
+                            {{
+                                isDirty
+                                    ? t('ticketForm.unsaved')
+                                    : t('ticketForm.saved')
+                            }}
+                        </p>
+                    </div>
+                </form>
+            </div>
+        </details>
+    </div>
+</template>
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import TicketGitBranches from '@/components/tickets/detail/TicketGitBranches.vue';
+import TicketGitPullRequests from '@/components/tickets/detail/TicketGitPullRequests.vue';
+import { useLocalization } from '@/composables/useLocalization';
+import type { TicketDetailGitProps } from '@/types/ticket-detail';
+
+defineProps<TicketDetailGitProps>();
+
+const { t } = useLocalization();
+</script>
+
+<template>
+    <section
+        id="ticket-git"
+        aria-labelledby="ticket-git-title"
+        class="wrap-anywhere flex min-w-0 scroll-mt-6 flex-col gap-4"
+    >
+        <h2 id="ticket-git-title" class="text-lg font-semibold">
+            {{ t('ticketDetail.git') }}
+        </h2>
+
+        <div class="grid min-w-0 gap-6">
+            <TicketGitBranches
+                :ticket="ticket"
+                :project="project"
+                :can-edit-ticket="canEditTicket"
+                :repository-branches="repositoryBranches"
+                :suggested-branch-name="suggestedBranchName"
+            />
+            <TicketGitPullRequests
+                :repository-pull-requests="repositoryPullRequests"
+            />
+        </div>
+    </section>
+</template>
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+import { ArrowLeft, Columns3, ListTree } from 'lucide-vue-next';
+import TicketMetadata from '@/components/tickets/TicketMetadata.vue';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { useLocalization } from '@/composables/useLocalization';
+import { index as backlogIndex } from '@/routes/projects/backlog';
+import { index as boardIndex } from '@/routes/projects/board';
+import { show } from '@/routes/projects';
+import type { TicketDetailHeaderProps } from '@/types/ticket-detail';
+defineProps<TicketDetailHeaderProps>();
+const { t } = useLocalization();
+const sections = [
+    'description',
+    'checklist',
+    'metadata',
+    'blocker',
+    'relationships',
+    'history',
+    'git',
+] as const;
+</script>
+<template>
+    <header class="flex min-w-0 flex-col gap-5">
+        <div class="flex flex-wrap items-center justify-between gap-3">
+            <Button as-child variant="ghost" class="max-w-full"
+                ><Link :href="show(project.id)"
+                    ><ArrowLeft aria-hidden="true" />{{
+                        t('ticketDetail.backToProject')
+                    }}</Link
+                ></Button
+            >
+            <div class="flex flex-wrap gap-2">
+                <Button as-child variant="outline"
+                    ><Link :href="backlogIndex(project.id)"
+                        ><ListTree aria-hidden="true" />{{
+                            t('ticketDetail.openBacklog')
+                        }}</Link
+                    ></Button
+                >
+                <Button as-child variant="outline"
+                    ><Link :href="boardIndex(project.id)"
+                        ><Columns3 aria-hidden="true" />{{
+                            t('ticketDetail.openBoard')
+                        }}</Link
+                    ></Button
+                >
+            </div>
+        </div>
+        <div class="flex min-w-0 flex-col gap-3">
+            <div class="flex flex-wrap items-center gap-2">
+                <span class="text-primary font-mono text-sm font-semibold">{{
+                    ticket.ticket_key
+                }}</span
+                ><Badge v-if="!canEditTicket" variant="outline">{{
+                    t('ticketDetail.readOnly')
+                }}</Badge>
+            </div>
+            <h1
+                class="wrap-anywhere text-2xl font-semibold leading-tight tracking-tight sm:text-3xl"
+            >
+                {{ ticket.title }}
+            </h1>
+            <TicketMetadata :ticket="ticket" />
+        </div>
+        <nav
+            :aria-label="t('ticketDetail.sections')"
+            class="flex flex-wrap gap-1 border-b pb-3"
+        >
+            <a
+                v-for="section in sections"
+                :key="section"
+                :href="`#ticket-${section}`"
+                class="min-h-control text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring inline-flex items-center rounded-lg px-3 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2"
+                >{{ t(`ticketDetail.${section}`) }}</a
+            >
+        </nav>
+    </header>
+</template>
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { useLocalization } from '@/composables/useLocalization';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+} from '@/components/ui/card';
+
+import { Badge } from '@/components/ui/badge';
+import { UserAvatar } from '@/components/ui/avatar';
+import type { TicketDetailHistoryProps } from '@/types/ticket-detail';
+import type { TranslationKey } from '@/types/localization';
+import type { TicketWorklogEntryType } from '@/types/models/ticket-worklog-entry-model';
+defineProps<TicketDetailHistoryProps>();
+const { t, date } = useLocalization();
+const formatDateTime = (value: string): string =>
+    date(new Date(value), { dateStyle: 'medium', timeStyle: 'short' });
+const entryTypeLabels: Record<TicketWorklogEntryType, TranslationKey> = {
+    created: 'ticketDetail.historyType.created',
+    link_removed: 'ticketDetail.historyType.linkRemoved',
+    link_updated: 'ticketDetail.historyType.linkUpdated',
+    status_changed: 'ticketDetail.historyType.statusChanged',
+    updated: 'ticketDetail.historyType.updated',
+};
+</script>
+
+<template>
+    <section
+        id="ticket-history"
+        aria-labelledby="ticket-history-title"
+        class="wrap-anywhere min-w-0 scroll-mt-6"
+    >
+        <Card class="h-fit">
+            <CardHeader>
+                <h2 id="ticket-history-title" class="text-lg font-semibold">
+                    {{ t('ticketDetail.history') }}
+                </h2>
+                <CardDescription>{{
+                    t('ticketDetail.historyDescription')
+                }}</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"
+                >
+                    {{ t('ticketDetail.noHistory') }}
+                </div>
+
+                <ol v-else class="relative grid gap-0" role="list">
+                    <li
+                        v-for="worklogEntry in ticket.worklog_entries"
+                        :key="worklogEntry.id"
+                        class="border-border relative grid min-w-0 grid-cols-[2.5rem_minmax(0,1fr)] gap-3 border-l pb-6 last:border-transparent last:pb-0 sm:grid-cols-[3rem_minmax(0,1fr)] sm:gap-4"
+                    >
+                        <div
+                            class="bg-card relative -left-px flex size-10 -translate-x-1/2 items-center justify-center rounded-full sm:size-12"
+                        >
+                            <UserAvatar
+                                v-if="worklogEntry.actor"
+                                :user="worklogEntry.actor"
+                                size="lg"
+                            />
+                            <span
+                                v-else
+                                aria-hidden="true"
+                                class="bg-muted text-muted-foreground flex size-10 items-center justify-center rounded-full border text-sm font-semibold"
+                            >
+                                S
+                            </span>
+                        </div>
+                        <article
+                            class="bg-muted/20 min-w-0 rounded-xl border p-4"
+                        >
+                            <div
+                                class="flex min-w-0 flex-col gap-2 sm:flex-row sm:items-start sm:justify-between"
+                            >
+                                <div
+                                    class="flex min-w-0 flex-wrap items-center gap-2"
+                                >
+                                    <span
+                                        class="text-foreground text-sm font-semibold"
+                                    >
+                                        {{
+                                            worklogEntry.actor?.name ??
+                                            t('ticketDetail.system')
+                                        }}
+                                    </span>
+                                    <Badge variant="outline">
+                                        {{
+                                            t(
+                                                entryTypeLabels[
+                                                    worklogEntry.entry_type
+                                                ],
+                                            )
+                                        }}
+                                    </Badge>
+                                </div>
+                                <time
+                                    :datetime="worklogEntry.created_at"
+                                    class="text-muted-foreground shrink-0 text-xs"
+                                >
+                                    {{
+                                        formatDateTime(worklogEntry.created_at)
+                                    }}
+                                </time>
+                            </div>
+                            <p class="text-foreground mt-3 text-sm leading-6">
+                                {{ worklogEntry.summary }}
+                            </p>
+                        </article>
+                    </li>
+                </ol>
+            </CardContent>
+        </Card>
+    </section>
+</template>
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { UserAvatar } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { useLocalization } from '@/composables/useLocalization';
+import { ticketStatusLabel } from '@/lib/tickets';
+import type { TicketDetailMetadataProps } from '@/types/ticket-detail';
+const props = defineProps<TicketDetailMetadataProps>();
+const { t, date, number } = useLocalization();
+const fields = computed(() =>
+    props.ticketFieldDefinitions.map((definition) => {
+        const value = props.ticket.field_values?.find(
+            (field) => field.ticket_field_definition_id === definition.id,
+        );
+        return {
+            id: definition.id,
+            label: definition.label,
+            value:
+                definition.field_type === 'user'
+                    ? (value?.user_value?.name ?? t('tickets.unassigned'))
+                    : value?.value_number != null
+                      ? number(value.value_number)
+                      : t('ticketDetail.notSet'),
+        };
+    }),
+);
+</script>
+<template>
+    <section
+        id="ticket-metadata"
+        aria-labelledby="ticket-metadata-title"
+        class="min-w-0 scroll-mt-6"
+    >
+        <Card class="bg-muted/30">
+            <CardHeader
+                ><h2 id="ticket-metadata-title" class="text-lg font-semibold">
+                    {{ t('ticketDetail.metadata') }}
+                </h2></CardHeader
+            >
+            <CardContent class="wrap-anywhere flex min-w-0 flex-col gap-6">
+                <dl
+                    class="grid min-w-0 gap-5 text-sm sm:grid-cols-2 xl:grid-cols-1"
+                >
+                    <div class="space-y-2">
+                        <dt class="text-muted-foreground">
+                            {{ t('ticketDetail.status') }}
+                        </dt>
+                        <dd>
+                            {{
+                                ticketStatusLabel(
+                                    ticket.ticket_status,
+                                    t('tickets.noStatus'),
+                                )
+                            }}
+                        </dd>
+                    </div>
+                    <div class="space-y-2">
+                        <dt class="text-muted-foreground">
+                            {{ t('ticketDetail.type') }}
+                        </dt>
+                        <dd>{{ ticket.ticket_type.name }}</dd>
+                    </div>
+                    <div class="space-y-2">
+                        <dt class="text-muted-foreground">
+                            {{ t('ticketDetail.priority') }}
+                        </dt>
+                        <dd>
+                            <Badge variant="outline">{{
+                                ticket.ticket_priority.name
+                            }}</Badge>
+                        </dd>
+                    </div>
+                    <div class="space-y-2">
+                        <dt class="text-muted-foreground">
+                            {{ t('ticketDetail.assignee') }}
+                        </dt>
+                        <dd class="flex items-center gap-2">
+                            <UserAvatar
+                                v-if="ticket.assignee"
+                                :user="ticket.assignee"
+                                size="sm"
+                            />{{
+                                ticket.assignee?.name ?? t('tickets.unassigned')
+                            }}
+                        </dd>
+                    </div>
+                    <div
+                        v-if="project.show_author || canManageProject"
+                        class="space-y-2"
+                    >
+                        <dt class="text-muted-foreground">
+                            {{ t('ticketDetail.author') }}
+                        </dt>
+                        <dd class="flex items-center gap-2">
+                            <UserAvatar
+                                v-if="ticket.author"
+                                :user="ticket.author"
+                                size="sm"
+                            />{{
+                                ticket.author?.name ??
+                                t('ticketDetail.noAuthor')
+                            }}
+                        </dd>
+                    </div>
+                    <div v-if="project.show_story_points" class="space-y-2">
+                        <dt class="text-muted-foreground">
+                            {{ t('ticketDetail.storyPoints') }}
+                        </dt>
+                        <dd>
+                            {{
+                                ticket.story_points != null
+                                    ? number(ticket.story_points)
+                                    : t('ticketDetail.notSet')
+                            }}
+                        </dd>
+                    </div>
+                    <div
+                        v-for="field in fields"
+                        :key="field.id"
+                        class="space-y-2"
+                    >
+                        <dt class="text-muted-foreground">{{ field.label }}</dt>
+                        <dd>{{ field.value }}</dd>
+                    </div>
+                </dl>
+                <div
+                    v-if="ticket.is_blocked"
+                    class="border-warning/30 bg-warning/10 space-y-2 rounded-lg border p-4 text-sm"
+                >
+                    <p class="font-semibold">{{ t('tickets.blocked') }}</p>
+                    <p class="whitespace-pre-wrap">
+                        {{ ticket.blocked_comment }}
+                    </p>
+                </div>
+                <dl
+                    class="text-muted-foreground grid gap-4 border-t pt-5 text-xs"
+                >
+                    <div class="space-y-1">
+                        <dt>{{ t('ticketDetail.created') }}</dt>
+                        <dd>
+                            <time :datetime="ticket.created_at">{{
+                                date(new Date(ticket.created_at), {
+                                    dateStyle: 'medium',
+                                    timeStyle: 'short',
+                                })
+                            }}</time>
+                        </dd>
+                    </div>
+                    <div class="space-y-1">
+                        <dt>{{ t('ticketDetail.updated') }}</dt>
+                        <dd>
+                            <time :datetime="ticket.updated_at">{{
+                                date(new Date(ticket.updated_at), {
+                                    dateStyle: 'medium',
+                                    timeStyle: 'short',
+                                })
+                            }}</time>
+                        </dd>
+                    </div>
+                </dl>
+            </CardContent>
+        </Card>
+    </section>
+</template>
@@ -0,0 +1,305 @@
+<script setup lang="ts">
+import { Link, useForm } from '@inertiajs/vue3';
+import { ArrowRight, GitFork, Link2, Plus } from 'lucide-vue-next';
+import { computed, nextTick, useTemplateRef } from 'vue';
+import { store } from '@/actions/App/Http/Controllers/ProjectTicketLinkController';
+import FormFeedback from '@/components/FormFeedback.vue';
+import TicketTreeList from '@/components/TicketTreeList.vue';
+import TicketFormField from '@/components/tickets/TicketFormField.vue';
+import TicketRelationshipLink from '@/components/tickets/detail/TicketRelationshipLink.vue';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { useFormProtection } from '@/composables/useFormProtection';
+import { useLocalization } from '@/composables/useLocalization';
+import { show as showTicket } from '@/routes/projects/tickets';
+import type { TicketDetailRelationshipsProps } from '@/types/ticket-detail';
+
+const props = defineProps<TicketDetailRelationshipsProps>();
+defineEmits<{ editParent: [] }>();
+const { t } = useLocalization();
+const linksHeading = useTemplateRef<HTMLHeadingElement>('linksHeading');
+const currentParentTicket = computed(
+    () =>
+        props.ticket.parent_ticket ??
+        props.parentTicketOptions.find(
+            (parent) => parent.id === props.ticket.parent_ticket_id,
+        ) ??
+        null,
+);
+const canAddLink = computed(
+    () =>
+        props.canEditTicket &&
+        props.ticketLinkTypes.length > 0 &&
+        props.ticketLinkOptions.length > 0,
+);
+const form = useForm({
+    ticket_link_type_id: props.ticketLinkTypes[0]?.id ?? '',
+    linked_ticket_id: '',
+});
+const protection = useFormProtection(form, {
+    isDirty: () => props.canEditTicket && form.isDirty,
+});
+const selectedType = computed(() =>
+    props.ticketLinkTypes.find(
+        (type) => String(type.id) === String(form.ticket_link_type_id),
+    ),
+);
+const selectedTicket = computed(() =>
+    props.ticketLinkOptions.find(
+        (ticket) => String(ticket.id) === String(form.linked_ticket_id),
+    ),
+);
+
+async function focusLinks(): Promise<void> {
+    await nextTick();
+    linksHeading.value?.focus();
+}
+function submit(): void {
+    if (!canAddLink.value) {
+        return;
+    }
+    protection.submit(
+        store({ project: props.project.id, ticket: props.ticket.id }),
+        {
+            preserveScroll: true,
+            onSuccess: () => {
+                form.linked_ticket_id = '';
+                form.clearErrors();
+                void focusLinks();
+            },
+        },
+    );
+}
+</script>
+
+<template>
+    <section
+        id="ticket-relationships"
+        aria-labelledby="ticket-relationships-title"
+        class="wrap-anywhere flex min-w-0 scroll-mt-6 flex-col gap-4"
+    >
+        <h2 id="ticket-relationships-title" class="text-lg font-semibold">
+            {{ t('ticketDetail.relationships') }}
+        </h2>
+        <Card class="min-w-0 gap-5 overflow-hidden">
+            <CardHeader
+                class="flex flex-wrap items-center justify-between gap-3"
+            >
+                <h3 class="flex items-center gap-2 font-semibold">
+                    <GitFork class="text-primary size-5" aria-hidden="true" />{{
+                        t('ticketRelationships.hierarchy')
+                    }}
+                </h3>
+                <Button
+                    v-if="canEditTicket"
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    @click="$emit('editParent')"
+                    >{{ t('ticketRelationships.editParent') }}</Button
+                >
+            </CardHeader>
+            <CardContent class="grid min-w-0 gap-5">
+                <div class="grid min-w-0 gap-2">
+                    <h4
+                        class="text-muted-foreground text-xs font-semibold uppercase tracking-wide"
+                    >
+                        {{ t('ticketDetail.parent') }}
+                    </h4>
+                    <Link
+                        v-if="currentParentTicket"
+                        :href="
+                            showTicket({
+                                project: project.id,
+                                ticket: currentParentTicket.id,
+                            })
+                        "
+                        class="border-primary/20 bg-primary/5 hover:border-primary focus-visible:ring-ring/35 group grid min-w-0 gap-2 rounded-xl border p-4 outline-none transition-colors focus-visible:ring-2"
+                    >
+                        <span
+                            class="text-primary font-mono text-xs font-semibold"
+                            >{{ currentParentTicket.ticket_key }}</span
+                        >
+                        <span
+                            class="group-hover:text-primary text-sm font-medium"
+                            >{{ currentParentTicket.title }}</span
+                        >
+                    </Link>
+                    <p
+                        v-else
+                        class="text-muted-foreground rounded-xl border border-dashed p-4 text-sm"
+                    >
+                        {{ t('ticketDetail.noParent') }}
+                    </p>
+                    <p
+                        v-if="canEditTicket"
+                        class="text-muted-foreground text-xs"
+                    >
+                        {{ t('ticketRelationships.parentHelp') }}
+                    </p>
+                </div>
+                <div
+                    v-if="ticket.ticket_type?.is_parent"
+                    class="grid min-w-0 gap-3 border-t pt-5"
+                >
+                    <div class="flex flex-wrap items-center gap-2">
+                        <h4 class="text-sm font-semibold">
+                            {{ t('ticketDetail.children') }}
+                        </h4>
+                        <Badge variant="secondary">{{
+                            childTicketTree.length
+                        }}</Badge>
+                    </div>
+                    <p class="text-muted-foreground text-xs">
+                        {{ t('ticketRelationships.childrenHelp') }}
+                    </p>
+                    <p
+                        v-if="childTicketTree.length === 0"
+                        class="text-muted-foreground rounded-xl border border-dashed p-4 text-sm"
+                    >
+                        {{ t('ticketDetail.noChildren') }}
+                    </p>
+                    <TicketTreeList
+                        v-else
+                        :nodes="childTicketTree"
+                        :project-id="project.id"
+                    />
+                </div>
+            </CardContent>
+        </Card>
+        <Card class="min-w-0 gap-5 overflow-hidden">
+            <CardHeader>
+                <h3
+                    ref="linksHeading"
+                    tabindex="-1"
+                    class="focus-visible:ring-ring/35 flex flex-wrap items-center gap-2 rounded-md font-semibold outline-none focus-visible:ring-2"
+                >
+                    <Link2 class="text-primary size-5" aria-hidden="true" />{{
+                        t('ticketDetail.linkedTickets')
+                    }}<Badge variant="secondary">{{
+                        linkedTickets.length
+                    }}</Badge>
+                </h3>
+                <p class="text-muted-foreground text-sm">
+                    {{ t('ticketDetail.linkedTicketsDescription') }}
+                </p>
+            </CardHeader>
+            <CardContent class="grid min-w-0 gap-5">
+                <p
+                    v-if="linkedTickets.length === 0"
+                    class="text-muted-foreground rounded-xl border border-dashed p-4 text-sm"
+                >
+                    {{ t('ticketDetail.noLinks') }}
+                </p>
+                <ul v-else class="grid min-w-0 gap-3">
+                    <TicketRelationshipLink
+                        v-for="link in linkedTickets"
+                        :key="link.id"
+                        :link="link"
+                        :project-id="project.id"
+                        :ticket-id="ticket.id"
+                        :ticket-key="ticket.ticket_key"
+                        :can-edit="canEditTicket"
+                        @removed="focusLinks"
+                    />
+                </ul>
+                <form
+                    v-if="canAddLink"
+                    class="bg-muted/30 grid min-w-0 gap-4 rounded-xl border p-4"
+                    @submit.prevent="submit"
+                >
+                    <h4 class="flex items-center gap-2 text-sm font-semibold">
+                        <Plus class="size-4" aria-hidden="true" />{{
+                            t('ticketRelationships.addLink')
+                        }}
+                    </h4>
+                    <FormFeedback
+                        :state="protection.state.value"
+                        @retry="submit"
+                    />
+                    <fieldset
+                        :disabled="form.processing"
+                        class="grid min-w-0 gap-4 sm:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]"
+                    >
+                        <TicketFormField
+                            id="ticket_link_type_id"
+                            v-model="form.ticket_link_type_id"
+                            kind="select"
+                            :label="t('ticketDetail.linkType')"
+                            :options="
+                                ticketLinkTypes.map((type) => ({
+                                    value: type.id,
+                                    label: type.label,
+                                }))
+                            "
+                            :error="form.errors.ticket_link_type_id"
+                            :disabled="form.processing"
+                            required
+                        />
+                        <TicketFormField
+                            id="linked_ticket_id"
+                            v-model="form.linked_ticket_id"
+                            kind="select"
+                            :label="t('ticketDetail.linkedTicket')"
+                            :options="[
+                                {
+                                    value: '',
+                                    label: t(
+                                        'ticketRelationships.selectTicket',
+                                    ),
+                                },
+                                ...ticketLinkOptions.map((ticket) => ({
+                                    value: ticket.id,
+                                    label: `${ticket.ticket_key} — ${ticket.title}`,
+                                })),
+                            ]"
+                            :error="form.errors.linked_ticket_id"
+                            :disabled="form.processing"
+                            required
+                        />
+                    </fieldset>
+                    <p
+                        v-if="selectedType && selectedTicket"
+                        aria-live="polite"
+                        class="text-muted-foreground flex flex-wrap items-center gap-2 text-sm"
+                    >
+                        <span class="font-mono text-xs">{{
+                            ticket.ticket_key
+                        }}</span
+                        ><span>{{ selectedType.label }}</span
+                        ><ArrowRight class="size-4" aria-hidden="true" /><span
+                            class="font-mono text-xs"
+                            >{{ selectedTicket.ticket_key }}</span
+                        >
+                    </p>
+                    <p class="text-muted-foreground text-xs">
+                        {{ t('ticketRelationships.directionHelp') }}
+                    </p>
+                    <Button
+                        type="submit"
+                        :disabled="form.processing || !selectedTicket"
+                        class="sm:justify-self-start"
+                        >{{
+                            form.processing
+                                ? t('forms.saving')
+                                : t('ticketDetail.saveLink')
+                        }}</Button
+                    >
+                </form>
+                <p
+                    v-else-if="canEditTicket"
+                    class="text-muted-foreground text-sm"
+                >
+                    {{
+                        t(
+                            ticketLinkTypes.length === 0
+                                ? 'ticketRelationships.noTypes'
+                                : 'ticketRelationships.noTargets',
+                        )
+                    }}
+                </p>
+            </CardContent>
+        </Card>
+    </section>
+</template>
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+import { ExternalLink, GitBranch } from 'lucide-vue-next';
+import { computed } from 'vue';
+import FeedbackState from '@/components/FeedbackState.vue';
+import TicketBranchCreateDialog from '@/components/tickets/detail/TicketBranchCreateDialog.vue';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+import { useLocalization } from '@/composables/useLocalization';
+import { edit as editGitConnections } from '@/routes/git-connections';
+import type { RepositoryConnectionModel } from '@/types/models/repository-connection-model';
+import type { TicketGitBranchesProps } from '@/types/ticket-detail';
+
+const props = defineProps<TicketGitBranchesProps>();
+const { t } = useLocalization();
+
+const visibleRepositories = computed(() =>
+    props.repositoryBranches.filter(
+        (repositoryBranch) =>
+            repositoryBranch.branches.length > 0 ||
+            repositoryBranch.error !== null ||
+            !repositoryBranch.repository_connection.has_personal_access,
+    ),
+);
+const repositoryConnections = computed<RepositoryConnectionModel[]>(() =>
+    props.repositoryBranches.map(
+        (repositoryBranch) => repositoryBranch.repository_connection,
+    ),
+);
+const canCreateBranch = computed(
+    () => props.canEditTicket && repositoryConnections.value.length > 0,
+);
+</script>
+
+<template>
+    <Card class="min-w-0 gap-0 overflow-hidden">
+        <CardHeader
+            class="flex flex-col gap-4 border-b sm:flex-row sm:items-start sm:justify-between"
+        >
+            <div class="grid min-w-0 gap-1.5">
+                <CardTitle class="flex items-center gap-2">
+                    <GitBranch
+                        class="text-primary size-5 shrink-0"
+                        aria-hidden="true"
+                    />
+                    {{ t('ticketDetail.branches') }}
+                </CardTitle>
+                <CardDescription
+                    >{ t('ticketDetail.branchesDescription') }}</CardDescription
+                >
+            </div>
+
+            <TicketBranchCreateDialog
+                v-if="canCreateBranch"
+                :ticket="ticket"
+                :project="project"
+                :repository-connections="repositoryConnections"
+                :suggested-branch-name="suggestedBranchName"
+            />
+        </CardHeader>
+
+        <CardContent class="grid gap-4 pt-6">
+            <FeedbackState
+                v-if="repositoryBranches.length === 0"
+                state="empty"
+                :title="t('ticketDetail.noLinkedRepositories')"
+                :description="t('ticketDetail.noLinkedRepositoriesDescription')"
+            />
+
+            <FeedbackState
+                v-else-if="visibleRepositories.length === 0"
+                state="empty"
+                :title="t('tickets.noBranches')"
+                :description="t('tickets.noBranchesDescription')"
+            />
+
+            <article
+                v-for="repositoryBranch in visibleRepositories"
+                v-else
+                :key="repositoryBranch.repository_connection.id"
+                class="border-border grid min-w-0 gap-4 rounded-lg border p-4"
+            >
+                <header class="grid min-w-0 gap-2">
+                    <div class="flex min-w-0 flex-wrap items-center gap-2">
+                        <Badge variant="secondary">
+                            {{
+                                repositoryBranch.repository_connection
+                                    .provider_label
+                            }}
+                        </Badge>
+                        <a
+                            :href="
+                                repositoryBranch.repository_connection
+                                    .repository_url
+                            "
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            :aria-label="
+                                t('ticketDetail.openRepositoryExternal', {
+                                    repository:
+                                        repositoryBranch.repository_connection
+                                            .repository_full_name,
+                                    provider:
+                                        repositoryBranch.repository_connection
+                                            .provider_label,
+                                })
+                            "
+                            class="hover:text-primary focus-visible:ring-ring/35 group flex min-w-0 items-center gap-1.5 rounded-sm font-medium outline-none transition-colors focus-visible:ring-2"
+                        >
+                            <span class="wrap-anywhere">{{
+                                repositoryBranch.repository_connection
+                                    .repository_full_name
+                            }}</span>
+                            <ExternalLink
+                                class="size-3.5 shrink-0 opacity-60 transition-opacity group-hover:opacity-100"
+                                aria-hidden="true"
+                            />
+                        </a>
+                    </div>
+                    <p class="text-muted-foreground text-xs">
+                        {{ repositoryBranch.repository_connection.base_url }}
+                    </p>
+                </header>
+
+                <FeedbackState
+                    v-if="
+                        !repositoryBranch.repository_connection
+                            .has_personal_access
+                    "
+                    state="empty"
+                    :title="t('ticketDetail.gitAccessRequired')"
+                    :description="t('ticketDetail.inspectBranches')"
+                >
+                    <Button
+                        as-child
+                        variant="outline"
+                        size="sm"
+                        class="justify-self-start"
+                    >
+                        <Link :href="editGitConnections()">{{
+                            t('ticketDetail.openGitConnections')
+                        }}</Link>
+                    </Button>
+                </FeedbackState>
+
+                <FeedbackState
+                    v-else-if="repositoryBranch.error"
+                    state="error"
+                    :title="t('ticketDetail.branchesUnavailable')"
+                    :description="repositoryBranch.error"
+                />
+
+                <ul v-else class="grid min-w-0 gap-2 sm:grid-cols-2">
+                    <li
+                        v-for="branch in repositoryBranch.branches"
+                        :key="branch.name"
+                        class="bg-muted/30 flex min-w-0 items-center gap-2 rounded-md border px-3 py-2"
+                    >
+                        <GitBranch
+                            class="text-muted-foreground size-3.5 shrink-0"
+                            aria-hidden="true"
+                        />
+                        <span class="wrap-anywhere font-mono text-xs">{{
+                            branch.name
+                        }}</span>
+                    </li>
+                </ul>
+            </article>
+        </CardContent>
+    </Card>
+</template>
@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+import { ExternalLink, GitPullRequest } from 'lucide-vue-next';
+import { computed } from 'vue';
+import FeedbackState from '@/components/FeedbackState.vue';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+import { useLocalization } from '@/composables/useLocalization';
+import { edit as editGitConnections } from '@/routes/git-connections';
+import type { TicketGitPullRequestsProps } from '@/types/ticket-detail';
+
+const props = defineProps<TicketGitPullRequestsProps>();
+const { t } = useLocalization();
+
+const visibleRepositories = computed(() =>
+    props.repositoryPullRequests.filter(
+        (repositoryPullRequest) =>
+            repositoryPullRequest.pull_requests.length > 0 ||
+            repositoryPullRequest.error !== null ||
+            !repositoryPullRequest.repository_connection.has_personal_access,
+    ),
+);
+</script>
+
+<template>
+    <Card class="min-w-0 gap-0 overflow-hidden">
+        <CardHeader class="border-b">
+            <CardTitle class="flex items-center gap-2">
+                <GitPullRequest
+                    class="text-primary size-5 shrink-0"
+                    aria-hidden="true"
+                />
+                {{ t('ticketDetail.pullRequests') }}
+            </CardTitle>
+            <CardDescription
+                >{ t('ticketDetail.pullRequestsDescription') }}</CardDescription
+            >
+        </CardHeader>
+
+        <CardContent class="grid gap-4 pt-6">
+            <FeedbackState
+                v-if="repositoryPullRequests.length === 0"
+                state="empty"
+                :title="t('ticketDetail.noLinkedRepositories')"
+                :description="t('ticketDetail.noLinkedRepositoriesDescription')"
+            />
+
+            <FeedbackState
+                v-else-if="visibleRepositories.length === 0"
+                state="empty"
+                :title="t('tickets.noPullRequests')"
+                :description="t('tickets.noPullRequestsDescription')"
+            />
+
+            <article
+                v-for="repositoryPullRequest in visibleRepositories"
+                v-else
+                :key="repositoryPullRequest.repository_connection.id"
+                class="border-border grid min-w-0 gap-4 rounded-lg border p-4"
+            >
+                <header class="grid min-w-0 gap-2">
+                    <div class="flex min-w-0 flex-wrap items-center gap-2">
+                        <Badge variant="secondary">
+                            {{
+                                repositoryPullRequest.repository_connection
+                                    .provider_label
+                            }}
+                        </Badge>
+                        <a
+                            :href="
+                                repositoryPullRequest.repository_connection
+                                    .repository_url
+                            "
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            :aria-label="
+                                t('ticketDetail.openRepositoryExternal', {
+                                    repository:
+                                        repositoryPullRequest
+                                            .repository_connection
+                                            .repository_full_name,
+                                    provider:
+                                        repositoryPullRequest
+                                            .repository_connection
+                                            .provider_label,
+                                })
+                            "
+                            class="hover:text-primary focus-visible:ring-ring/35 group flex min-w-0 items-center gap-1.5 rounded-sm font-medium outline-none transition-colors focus-visible:ring-2"
+                        >
+                            <span class="wrap-anywhere">{{
+                                repositoryPullRequest.repository_connection
+                                    .repository_full_name
+                            }}</span>
+                            <ExternalLink
+                                class="size-3.5 shrink-0 opacity-60 transition-opacity group-hover:opacity-100"
+                                aria-hidden="true"
+                            />
+                        </a>
+                    </div>
+                    <p class="text-muted-foreground text-xs">
+                        {{
+                            repositoryPullRequest.repository_connection.base_url
+                        }}
+                    </p>
+                </header>
+
+                <FeedbackState
+                    v-if="
+                        !repositoryPullRequest.repository_connection
+                            .has_personal_access
+                    "
+                    state="empty"
+                    :title="t('ticketDetail.gitAccessRequired')"
+                    :description="t('ticketDetail.inspectPullRequests')"
+                >
+                    <Button
+                        as-child
+                        variant="outline"
+                        size="sm"
+                        class="justify-self-start"
+                    >
+                        <Link :href="editGitConnections()">{{
+                            t('ticketDetail.openGitConnections')
+                        }}</Link>
+                    </Button>
+                </FeedbackState>
+
+                <FeedbackState
+                    v-else-if="repositoryPullRequest.error"
+                    state="error"
+                    :title="t('ticketDetail.pullRequestsUnavailable')"
+                    :description="repositoryPullRequest.error"
+                />
+
+                <ul v-else class="grid min-w-0 gap-3">
+                    <li
+                        v-for="pullRequest in repositoryPullRequest.pull_requests"
+                        :key="pullRequest.html_url"
+                        class="border-border/70 bg-muted/20 grid min-w-0 gap-2 rounded-md border px-4 py-3"
+                    >
+                        <div class="flex min-w-0 flex-wrap items-center gap-2">
+                            <Badge variant="outline">
+                                #{{ pullRequest.number }}
+                            </Badge>
+                            <Badge variant="secondary">
+                                {{ pullRequest.status }}
+                            </Badge>
+                            <a
+                                :href="pullRequest.html_url"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                :aria-label="
+                                    t('ticketDetail.openPullRequestExternal', {
+                                        number: pullRequest.number,
+                                        provider:
+                                            repositoryPullRequest
+                                                .repository_connection
+                                                .provider_label,
+                                    })
+                                "
+                                class="hover:text-primary focus-visible:ring-ring/35 group flex min-w-0 items-center gap-1.5 rounded-sm font-medium outline-none transition-colors focus-visible:ring-2"
+                            >
+                                <span class="wrap-anywhere">{{
+                                    pullRequest.title
+                                }}</span>
+                                <ExternalLink
+                                    class="size-3.5 shrink-0 opacity-60 transition-opacity group-hover:opacity-100"
+                                    aria-hidden="true"
+                                />
+                            </a>
+                        </div>
+                        <p class="text-muted-foreground text-xs">
+                            {{
+                                t('ticketDetail.sourceBranch', {
+                                    name: pullRequest.source_branch,
+                                })
+                            }}
+                        </p>
+                    </li>
+                </ul>
+            </article>
+        </CardContent>
+    </Card>
+</template>
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { Link, useForm } from '@inertiajs/vue3';
+import { ArrowDownLeft, ArrowUpRight, Unlink } from 'lucide-vue-next';
+import { computed } from 'vue';
+import { destroy } from '@/actions/App/Http/Controllers/ProjectTicketLinkController';
+import FormFeedback from '@/components/FormFeedback.vue';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { useFormProtection } from '@/composables/useFormProtection';
+import { useLocalization } from '@/composables/useLocalization';
+import { show } from '@/routes/projects/tickets';
+import type { TicketLinkModel } from '@/types/models/ticket-link-model';
+
+const props = defineProps<{
+    link: TicketLinkModel;
+    projectId: number;
+    ticketId: number;
+    ticketKey: string;
+    canEdit: boolean;
+}>();
+const emit = defineEmits<{ removed: [] }>();
+const { t } = useLocalization();
+const outgoing = computed(() => props.link.source_ticket_id === props.ticketId);
+const form = useForm({});
+const protection = useFormProtection(form);
+function remove(): void {
+    if (!props.canEdit) {
+        return;
+    }
+    protection.submit(
+        destroy({
+            project: props.projectId,
+            ticket: props.ticketId,
+            ticketLink: props.link.id,
+        }),
+        {
+            preserveScroll: true,
+            onSuccess: () => emit('removed'),
+        },
+    );
+}
+</script>
+
+<template>
+    <li
+        class="grid min-w-0 gap-3 rounded-xl border p-4"
+        :data-ticket-link="link.id"
+    >
+        <div class="flex min-w-0 flex-wrap items-center gap-2">
+            <Badge
+                variant="outline"
+                class="text-muted-foreground max-w-full whitespace-normal"
+            >
+                <ArrowUpRight
+                    v-if="outgoing"
+                    class="size-3.5 shrink-0"
+                    aria-hidden="true"
+                /><ArrowDownLeft
+                    v-else
+                    class="size-3.5 shrink-0"
+                    aria-hidden="true"
+                />
+                {{
+                    t(
+                        outgoing
+                            ? 'ticketRelationships.outgoing'
+                            : 'ticketRelationships.incoming',
+                    )
+                }}
+            </Badge>
+            <span class="text-muted-foreground font-mono text-xs">{{
+                ticketKey
+            }}</span>
+            <span class="text-sm font-medium">{{
+                link.ticket_link_type.label
+            }}</span>
+        </div>
+        <div class="flex min-w-0 flex-wrap items-start justify-between gap-3">
+            <Link
+                :href="
+                    show({ project: projectId, ticket: link.linked_ticket.id })
+                "
+                class="hover:text-primary focus-visible:ring-ring/35 grid min-w-0 flex-1 basis-40 gap-1 rounded-md outline-none transition-colors focus-visible:ring-2"
+            >
+                <span class="text-primary font-mono text-xs font-semibold">{{
+                    link.linked_ticket.ticket_key
+                }}</span>
+                <span class="wrap-anywhere text-sm font-medium">{{
+                    link.linked_ticket.title
+                }}</span>
+            </Link>
+            <form v-if="canEdit" @submit.prevent="remove">
+                <Button
+                    type="submit"
+                    variant="ghost"
+                    size="sm"
+                    class="text-muted-foreground hover:text-destructive"
+                    :aria-label="
+                        t('ticketRelationships.removeLink', {
+                            key: link.linked_ticket.ticket_key,
+                        })
+                    "
+                    :disabled="form.processing"
+                    ><Unlink class="size-4" aria-hidden="true" />{{
+                        t('ticketDetail.removeLink')
+                    }}</Button
+                >
+            </form>
+        </div>
+        <FormFeedback
+            v-if="canEdit"
+            :state="protection.state.value"
+            @retry="remove"
+        />
+    </li>
+</template>
@@ -0,0 +1,154 @@
+import { computed, onMounted, onUnmounted, ref, shallowRef } from 'vue';
+import type { TicketModel } from '@/types/models/ticket-model';
+
+/** Pointer capture keeps mouse, pen and touch drags on the same code path. */
+export function useBoardDrag(options: {
+    canStart: (ticket: TicketModel) => boolean;
+    drop: (ticket: TicketModel, columnId: number) => void;
+}) {
+    const ticket = shallowRef<TicketModel | null>(null);
+    const active = ref(false);
+    const x = ref(0);
+    const y = ref(0);
+    const columnId = ref<number | null>(null);
+    let pointerId: number | null = null;
+    let handle: HTMLElement | null = null;
+    let startX = 0;
+    let startY = 0;
+    let frame = 0;
+
+    const draggedTicket = computed(() => (active.value ? ticket.value : null));
+
+    function locateTarget(): void {
+        const target = document
+            .elementFromPoint(x.value, y.value)
+            ?.closest<HTMLElement>('[data-board-drop-column]');
+        columnId.value = target ? Number(target.dataset.boardDropColumn) : null;
+    }
+
+    function scroll(): void {
+        if (!active.value) {
+            return;
+        }
+        const element = document.elementFromPoint(x.value, y.value);
+        const region = element?.closest<HTMLElement>(
+            '[data-board-drag-scroll]',
+        );
+        if (region) {
+            const bounds = region.getBoundingClientRect();
+            const left = Math.max(0, bounds.left);
+            const right = Math.min(window.innerWidth, bounds.right);
+            const delta =
+                x.value < left + 44 ? -10 : x.value > right - 44 ? 10 : 0;
+            region.scrollLeft += delta;
+        }
+        if (!element?.closest('[data-board-mobile-targets]')) {
+            const delta =
+                y.value < 64 ? -10 : y.value > window.innerHeight - 64 ? 10 : 0;
+            window.scrollBy(0, delta);
+        }
+        locateTarget();
+        frame = requestAnimationFrame(scroll);
+    }
+
+    function cancel(): void {
+        const previousPointer = pointerId;
+        pointerId = null;
+        active.value = false;
+        ticket.value = null;
+        columnId.value = null;
+        cancelAnimationFrame(frame);
+        if (
+            previousPointer !== null &&
+            handle?.hasPointerCapture(previousPointer)
+        ) {
+            handle.releasePointerCapture(previousPointer);
+        }
+        handle = null;
+    }
+
+    function start(event: PointerEvent, source: TicketModel): void {
+        if (
+            pointerId !== null ||
+            !event.isPrimary ||
+            event.button !== 0 ||
+            !options.canStart(source)
+        ) {
+            return;
+        }
+        handle = event.currentTarget as HTMLElement;
+        handle.focus({ preventScroll: true });
+        handle.setPointerCapture(event.pointerId);
+        pointerId = event.pointerId;
+        ticket.value = source;
+        startX = x.value = event.clientX;
+        startY = y.value = event.clientY;
+    }
+
+    function move(event: PointerEvent): void {
+        if (event.pointerId !== pointerId) {
+            return;
+        }
+        x.value = event.clientX;
+        y.value = event.clientY;
+        if (
+            !active.value &&
+            Math.hypot(x.value - startX, y.value - startY) >= 6
+        ) {
+            active.value = true;
+            frame = requestAnimationFrame(scroll);
+        }
+        if (active.value) {
+            event.preventDefault();
+            locateTarget();
+        }
+    }
+
+    function finish(event: PointerEvent): void {
+        if (event.pointerId !== pointerId) {
+            return;
+        }
+        x.value = event.clientX;
+        y.value = event.clientY;
+        locateTarget();
+        const source = draggedTicket.value;
+        const target = columnId.value;
+        cancel();
+        if (source && target !== null) {
+            options.drop(source, target);
+        }
+    }
+
+    function cancelPointer(event: PointerEvent): void {
+        if (event.pointerId === pointerId) {
+            cancel();
+        }
+    }
+
+    function keydown(event: KeyboardEvent): void {
+        if (event.key === 'Escape' && pointerId !== null) {
+            event.preventDefault();
+            cancel();
+        }
+    }
+
+    onMounted(() => {
+        document.addEventListener('pointermove', move, { passive: false });
+        document.addEventListener('pointerup', finish);
+        document.addEventListener('pointercancel', cancelPointer);
+        document.addEventListener('lostpointercapture', cancelPointer);
+        document.addEventListener('keydown', keydown);
+        window.addEventListener('blur', cancel);
+    });
+    onUnmounted(() => {
+        cancel();
+        document.removeEventListener('pointermove', move);
+        document.removeEventListener('pointerup', finish);
+        document.removeEventListener('pointercancel', cancelPointer);
+        document.removeEventListener('lostpointercapture', cancelPointer);
+        document.removeEventListener('keydown', keydown);
+        window.removeEventListener('blur', cancel);
+    });
+
+    return { draggedTicket, columnId, x, y, start, cancel };
+}
@@ -1,120 +1,107 @@
-import type { ComputedRef, Ref } from 'vue';
-import { computed, ref } from 'vue';
+import { computed, onScopeDispose, ref } from 'vue';
+import { useLocalization } from '@/composables/useLocalization';
 import { qrCode, recoveryCodes, secretKey } from '@/routes/two-factor';

-export type UseTwoFactorAuthReturn = {
-    qrCodeSvg: Ref<string | null>;
-    manualSetupKey: Ref<string | null>;
-    recoveryCodesList: Ref<string[]>;
-    errors: Ref<string[]>;
-    hasSetupData: ComputedRef<boolean>;
-    clearSetupData: () => void;
-    clearErrors: () => void;
-    clearTwoFactorAuthData: () => void;
-    fetchQrCode: () => Promise<void>;
-    fetchSetupKey: () => Promise<void>;
-    fetchSetupData: () => Promise<void>;
-    fetchRecoveryCodes: () => Promise<void>;
-};
+/** Keep secrets within the consuming component and discard late responses after hiding them. */
+export function useTwoFactorAuth() {
+    const { t } = useLocalization();
+    const errors = ref<string[]>([]);
+    const manualSetupKey = ref<string | null>(null);
+    const qrCodeSvg = ref<string | null>(null);
+    const recoveryCodesList = ref<string[]>([]);
+    const loading = ref(false);
+    let pending: AbortController | null = null;

-const fetchJson = async <T>(url: string): Promise<T> => {
-    const response = await fetch(url, {
-        headers: { Accept: 'application/json' },
-    });
-
-    if (!response.ok) {
-        throw new Error(`Failed to fetch: ${response.status}`);
+    async function fetchJson<T>(url: string, signal: AbortSignal): Promise<T> {
+        const response = await fetch(url, {
+            headers: { Accept: 'application/json' },
+            credentials: 'same-origin',
+            signal,
+        });
+        if (!response.ok || response.redirected) {
+            throw new Error(String(response.status));
+        }
+        return response.json();
    }

-    return response.json();
-};
+    function clearErrors(): void {
+        errors.value = [];
+    }

-const errors = ref<string[]>([]);
-const manualSetupKey = ref<string | null>(null);
-const qrCodeSvg = ref<string | null>(null);
-const recoveryCodesList = ref<string[]>([]);
-
-const hasSetupData = computed<boolean>(
-    () => qrCodeSvg.value !== null && manualSetupKey.value !== null,
-);
-
-export const useTwoFactorAuth = (): UseTwoFactorAuthReturn => {
-    const fetchQrCode = async (): Promise<void> => {
-        try {
-            const { svg } = await fetchJson<{ svg: string; url: string }>(
-                qrCode.url(),
-            );
-
-            qrCodeSvg.value = svg;
-        } catch {
-            errors.value.push('Failed to fetch QR code');
-            qrCodeSvg.value = null;
-        }
-    };
-
-    const fetchSetupKey = async (): Promise<void> => {
-        try {
-            const { secretKey: key } = await fetchJson<{ secretKey: string }>(
-                secretKey.url(),
-            );
-
-            manualSetupKey.value = key;
-        } catch {
-            errors.value.push('Failed to fetch a setup key');
-            manualSetupKey.value = null;
-        }
-    };
-
-    const clearSetupData = (): void => {
+    function clearTwoFactorAuthData(): void {
+        pending?.abort();
+        pending = null;
+        loading.value = false;
        manualSetupKey.value = null;
        qrCodeSvg.value = null;
-        clearErrors();
-    };
-
-    const clearErrors = (): void => {
-        errors.value = [];
-    };
-
-    const clearTwoFactorAuthData = (): void => {
-        clearSetupData();
-        clearErrors();
        recoveryCodesList.value = [];
-    };
+        clearErrors();
+    }

-    const fetchRecoveryCodes = async (): Promise<void> => {
+    async function load(kind: 'setup' | 'recovery'): Promise<void> {
+        clearTwoFactorAuthData();
+        const request = new AbortController();
+        pending = request;
+        loading.value = true;
        try {
-            clearErrors();
-            recoveryCodesList.value = await fetchJson<string[]>(
-                recoveryCodes.url(),
-            );
-        } catch {
-            errors.value.push('Failed to fetch recovery codes');
-            recoveryCodesList.value = [];
+            if (kind === 'setup') {
+                const [qr, key] = await Promise.all([
+                    fetchJson<{ svg: string }>(qrCode.url(), request.signal),
+                    fetchJson<{ secretKey: string }>(
+                        secretKey.url(),
+                        request.signal,
+                    ),
+                ]);
+                if (pending !== request) {
+                    return;
+                }
+                qrCodeSvg.value = qr.svg;
+                manualSetupKey.value = key.secretKey;
+            } else {
+                const codes = await fetchJson<string[]>(
+                    recoveryCodes.url(),
+                    request.signal,
+                );
+                if (pending === request) {
+                    recoveryCodesList.value = codes;
+                }
+            }
+        } catch (error) {
+            if (pending === request && !request.signal.aborted) {
+                const status = error instanceof Error ? error.message : '';
+                errors.value = [
+                    t(
+                        status === '423' || status === '401' || status === '419'
+                            ? 'security.confirmAgain'
+                            : kind === 'setup'
+                              ? 'security.setupError'
+                              : 'security.recoveryError',
+                    ),
+                ];
+            }
+        } finally {
+            if (pending === request) {
+                pending = null;
+                loading.value = false;
+            }
        }
-    };
-
-    const fetchSetupData = async (): Promise<void> => {
-        try {
-            clearErrors();
-            await Promise.all([fetchQrCode(), fetchSetupKey()]);
-        } catch {
-            qrCodeSvg.value = null;
-            manualSetupKey.value = null;
-        }
-    };
+    }

+    onScopeDispose(clearTwoFactorAuthData);
    return {
        qrCodeSvg,
        manualSetupKey,
        recoveryCodesList,
        errors,
-        hasSetupData,
-        clearSetupData,
-        clearErrors,
+        loading,
+        hasSetupData: computed(() =>
+            Boolean(qrCodeSvg.value && manualSetupKey.value),
+        ),
+        clearSetupData: clearTwoFactorAuthData,
+        clearRecoveryCodes: clearTwoFactorAuthData,
        clearTwoFactorAuthData,
-        fetchQrCode,
-        fetchSetupKey,
-        fetchSetupData,
-        fetchRecoveryCodes,
+        clearErrors,
+        fetchSetupData: () => load('setup'),
+        fetchRecoveryCodes: () => load('recovery'),
    };
-};
+}
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+import { Settings2 } from 'lucide-vue-next';
+import { useAppNavigation } from '@/composables/useAppNavigation';
+import { useCurrentUrl } from '@/composables/useCurrentUrl';
+import { useLocalization } from '@/composables/useLocalization';
+import { toUrl } from '@/lib/utils';
+
+defineProps<{ projectName: string; projectKey: string }>();
+const { projectSettingsItems } = useAppNavigation();
+const { isCurrentUrl } = useCurrentUrl();
+const { t } = useLocalization();
+</script>
+
+<template>
+    <div
+        class="gap-page md:p-page mx-auto flex w-full min-w-0 max-w-7xl flex-1 flex-col p-4"
+    >
+        <header class="gap-stack grid min-w-0">
+            <div class="text-primary flex items-center gap-2">
+                <Settings2 class="size-4" aria-hidden="true" />
+                <p class="text-label text-muted-foreground break-all uppercase">
+                    {{ projectKey }}
+                </p>
+            </div>
+            <h1 class="text-headline-mobile md:text-headline break-words">
+                {{ t('navigation.projectSettings') }}
+            </h1>
+            <p class="text-muted-foreground break-words">
+                {{ t('projectSettings.description', { project: projectName }) }}
+            </p>
+        </header>
+        <div
+            class="bg-card grid min-w-0 grid-cols-1 overflow-hidden rounded-xl border shadow-sm lg:grid-cols-[15rem_minmax(0,1fr)]"
+        >
+            <aside
+                class="bg-muted/35 min-w-0 border-b p-3 lg:border-b-0 lg:border-r lg:p-4"
+            >
+                <nav
+                    class="flex gap-2 overflow-x-auto pb-1 lg:flex-col lg:overflow-visible lg:pb-0"
+                    :aria-label="t('navigation.projectSettings')"
+                >
+                    <Link
+                        v-for="item in projectSettingsItems"
+                        :key="toUrl(item.href)"
+                        :href="item.href"
+                        :aria-current="
+                            isCurrentUrl(item.href) ? 'page' : undefined
+                        "
+                        :class="[
+                            'text-body focus-visible:ring-ring/40 flex min-h-11 shrink-0 items-center gap-2 rounded-lg border px-3 font-medium outline-none transition-colors focus-visible:ring-2 lg:w-full',
+                            isCurrentUrl(item.href)
+                                ? 'border-primary/25 bg-accent text-accent-foreground shadow-xs'
+                                : 'text-muted-foreground hover:border-border hover:bg-background hover:text-foreground border-transparent',
+                        ]"
+                    >
+                        <component
+                            :is="item.icon"
+                            class="size-4 shrink-0"
+                            aria-hidden="true"
+                        />
+                        <span class="whitespace-nowrap">{{ item.title }}</span>
+                    </Link>
+                </nav>
+            </aside>
+            <div class="min-w-0 p-4 sm:p-6 lg:p-8">
+                <section class="gap-page mx-auto grid w-full min-w-0 max-w-3xl">
+                    <slot />
+                </section>
+            </div>
+        </div>
+    </div>
+</template>
@@ -1,9 +1,14 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
+import {
+    GitBranch,
+    KeyRound,
+    Palette,
+    Settings2,
+    ShieldCheck,
+    UserRound,
+} from 'lucide-vue-next';
 import { computed } from 'vue';
-import Heading from '@/components/Heading.vue';
-import { Button } from '@/components/ui/button';
-import { Separator } from '@/components/ui/separator';
 import { useCurrentUrl } from '@/composables/useCurrentUrl';
 import { useLocalization } from '@/composables/useLocalization';
 import { toUrl } from '@/lib/utils';
@@ -19,22 +24,27 @@ const sidebarNavItems = computed<NavItem[]>(() => [
    {
        title: t('navigation.profile'),
        href: editProfile(),
+        icon: UserRound,
    },
    {
        title: t('navigation.security'),
        href: editSecurity(),
+        icon: ShieldCheck,
    },
    {
        title: t('navigation.gitConnections'),
        href: editGitConnections(),
+        icon: GitBranch,
    },
    {
        title: t('navigation.applications'),
        href: editApplications(),
+        icon: KeyRound,
    },
    {
        title: t('navigation.appearance'),
        href: editAppearance(),
+        icon: Palette,
    },
 ]);

@@ -42,47 +52,60 @@ const { isCurrentOrParentUrl } = useCurrentUrl();
 </script>

 <template>
-    <div class="px-4 py-6">
-        <Heading
-            :title="t('navigation.settings')"
-            :description="t('navigation.settingsDescription')"
-        />
+    <div
+        class="gap-page md:p-page mx-auto flex w-full min-w-0 max-w-6xl flex-1 flex-col p-4"
+    >
+        <header class="gap-stack grid min-w-0">
+            <div class="text-primary flex items-center gap-2">
+                <Settings2 class="size-4" aria-hidden="true" />
+                <p class="text-label text-muted-foreground uppercase">
+                    {{ t('settings.eyebrow') }}
+                </p>
+            </div>
+            <h1 class="text-headline-mobile md:text-headline break-words">
+                {{ t('navigation.settings') }}
+            </h1>
+            <p class="text-muted-foreground max-w-2xl">
+                {{ t('navigation.settingsDescription') }}
+            </p>
+        </header>

-        <div class="flex min-w-0 flex-col gap-6 lg:flex-row lg:gap-12">
-            <aside class="w-full min-w-0 lg:w-52 lg:shrink-0">
+        <div
+            class="bg-card grid min-w-0 grid-cols-1 overflow-hidden rounded-xl border shadow-sm lg:grid-cols-[15rem_minmax(0,1fr)]"
+        >
+            <aside
+                class="bg-muted/35 border-b p-3 lg:border-b-0 lg:border-r lg:p-4"
+            >
                <nav
-                    class="flex gap-1 overflow-x-auto lg:flex-col"
+                    class="flex gap-2 overflow-x-auto pb-1 lg:flex-col lg:overflow-visible lg:pb-0"
                    :aria-label="t('navigation.settings')"
                >
-                    <Button
+                    <Link
                        v-for="item in sidebarNavItems"
                        :key="toUrl(item.href)"
-                        variant="ghost"
+                        :href="item.href"
+                        :aria-current="
+                            isCurrentOrParentUrl(item.href) ? 'page' : undefined
+                        "
                        :class="[
-                            'shrink-0 justify-start lg:w-full',
-                            { 'bg-muted': isCurrentOrParentUrl(item.href) },
+                            'text-body focus-visible:ring-ring/40 flex min-h-11 shrink-0 items-center gap-2 rounded-lg border px-3 font-medium outline-none transition-colors focus-visible:ring-2 lg:w-full',
+                            isCurrentOrParentUrl(item.href)
+                                ? 'border-primary/25 bg-accent text-accent-foreground shadow-xs'
+                                : 'text-muted-foreground hover:border-border hover:bg-background hover:text-foreground border-transparent',
                        ]"
-                        as-child
                    >
-                        <Link
-                            :href="item.href"
-                            :aria-current="
-                                isCurrentOrParentUrl(item.href)
-                                    ? 'page'
-                                    : undefined
-                            "
-                        >
-                            <component :is="item.icon" class="h-4 w-4" />
-                            {{ item.title }}
-                        </Link>
-                    </Button>
+                        <component
+                            :is="item.icon"
+                            class="size-4 shrink-0"
+                            aria-hidden="true"
+                        />
+                        <span class="whitespace-nowrap">{{ item.title }}</span>
+                    </Link>
                </nav>
            </aside>

-            <Separator class="lg:hidden" />
-
-            <div class="min-w-0 flex-1 md:max-w-2xl">
-                <section class="max-w-xl space-y-12">
+            <div class="min-w-0 p-4 sm:p-6 lg:p-8">
+                <section class="mx-auto grid w-full min-w-0 max-w-3xl gap-8">
                    <slot />
                </section>
            </div>
@@ -5,6 +5,76 @@ import type {

 const MAX_INDENT_LEVEL = 8;

+export const canIndentAcceptanceCriterion = (
+    items: AcceptanceCriteriaModel,
+    index: number,
+): boolean => {
+    const item = items[index];
+    const previous = items[index - 1];
+    if (!item || !previous || item.indent > previous.indent) {
+        return false;
+    }
+    return items
+        .slice(index, acceptanceCriteriaSubtreeEnd(items, index))
+        .every((descendant) => descendant.indent < MAX_INDENT_LEVEL);
+};
+
+const acceptanceCriteriaSubtreeEnd = (
+    items: AcceptanceCriteriaModel,
+    index: number,
+): number => {
+    let end = index + 1;
+    while (end < items.length && items[end].indent > items[index].indent) {
+        end++;
+    }
+    return end;
+};
+
+export const indentAcceptanceCriterion = (
+    items: AcceptanceCriteriaModel,
+    index: number,
+    direction: 1 | -1,
+): AcceptanceCriteriaModel => {
+    if (
+        !items[index] ||
+        (direction === 1
+            ? !canIndentAcceptanceCriterion(items, index)
+            : items[index].indent === 0)
+    ) {
+        return items;
+    }
+    const end = acceptanceCriteriaSubtreeEnd(items, index);
+    return items.map((item, position) =>
+        position >= index && position < end
+            ? { ...item, indent: item.indent + direction }
+            : item,
+    );
+};
+
+/** Remove only the selected criterion, promoting its children without losing them. */
+export const removeAcceptanceCriterion = (
+    items: AcceptanceCriteriaModel,
+    index: number,
+): AcceptanceCriteriaModel => {
+    if (!items[index]) {
+        return items;
+    }
+    const end = acceptanceCriteriaSubtreeEnd(items, index);
+    return items.flatMap((item, position) =>
+        position === index
+            ? []
+            : [
+                  {
+                      ...item,
+                      indent:
+                          position > index && position < end
+                              ? item.indent - 1
+                              : item.indent,
+                  },
+              ],
+    );
+};
+
 export type AcceptanceCriteriaEditorState = {
    checklist: string;
 };
@@ -0,0 +1,114 @@
+import type {
+    BacklogFilterState,
+    BacklogTicketTreeNode,
+} from '@/types/backlog';
+import type { TicketModel } from '@/types/models/ticket-model';
+
+export function buildBacklogTicketTree(
+    tickets: TicketModel[],
+): BacklogTicketTreeNode[] {
+    const nodesByTicketId = new Map<number, BacklogTicketTreeNode>();
+
+    for (const ticket of tickets) {
+        nodesByTicketId.set(ticket.id, {
+            children: [],
+            matchesFilters: true,
+            ticket,
+        });
+    }
+
+    const roots: BacklogTicketTreeNode[] = [];
+
+    for (const ticket of tickets) {
+        const node = nodesByTicketId.get(ticket.id);
+
+        if (!node) {
+            continue;
+        }
+
+        const parentNode =
+            ticket.parent_ticket_id === null
+                ? undefined
+                : nodesByTicketId.get(ticket.parent_ticket_id);
+
+        if (parentNode) {
+            parentNode.children.push(node);
+        } else {
+            roots.push(node);
+        }
+    }
+
+    return roots;
+}
+
+export function filterBacklogTicketTree(
+    nodes: BacklogTicketTreeNode[],
+    filters: BacklogFilterState,
+): BacklogTicketTreeNode[] {
+    return nodes.flatMap((node) => {
+        const children = filterBacklogTicketTree(node.children, filters);
+        const matchesFilters = ticketMatchesFilters(node.ticket, filters);
+
+        if (!matchesFilters && children.length === 0) {
+            return [];
+        }
+
+        return [
+            {
+                ...node,
+                children,
+                matchesFilters,
+            },
+        ];
+    });
+}
+
+export function countBacklogTreeTickets(
+    nodes: BacklogTicketTreeNode[],
+): number {
+    return nodes.reduce(
+        (count, node) => count + 1 + countBacklogTreeTickets(node.children),
+        0,
+    );
+}
+
+export function expandableBacklogTicketIds(
+    nodes: BacklogTicketTreeNode[],
+): number[] {
+    return nodes.flatMap((node) => [
+        ...(node.children.length > 0 ? [node.ticket.id] : []),
+        ...expandableBacklogTicketIds(node.children),
+    ]);
+}
+
+function ticketMatchesFilters(
+    ticket: TicketModel,
+    filters: BacklogFilterState,
+): boolean {
+    const query = filters.query.trim().toLocaleLowerCase();
+    const searchableText = [
+        ticket.ticket_key,
+        ticket.title,
+        ticket.description,
+        ticket.ticket_type.name,
+        ticket.ticket_priority.name,
+        ticket.ticket_status?.name,
+        ticket.assignee?.name,
+    ]
+        .filter((value): value is string => Boolean(value))
+        .join(' ')
+        .toLocaleLowerCase();
+
+    return (
+        (query === '' || searchableText.includes(query)) &&
+        (filters.typeId === '' || ticket.ticket_type_id === filters.typeId) &&
+        (filters.priorityId === '' ||
+            ticket.ticket_priority_id === filters.priorityId) &&
+        (filters.statusId === '' ||
+            ticket.ticket_status_id === filters.statusId) &&
+        (filters.assigneeId === '' ||
+            (filters.assigneeId === 'unassigned'
+                ? ticket.assignee_user_id === null
+                : ticket.assignee_user_id === filters.assigneeId))
+    );
+}
@@ -1,4 +1,244 @@
 export const en = {
+    'workflow.title': 'Board workflow',
+    'workflow.pageTitle': '{project} · Board workflow',
+    'workflow.description':
+        'Organize your board into columns and give each stage the statuses your team needs.',
+    'workflow.updated': 'Workflow updated.',
+    'workflow.backlog': 'Backlog',
+    'workflow.offBoard': 'Off the board',
+    'workflow.backlogDescription':
+        'Your intake queue. Tickets with these statuses stay outside the board columns.',
+    'workflow.columns': 'Board columns',
+    'workflow.columnsDescription':
+        'Columns appear from left to right in this order. Edit a column to change its name or position.',
+    'workflow.emptyColumns': 'No board columns yet',
+    'workflow.emptyColumnsDescription':
+        'Add your first column to start organizing tickets on the board.',
+    'workflow.addColumn': 'Add column',
+    'workflow.editColumn': 'Edit column',
+    'workflow.deleteColumn': 'Delete column?',
+    'workflow.addColumnDescription':
+        'The column is added at the end of the board with a first status of the same name.',
+    'workflow.editColumnDescription':
+        'Rename this column or move it to a different position. Its statuses keep their names.',
+    'workflow.deleteColumnDescription':
+        'Delete “{name}”? Its statuses move to the backlog and their tickets keep their status. Remaining columns are reordered automatically.',
+    'workflow.addStatus': 'Add status',
+    'workflow.editStatus': 'Rename status',
+    'workflow.deleteStatus': 'Delete status?',
+    'workflow.statusContext': 'This status belongs to {context}.',
+    'workflow.deleteStatusDescription':
+        'Delete “{name}”? Tickets using it are assigned to “{replacement}”, the first remaining status in {context}. Its move rules are removed.',
+    'workflow.columnName': 'Column name',
+    'workflow.statusName': 'Status name',
+    'workflow.position': 'Position',
+    'workflow.positionValue': 'Position {position}',
+    'workflow.positionHelp':
+        'Choose a position from 1 to {count}. Other columns shift automatically.',
+    'workflow.statusesIn': 'Statuses in {context}',
+    'workflow.renameStatus': 'Rename status {name}',
+    'workflow.removeStatus': 'Delete status {name}',
+    'workflow.changeColumn': 'Edit column {name}',
+    'workflow.removeColumn': 'Delete column {name}',
+    'workflow.addStatusTo': 'Add status to {context}',
+    'workflow.lastStatus':
+        'Keep at least one status in this group. The last status cannot be deleted.',
+    'workflow.transitions': 'Status moves',
+    'workflow.transitionsDescription':
+        'Choose exactly where each status is allowed to move next.',
+    'workflow.sourceStatus': 'From status',
+    'workflow.directionHelp':
+        'Rules apply in one direction. Select another source to configure the return move.',
+    'workflow.targetsFrom': 'Allowed destinations from {name}',
+    'workflow.targetHelp':
+        'Checked destinations are allowed. Unchecked destinations are forbidden. Save to apply these rules to ticket moves and board drop targets.',
+    'workflow.allowed': 'Allowed',
+    'workflow.notAllowed': 'Not allowed',
+    'workflow.noMovesHelp':
+        'With no destinations selected, tickets cannot leave this status after you save.',
+    'workflow.noStatuses':
+        'Add a status to configure its allowed destinations.',
+    'workflow.unsavedMoves': 'Unsaved changes',
+    'workflow.savedMoves': 'Saved destinations: {count}',
+    'workflow.resetMoves': 'Reset changes',
+    'workflow.saveMoves': 'Save moves',
+    'workflow.noTargets': 'No other statuses exist yet.',
+    'workflow.confirmDelete': 'Delete',
+    'security.title': 'Security settings',
+    'security.passwordTitle': 'Update password',
+    'security.passwordDescription':
+        'Use a long, unique password to keep your account secure.',
+    'security.currentPassword': 'Current password',
+    'security.newPassword': 'New password',
+    'security.confirmPassword': 'Confirm password',
+    'security.savePassword': 'Save password',
+    'security.savingPassword': 'Saving password…',
+    'security.passwordSaved': 'Password saved.',
+    'security.twoFactorTitle': 'Two-factor authentication',
+    'security.twoFactorDescription':
+        'Add a second layer of protection with a code from your authenticator app.',
+    'security.enabledDescription':
+        'Your authenticator app provides a six-digit code when you sign in. Keep your recovery codes somewhere safe.',
+    'security.enabled': 'Enabled',
+    'security.disabled': 'Disabled',
+    'security.pending': 'Awaiting confirmation',
+    'security.enable': 'Enable 2FA',
+    'security.disable': 'Disable 2FA',
+    'security.continueSetup': 'Continue setup',
+    'security.disableTitle': 'Disable two-factor authentication?',
+    'security.disableDescription':
+        'You will no longer need an authenticator code to sign in. Your existing recovery codes will be removed.',
+    'security.setupTitle': 'Set up your authenticator',
+    'security.setupDescription':
+        'Scan this QR code with a TOTP authenticator app, or enter the setup key manually.',
+    'security.setupEnabled': 'Two-factor authentication enabled',
+    'security.setupEnabledDescription':
+        'Finish adding this account to your authenticator app and save your recovery codes.',
+    'security.verifyTitle': 'Verify authentication code',
+    'security.verifyDescription':
+        'Enter the six-digit code from your authenticator app to finish enabling two-factor authentication.',
+    'security.authenticationCode': 'Authentication code',
+    'security.manualKey': 'Manual setup key',
+    'security.copyKey': 'Copy key',
+    'security.copied': 'Copied',
+    'security.copyError':
+        'Copying failed. Select the key and copy it manually.',
+    'security.confirm': 'Confirm',
+    'security.continue': 'Continue',
+    'security.loadingSetup': 'Loading authenticator setup…',
+    'security.setupPendingDescription':
+        'Protection starts after you confirm a code. Closing this dialog keeps setup unfinished; you can continue from this page.',
+    'security.confirmAgain':
+        'Your session or password confirmation has expired. Reload this page and confirm your password to continue.',
+    'security.setupError':
+        'Authenticator setup could not be loaded. Please try again.',
+    'security.recoveryError':
+        'Recovery codes could not be loaded. Please try again.',
+    'security.recoveryTitle': '2FA recovery codes',
+    'security.recoveryDescription':
+        'Recovery codes let you regain access if you lose your authenticator. Store them in a secure password manager.',
+    'security.hideRecovery': 'Hide recovery codes',
+    'security.viewRecovery': 'View recovery codes',
+    'security.loadingRecovery': 'Loading recovery codes…',
+    'security.regenerate': 'Regenerate codes',
+    'security.recoveryOnce':
+        'Each recovery code can be used once. Hiding this section removes the codes from this page.',
+    'security.regenerateTitle': 'Regenerate recovery codes?',
+    'security.regenerateDescription':
+        'All previous recovery codes will stop working. Save the new codes in a secure place.',
+    'applications.title': 'Applications',
+    'applications.description':
+        'Create API keys for tools that use KanbanGit with your account permissions. Delete an application to revoke its access.',
+    'applications.saveKey': 'Save this API key now.',
+    'applications.keyOnce':
+        'This key is shown only after creation. It will not be shown again after you leave this page.',
+    'applications.apiKey': 'API key',
+    'applications.create': 'Create application',
+    'applications.nameDescription':
+        'Name the tool that will receive an API key.',
+    'applications.name': 'Application name',
+    'applications.namePlaceholder': 'For example, Claude Desktop',
+    'applications.creating': 'Creating application…',
+    'applications.saved': 'Saved applications',
+    'applications.hiddenKeys':
+        'Existing keys stay hidden. Create a new application when another key is needed.',
+    'applications.empty': 'No applications have been created yet.',
+    'applications.created': 'Created:',
+    'applications.lastUsed': 'Last used:',
+    'applications.never': 'Never',
+    'applications.delete': 'Delete',
+    'applications.deleteNamed': 'Delete {name}',
+    'applications.deleteTitle': 'Delete application?',
+    'applications.deleteDescription':
+        '{name} will lose access immediately. This cannot be undone.',
+    'common.back': 'Back',
+    'common.done': 'Done',
+
+    'criteria.title': 'Acceptance criteria',
+    'criteria.progress': '{completed} of {total} complete',
+    'criteria.empty': 'No acceptance criteria yet.',
+    'criteria.required': 'Enter a criterion or remove this row.',
+    'criteria.edit': 'Edit checklist',
+    'criteria.preview': 'Preview checklist',
+    'criteria.item': 'Criterion {number}',
+    'criteria.complete': 'Complete criterion {number}: {text}',
+    'criteria.indent': 'Indent criterion {number}',
+    'criteria.outdent': 'Outdent criterion {number}',
+    'criteria.remove': 'Remove criterion {number}',
+    'criteria.add': 'Add criterion',
+    'criteria.hint':
+        'Use the indent buttons or Alt + Left/Right in a text field to nest criteria. Checking a parent also checks its children. Removing a parent keeps its children.',
+    'criteria.unsaved': 'Checklist changes will be saved with the ticket.',
+    'criteria.saving': 'Saving checklist…',
+    'criteria.saveError':
+        'Checklist status could not be saved. Please try again.',
+
+    'board.title': '{name} board',
+    'board.description':
+        'Work in your configured workflow. Tickets without a board column stay in the backlog.',
+    'board.columns': 'Workflow columns',
+    'board.selectColumn': 'Choose a column',
+    'board.columnOption': '{name} ({count})',
+    'board.scrollHint': 'Scroll horizontally to explore all columns.',
+    'board.openBacklog': 'Open backlog',
+    'board.backToProject': 'Project overview',
+    'board.empty.title': 'No workflow columns yet',
+    'board.empty.description':
+        'Set up columns to start tracking work on this board.',
+    'board.emptyColumn': 'No tickets in this column.',
+    'board.emptyStatus': 'No tickets in this status.',
+    'board.noStatuses': 'No statuses configured for this column.',
+    'board.moveTicket': 'Move {key}',
+    'board.updateStatus': 'Update status',
+    'board.updatingStatus': 'Updating…',
+    'board.noMoves': 'No allowed moves',
+    'board.drag': 'Drag to move',
+    'board.dragTicket': 'Drag {key} to change status',
+    'board.dragHint':
+        'Drag a handle to a highlighted column, or use the status controls. Press Escape to cancel.',
+    'board.dropHint': 'Drop on a column. Hold near an edge to scroll.',
+    'board.dragging':
+        'Dragging {key}. Drop on an allowed column or press Escape to cancel.',
+    'board.chooseStatus': 'Choose a destination status',
+    'board.chooseStatusDescription':
+        'More than one status is available for {key} in this column.',
+    'board.targetStatus': 'Destination status',
+    'board.noMovesDescription':
+        'This status does not allow moving anywhere else.',
+    'backlog.title': '{name} backlog',
+    'backlog.description':
+        'Shape incoming work without losing sight of parent and child tickets.',
+    'backlog.openBoard': 'Open board',
+    'backlog.backToProject': 'Project overview',
+    'backlog.moveTicket': 'Move {key}',
+    'backlog.filters.title': 'Find backlog tickets',
+    'backlog.filters.description':
+        'Filter this view locally. Matching child tickets keep their parent context visible.',
+    'backlog.filters.search': 'Search',
+    'backlog.filters.searchPlaceholder': 'Key, title, description, or metadata',
+    'backlog.filters.type': 'Type',
+    'backlog.filters.allTypes': 'All types',
+    'backlog.filters.priority': 'Priority',
+    'backlog.filters.allPriorities': 'All priorities',
+    'backlog.filters.status': 'Status',
+    'backlog.filters.allStatuses': 'All backlog statuses',
+    'backlog.filters.assignee': 'Assignee',
+    'backlog.filters.allAssignees': 'All assignees',
+    'backlog.filters.clear': 'Clear filters',
+    'backlog.filters.parentContext': 'Parent context',
+    'backlog.filters.empty.title': 'No tickets match these filters',
+    'backlog.filters.empty.description':
+        'Try a broader search or clear the filters to see the complete backlog.',
+    'backlog.results.title': 'Backlog tickets',
+    'backlog.results.count': 'Showing {count} of {total} tickets',
+    'backlog.empty.title': 'Your backlog is clear',
+    'backlog.empty.description':
+        'New tickets without a workflow column will appear here.',
+    'backlog.empty.action': 'Create the first ticket',
+    'backlog.tree.expand': 'Expand children of {key}',
+    'backlog.tree.collapse': 'Collapse children of {key}',
+    'backlog.tree.expandAll': 'Expand all',
+    'backlog.tree.collapseAll': 'Collapse all',
    'projectCreation.title': 'Create a project',
    'projectCreation.description':
        'Give your work a home. Start fresh or reuse a setup that already works for your team.',
@@ -118,6 +358,24 @@ export const en = {
        'Inherited areas follow the linked template. Overridden areas use this project’s own configuration.',
    'projects.inheritedArea': '{name} · inherited',
    'projects.overriddenArea': '{name} · overridden',
+    'dashboard.eyebrow': 'Personal workspace',
+    'dashboard.greeting': 'Welcome back, {name}',
+    'dashboard.description':
+        'A current view of tickets assigned to you in projects you can access.',
+    'dashboard.summary': 'Work summary',
+    'dashboard.summary.assignedTickets': 'Assigned tickets',
+    'dashboard.summary.projects': 'Projects with assigned work',
+    'dashboard.summary.blockedTickets': 'Blocked tickets',
+    'dashboard.assignedWork': 'My assigned tickets',
+    'dashboard.assignedWorkDescription':
+        'Your work is grouped by project and ordered with the newest tickets first.',
+    'dashboard.projectTickets': 'Tickets assigned to you in {name}',
+    'dashboard.openProject': 'Open {name}',
+    'dashboard.openProjectAction': 'Open project',
+    'dashboard.empty.title': 'No tickets assigned to you',
+    'dashboard.empty.description':
+        'Tickets assigned to you in projects you can access will appear here.',
+    'dashboard.empty.action': 'Browse projects',
    'auth.home': 'KanbanGit home',
    'auth.accountAccess': 'Account access',
    'auth.backToLogin': 'Return to sign in',
@@ -256,6 +514,7 @@ export const en = {
    'navigation.appearance': 'Appearance',
    'navigation.settingsDescription':
        'Manage your profile, security, and Git integration settings.',
+    'settings.eyebrow': 'Account settings',
    'navigation.createTicket': 'New ticket',
    'navigation.createProject': 'New project',
    'navigation.open': 'Open navigation',
@@ -270,8 +529,58 @@ export const en = {
    'navigation.breadcrumbs': 'Breadcrumbs',
    'appearance.label': 'Color theme',
    'appearance.light': 'Light',
+    'appearance.lightDescription':
+        'Use a bright workspace with dark text and clear borders.',
    'appearance.dark': 'Dark',
+    'appearance.darkDescription':
+        'Reduce glare with a darker workspace and balanced contrast.',
    'appearance.system': 'System',
+    'appearance.systemDescription':
+        'Follow the light or dark preference set on this device.',
+    'appearance.title': 'Appearance',
+    'appearance.description': 'Choose how KanbanGit looks on this device.',
+    'appearance.persistenceHint':
+        'Your choice is saved on this device and restored when you open KanbanGit again.',
+    'profile.title': 'Profile',
+    'profile.description':
+        'Keep your personal details and profile picture up to date.',
+    'profile.information': 'Profile information',
+    'profile.picture': 'Profile picture',
+    'profile.pictureDescription':
+        'Help teammates recognize you throughout the workspace.',
+    'profile.picturePreview': 'Profile picture preview',
+    'profile.choosePicture': 'Choose picture',
+    'profile.changePicture': 'Choose another',
+    'profile.discardPicture': 'Discard selection',
+    'profile.removePicture': 'Remove picture',
+    'profile.removingPicture': 'Removing picture…',
+    'profile.selectedPicture': 'Selected: {name}',
+    'profile.pictureHelp':
+        'Choose a PNG, JPG, or WebP image up to 2 MB. On mobile, you can select from your photo library or camera.',
+    'profile.name': 'Name',
+    'profile.namePlaceholder': 'Full name',
+    'profile.email': 'Email address',
+    'profile.emailPlaceholder': 'Email address',
+    'profile.emailUnverified': 'Your email address is unverified.',
+    'profile.resendVerification': 'Resend the verification email',
+    'profile.verificationSent':
+        'A new verification link has been sent to your email address.',
+    'profile.save': 'Save profile',
+    'profile.saving': 'Saving profile…',
+    'profile.unsaved': 'You have unsaved profile changes.',
+    'profile.delete.title': 'Delete account',
+    'profile.delete.description':
+        'Permanently delete your account and all of its resources.',
+    'profile.delete.warning': 'This action cannot be undone',
+    'profile.delete.warningDescription':
+        'Your account and associated data will be permanently removed.',
+    'profile.delete.action': 'Delete account',
+    'profile.delete.confirmTitle':
+        'Are you sure you want to delete your account?',
+    'profile.delete.confirmDescription':
+        'Enter your password to confirm that you want to permanently delete your account and its data.',
+    'profile.delete.password': 'Password',
+    'profile.delete.confirmAction': 'Permanently delete account',
    'common.cancel': 'Cancel',
    'common.close': 'Close',
    'common.retry': 'Try again',
@@ -306,6 +615,8 @@ export const en = {
    'tickets.noStatus': 'No status',
    'tickets.assignedTo': 'Assigned to {name}',
    'tickets.unassigned': 'Unassigned',
+    'tickets.tree.expand': 'Expand children of {key}',
+    'tickets.tree.collapse': 'Collapse children of {key}',
    'common.save': 'Save',
    'common.loading': 'Loading…',
    'common.error': 'Something went wrong.',
@@ -314,4 +625,339 @@ export const en = {
        one: '{count} ticket',
        other: '{count} tickets',
    },
+    'ticketDetail.description': 'Description',
+    'ticketDetail.noDescription': 'No description has been added yet.',
+    'ticketDetail.checklist': 'Acceptance criteria',
+    'ticketDetail.noChecklist': 'No acceptance criteria have been added yet.',
+    'ticketDetail.saveChecklistFirst':
+        'Save checklist text changes before toggling completion directly.',
+    'ticketDetail.edit': 'Edit ticket',
+    'ticketDetail.editDescription':
+        'Tracked ticket changes create worklog entries automatically.',
+    'ticketDetail.git': 'Git',
+    'ticketDetail.relationships': 'Relationships',
+    'ticketDetail.history': 'Worklog',
+    'ticketDetail.metadata': 'Ticket information',
+    'ticketDetail.sections': 'Ticket sections',
+    'ticketDetail.status': 'Status',
+    'ticketDetail.type': 'Type',
+    'ticketDetail.priority': 'Priority',
+    'ticketDetail.assignee': 'Assignee',
+    'ticketDetail.author': 'Author',
+    'ticketDetail.noAuthor': 'No author',
+    'ticketDetail.storyPoints': 'Estimated story points',
+    'ticketDetail.notSet': 'Not set',
+    'ticketDetail.created': 'Created',
+    'ticketDetail.updated': 'Last updated',
+    'ticketDetail.backToProject': 'Back to project',
+    'ticketDetail.openBacklog': 'Open backlog',
+    'ticketDetail.openBoard': 'Open board',
+    'ticketDetail.readOnly': 'Read only',
+    'ticketDetail.title': 'Title',
+    'ticketDetail.parent': 'Parent ticket',
+    'ticketDetail.noParent': 'No parent ticket',
+    'ticketDetail.checklistEditor': 'Acceptance criteria checklist',
+    'ticketDetail.checklistHelp':
+        'Use [ ] / [x] for checklist items. Indent with two spaces for nested steps. Text changes are saved with the main ticket update.',
+    'ticketDetail.checklistPlaceholder':
+        '[ ] User can sign in\n  [x] Validation is shown for invalid credentials',
+    'ticketDetail.blocked': 'Mark ticket as blocked',
+    'ticketDetail.blocker': 'Blocker',
+    'ticketDetail.blockerDescription':
+        'Record whether progress is blocked and why. Changes are added to the ticket worklog.',
+    'ticketDetail.blockerActive': 'Blocked',
+    'ticketDetail.blockerInactive': 'Not blocked',
+    'ticketDetail.blockerActiveDescription':
+        'A blocker reason is required while this ticket is blocked.',
+    'ticketDetail.blockerInactiveDescription':
+        'This ticket currently has no active blocker.',
+    'ticketDetail.blockerComment': 'Blocker comment',
+    'ticketDetail.blockerCommentHelp':
+        'Explain the concrete dependency or decision preventing progress.',
+    'ticketDetail.blockerPlaceholder':
+        'Describe what currently blocks progress on this ticket.',
+    'ticketDetail.saveBlocker': 'Save blocker',
+    'ticketDetail.unblockTicket': 'Unblock ticket',
+    'ticketDetail.resetBlocker': 'Discard blocker changes',
+    'ticketDetail.savingBlocker': 'Saving blocker…',
+    'ticketDetail.customFields': 'Custom fields',
+    'ticketDetail.customFieldsDescription':
+        'Project-configured fields can be tracked directly on the ticket.',
+    'ticketDetail.noCustomFields':
+        'No custom fields are configured for this project yet.',
+    'ticketDetail.saveChanges': 'Save changes',
+    'ticketDetail.branches': 'Branches',
+    'ticketDetail.branchesDescription':
+        'Matching branches are discovered from linked repositories when the branch name starts with this ticket key.',
+    'ticketDetail.createBranch': 'Create branch',
+    'ticketDetail.createBranchTitle': 'Create branch from ticket',
+    'ticketDetail.createBranchDescription':
+        'Pick a linked repository, confirm the suggested branch name, and create it directly in Gitea.',
+    'ticketDetail.repository': 'Repository',
+    'ticketDetail.branchName': 'Branch name',
+    'ticketDetail.branchAccess':
+        'You can only create branches in repositories that match one of your personal Git connections.',
+    'ticketDetail.gitAccessRequired': 'Personal Git access required',
+    'ticketDetail.personalAccessRequired': 'personal Git access required',
+    'ticketDetail.openGitConnections': 'Open Git connections',
+    'ticketDetail.createNow': 'Create now',
+    'ticketDetail.creatingBranch': 'Creating branch…',
+    'ticketDetail.noLinkedRepositories': 'No linked repositories',
+    'ticketDetail.noLinkedRepositoriesDescription':
+        'A project administrator needs to link a repository before Git activity can appear here.',
+    'ticketDetail.branchesUnavailable': 'Branches unavailable',
+    'ticketDetail.pullRequestsUnavailable': 'Pull requests unavailable',
+    'ticketDetail.openRepositoryExternal':
+        'Open {repository} on {provider} (opens in a new tab)',
+    'ticketDetail.openPullRequestExternal':
+        'Open pull request #{number} on {provider} (opens in a new tab)',
+    'ticketDetail.inspectBranches':
+        'Connect a matching Git account in your user settings to inspect branches for this repository.',
+    'ticketDetail.pullRequests': 'Pull requests',
+    'ticketDetail.pullRequestsDescription':
+        'Matching pull requests are detected from linked repositories by checking whether the source branch starts with this ticket key.',
+    'ticketDetail.inspectPullRequests':
+        'Connect a matching Git account in your user settings to inspect pull requests for this repository.',
+    'ticketDetail.checkingBranch':
+        'Checking whether this branch name is valid and still available...',
+    'ticketDetail.selectRepository':
+        'Select a linked repository to validate the branch name.',
+    'ticketDetail.connectGitFirst':
+        'Connect a matching Git connection in your user settings first.',
+    'ticketDetail.branchRequired': 'Branch name is required.',
+    'ticketDetail.branchValidationFailed':
+        '{app} could not validate this branch name right now.',
+    'ticketDetail.checklistSaveFailed':
+        'Checklist status could not be saved right now.',
+    'ticketDetail.children': 'Child tickets',
+    'ticketDetail.childrenDescription':
+        'Parent tickets expose their full child tree here, including nested parent chains.',
+    'ticketDetail.noChildren':
+        'No child tickets are assigned to this ticket yet.',
+    'ticketDetail.parentDescription':
+        'This ticket belongs to the parent shown here.',
+    'ticketDetail.linkedTickets': 'Linked tickets',
+    'ticketDetail.linkedTicketsDescription':
+        'Track cross-ticket relationships with project-defined link labels.',
+    'ticketDetail.linkType': 'Link type',
+    'ticketDetail.linkedTicket': 'Linked ticket',
+    'ticketDetail.saveLink': 'Save link',
+    'ticketDetail.noLinks':
+        'No ticket links are configured for this ticket yet.',
+    'ticketDetail.removeLink': 'Remove',
+    'ticketRelationships.hierarchy': 'Hierarchy',
+    'ticketRelationships.editParent': 'Change parent',
+    'ticketRelationships.parentHelp':
+        'Change parent to assign this ticket or choose “No parent ticket” to detach it.',
+    'ticketRelationships.childrenHelp':
+        'Open a child ticket to change its parent. Expand a group to see its descendants.',
+    'ticketRelationships.addLink': 'Add or update a link',
+    'ticketRelationships.selectTicket': 'Select a ticket',
+    'ticketRelationships.directionHelp':
+        'The selected relationship points from this ticket to the linked ticket. Saving an existing pair updates its type and direction.',
+    'ticketRelationships.outgoing': 'Outgoing',
+    'ticketRelationships.incoming': 'Incoming',
+    'ticketRelationships.removeLink': 'Remove link to {key}',
+    'ticketRelationships.noTypes':
+        'No link types are configured for this project.',
+    'ticketRelationships.noTargets':
+        'No other tickets are available to link in this project.',
+    'ticketDetail.historyDescription':
+        'Every tracked ticket change is recorded with actor and timestamp.',
+    'ticketDetail.noHistory': 'No worklog entries exist for this ticket yet.',
+    'ticketDetail.system': 'System',
+    'ticketDetail.historyType.created': 'Ticket created',
+    'ticketDetail.historyType.updated': 'Ticket updated',
+    'ticketDetail.historyType.statusChanged': 'Status changed',
+    'ticketDetail.historyType.linkUpdated': 'Link added',
+    'ticketDetail.historyType.linkRemoved': 'Link removed',
+    'ticketDetail.sourceBranch': 'Source branch: {name}',
+    'ticketForm.create': 'Create ticket',
+    'ticketForm.pageTitle': 'Create {project} ticket',
+    'ticketForm.createDescription': 'Add a ticket to {project}.',
+    'ticketForm.backToBoard': 'Back to board',
+    'ticketForm.backToBacklog': 'Back to backlog',
+    'ticketForm.details': 'Ticket details',
+    'ticketForm.keyAssigned': 'The ticket key is assigned after creation.',
+    'ticketForm.titlePlaceholder': 'Implement repository sync',
+    'ticketForm.descriptionPlaceholder':
+        'Describe the expected behavior and relevant context.',
+    'ticketForm.checklistHelp':
+        'Use [ ] / [x] for checklist items. Indent with two spaces for nested steps.',
+    'ticketForm.checklistPreview': 'Checklist preview',
+    'ticketForm.metadataRequired':
+        'Ticket creation needs at least one type, one priority, and one status.',
+    'ticketForm.openSettings': 'Open ticket settings',
+    'ticketForm.creating': 'Creating ticket…',
+    'ticketForm.saving': 'Saving changes…',
+    'ticketForm.reset': 'Discard changes',
+    'ticketForm.unsaved': 'Unsaved changes',
+    'ticketForm.ready': 'Ready for a new ticket',
+    'ticketForm.saved': 'All changes saved',
+    'ticketForm.authorRestricted': 'Only project admins can change the author.',
+    'ticketForm.blocker': 'Blocker',
+    'projectSettings.pageTitle': '{project} general settings',
+    'projectSettings.description':
+        'Manage settings and template inheritance for {project}.',
+    'projectSettings.generalDescription':
+        'Review project identity, setting sources, and administrative actions.',
+    'projectSettings.identity': 'Project identity',
+    'projectSettings.identityDescription':
+        'The name and key belong to this project and are never inherited from a template.',
+    'projectSettings.name': 'Project name',
+    'projectSettings.key': 'Project key',
+    'projectSettings.local': 'Local',
+    'projectSettings.inherited': 'Inherited',
+    'projectSettings.override': 'Local override',
+    'projectSettings.display': 'Ticket display',
+    'projectSettings.showAuthor': 'Show author',
+    'projectSettings.showStoryPoints': 'Show story points',
+    'projectSettings.enabled': 'Enabled',
+    'projectSettings.disabled': 'Disabled',
+    'projectSettings.displayDescription':
+        'Manage these display options in Ticket settings.',
+    'projectSettings.template': 'Template baseline',
+    'projectSettings.templateDescription':
+        'Manage the linked template or reset individual areas using the inheritance panel.',
+    'projectSettings.currentTemplate': 'Current linked template',
+    'projectSettings.noTemplate': 'No linked template',
+    'projectSettings.linked': 'Template inheritance active',
+    'projectSettings.standalone': 'Standalone',
+    'projectSettings.standaloneDescription':
+        'This project manages its settings locally. Published template updates are not applied.',
+    'projectSettings.noAlternatives': 'No other published templates',
+    'projectSettings.noAlternativesDescription':
+        'A different published template is required to switch this project.',
+    'projectSettings.switch': 'Switch template',
+    'projectSettings.switching': 'Switching template…',
+    'projectSettings.switchWarning':
+        'Switching templates can replace or remove project configuration in copied areas, including workflows, ticket metadata, repositories, and notifications.',
+    'projectSettings.publishedTemplate': 'Published template',
+    'projectSettings.selectTemplate': 'Select a template',
+    'projectSettings.confirmation': 'Confirmation key',
+    'projectSettings.confirmPlaceholder': 'Type {key} exactly',
+    'projectSettings.confirmHelp':
+        'Enter the exact project key {key} to confirm this action. The key is case sensitive.',
+    'projectSettings.danger': 'Danger zone',
+    'projectSettings.deleteDescription':
+        'Permanently delete this project and all of its tickets, board columns, ticket metadata, repository connections, and project permissions.',
+    'projectSettings.irreversible': 'This action cannot be undone.',
+    'projectSettings.delete': 'Delete project',
+    'projectSettings.deleting': 'Deleting project…',
+    'projectSettings.updated': 'Project settings updated.',
+    'inheritance.title': 'Template inheritance',
+    'inheritance.description': 'Settings linked to {template}.',
+    'inheritance.help':
+        'Each area inherits independently. Settings outside the template are managed locally.',
+    'inheritance.areas': 'Setting sources',
+    'inheritance.overrideHelp':
+        'Local changes stay in place when the template is updated.',
+    'inheritance.reset': 'Reset to template',
+    'inheritance.resetArea': 'Reset {area} to template',
+    'inheritance.resetting': 'Resetting…',
+    'inheritance.confirmTitle': 'Reset this setting area?',
+    'inheritance.confirmDescription':
+        'Replace local changes in {area} with the current baseline from {template}. Other setting areas keep their current values.',
+    'inheritance.resetWarning':
+        'Local configuration in this area may be replaced or removed.',
+    'inheritance.statusHelp':
+        'Choose where tickets in local statuses should move before those statuses are removed.',
+    'inheritance.statusLabel': '{status} ({count} tickets)',
+    'inheritance.selectStatus': 'Select replacement status',
+    'inheritance.area.projectSettings': 'Project settings',
+    'inheritance.area.boardColumns': 'Board columns',
+    'inheritance.area.ticketStatuses': 'Ticket statuses',
+    'inheritance.area.statusTransitions': 'Status transitions',
+    'inheritance.area.ticketTypes': 'Ticket types',
+    'inheritance.area.ticketPriorities': 'Ticket priorities',
+    'inheritance.area.ticketFields': 'Custom ticket fields',
+    'inheritance.area.ticketLinkTypes': 'Ticket link types',
+    'inheritance.area.repositoryConnections': 'Repository connections',
+    'inheritance.area.notificationActions': 'Notification actions',
+    'gitConnections.description':
+        'Connect your personal Git account to browse repositories, branches, and pull requests you can access.',
+    'gitConnections.privacy':
+        'Connections belong to your account. Saved tokens stay hidden. Without a matching connection, only repository names are available.',
+    'gitConnections.add': 'Add connection',
+    'gitConnections.editAction': 'Edit',
+    'gitConnections.edit': 'Edit connection',
+    'gitConnections.remove': 'Remove',
+    'gitConnections.removeTitle': 'Remove connection',
+    'gitConnections.saved': 'Saved connections',
+    'gitConnections.empty': 'No Git connections yet',
+    'gitConnections.emptyDescription':
+        'Add a Gitea connection to access your repositories and their Git activity.',
+    'gitConnections.unnamedAccount': 'Unnamed remote account',
+    'gitConnections.remoteId': 'Remote user ID: {id}',
+    'gitConnections.editAccount': 'Edit {account} at {server}',
+    'gitConnections.removeAccount': 'Remove {account} at {server}',
+    'gitConnections.addDescription':
+        'Connect a Gitea account using its server URL and a personal application token.',
+    'gitConnections.editDescription':
+        'Update the server URL and enter a fresh token to verify this connection.',
+    'gitConnections.removeDescription':
+        'Remove this personal connection? Repository links remain, but Git activity will require another matching connection.',
+    'gitConnections.gitea': 'Gitea',
+    'gitConnections.baseUrl': 'Gitea base URL',
+    'gitConnections.token': 'Application token',
+    'gitConnections.newToken': 'New application token',
+    'gitConnections.tokenPlaceholder': 'Paste your Gitea application token',
+    'gitConnections.tokenHelp':
+        'Your token is verified with Gitea before saving. It is never shown in the saved connection.',
+    'gitConnections.verifying': 'Verifying connection…',
+    'gitConnections.save': 'Save changes',
+    'gitConnections.removing': 'Removing connection…',
+    'gitConnections.forbidden': 'Connection access denied',
+    'gitConnections.forbiddenDescription':
+        'You can only manage connections belonging to your account. Close this dialog and refresh the page.',
+    'gitConnections.added': 'Git connection added.',
+    'gitConnections.updated': 'Git connection updated.',
+    'gitConnections.removed': 'Git connection removed.',
+    'metadata.title': 'Ticket settings',
+    'metadata.pageTitle': '{project} ticket settings',
+    'metadata.description':
+        'Manage ticket types, priorities, and the information shown on your tickets.',
+    'metadata.updated': 'Ticket settings updated.',
+    'metadata.types': 'Ticket types',
+    'metadata.priorities': 'Priorities',
+    'metadata.addType': 'Add type',
+    'metadata.addPriority': 'Add priority',
+    'metadata.typesDescription':
+        'Define your project’s ticket types and their order. Parent types can contain child tickets.',
+    'metadata.prioritiesDescription':
+        'Define and order project-specific priorities. The last priority must be kept.',
+    'metadata.parentType': 'Parent type',
+    'metadata.standardType': 'Standard type',
+    'metadata.assignedTickets': 'Assigned tickets: {count}',
+    'metadata.editEntry': 'Edit {name}',
+    'metadata.deleteEntry': 'Delete {name}',
+    'metadata.lastType':
+        'The last ticket type cannot be deleted. Add another type first.',
+    'metadata.lastPriority':
+        'The last priority cannot be deleted. Add another priority first.',
+    'metadata.display': 'Display options',
+    'metadata.displayDescription':
+        'Choose which optional information is available on this project’s tickets.',
+    'metadata.author': 'Show ticket author',
+    'metadata.authorHelp': 'Display the author on ticket details.',
+    'metadata.storyPoints': 'Enable story points',
+    'metadata.storyPointsHelp': 'Allow estimates in story points on tickets.',
+    'metadata.name': 'Name',
+    'metadata.positionHelp':
+        'Choose a position from 1 to {count}. Other entries shift automatically.',
+    'metadata.allowChildren': 'Allow child tickets',
+    'metadata.parentFixed':
+        'Whether a type allows child tickets is fixed after creation. Its name and position remain editable.',
+    'metadata.editHelp':
+        'Choose a project-specific name. Changes apply to tickets using this entry.',
+    'metadata.deleteTypeHelp':
+        'Delete this type? Assigned tickets must be moved to a replacement type first. This action cannot be undone.',
+    'metadata.deletePriorityHelp':
+        'Delete this priority? All tickets assigned to this priority will also be permanently deleted. There is no replacement mapping for priorities. This action cannot be undone.',
+    'metadata.replacementHelp':
+        'Move {count} assigned tickets to another type before deleting this one.',
+    'metadata.replacement': 'Replacement ticket type',
+    'metadata.chooseType': 'Choose a type',
+    'metadata.parentReplacement':
+        'If any affected ticket has child tickets, choose a parent type. The server checks this before deleting.',
 } as const;
@@ -1,47 +1,211 @@
 <script setup lang="ts">
-import { Head } from '@inertiajs/vue3';
-import PlaceholderPattern from '@/components/PlaceholderPattern.vue';
+import { Head, Link } from '@inertiajs/vue3';
+import {
+    ArrowUpRight,
+    FolderGit2,
+    ListTodo,
+    OctagonAlert,
+} from 'lucide-vue-next';
+import { computed } from 'vue';
+import FeedbackState from '@/components/FeedbackState.vue';
+import { TicketCard } from '@/components/tickets';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { useLocalization } from '@/composables/useLocalization';
 import AppLayout from '@/layouts/AppLayout.vue';
 import { dashboard } from '@/routes/index';
-import type { BreadcrumbItem } from '@/types';
+import { index as projectsIndex, show as showProject } from '@/routes/projects';
+import type { BreadcrumbItem, DashboardPageProps } from '@/types';

-const breadcrumbs: BreadcrumbItem[] = [
+const props = defineProps<DashboardPageProps>();
+const { t } = useLocalization();
+const breadcrumbs = computed<BreadcrumbItem[]>(() => [
+    { title: t('navigation.dashboard'), href: dashboard() },
+]);
+const assignedTickets = computed(() =>
+    props.assignedTicketsByProject.flatMap((group) => group.tickets),
+);
+const summaryItems = computed(() => [
    {
-        title: 'Dashboard',
-        href: dashboard(),
+        label: t('dashboard.summary.assignedTickets'),
+        value: assignedTickets.value.length,
+        icon: ListTodo,
    },
-];
+    {
+        label: t('dashboard.summary.projects'),
+        value: props.assignedTicketsByProject.length,
+        icon: FolderGit2,
+    },
+    {
+        label: t('dashboard.summary.blockedTickets'),
+        value: assignedTickets.value.filter((ticket) => ticket.is_blocked)
+            .length,
+        icon: OctagonAlert,
+    },
+]);
 </script>

 <template>
-    <Head title="Dashboard" />
-
    <AppLayout :breadcrumbs="breadcrumbs">
-        <div
-            class="flex h-full flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-4"
-        >
-            <div class="grid auto-rows-min gap-4 md:grid-cols-3">
-                <div
-                    class="border-sidebar-border/70 dark:border-sidebar-border relative aspect-video overflow-hidden rounded-xl border"
-                >
-                    <PlaceholderPattern />
-                </div>
-                <div
-                    class="border-sidebar-border/70 dark:border-sidebar-border relative aspect-video overflow-hidden rounded-xl border"
-                >
-                    <PlaceholderPattern />
-                </div>
-                <div
-                    class="border-sidebar-border/70 dark:border-sidebar-border relative aspect-video overflow-hidden rounded-xl border"
-                >
-                    <PlaceholderPattern />
-                </div>
-            </div>
-            <div
-                class="border-sidebar-border/70 dark:border-sidebar-border relative min-h-[100vh] flex-1 rounded-xl border md:min-h-min"
+        <Head :title="t('navigation.dashboard')" />
+
+        <div class="gap-page md:p-page flex min-w-0 flex-1 flex-col p-4">
+            <header class="gap-stack grid min-w-0">
+                <p class="text-label text-muted-foreground uppercase">
+                    {{ t('dashboard.eyebrow') }}
+                </p>
+                <h1 class="text-headline-mobile md:text-headline break-words">
+                    {{
+                        t('dashboard.greeting', {
+                            name: $page.props.auth.user.name,
+                        })
+                    }}
+                </h1>
+                <p class="text-muted-foreground max-w-2xl">
+                    {{ t('dashboard.description') }}
+                </p>
+            </header>
+
+            <section :aria-label="t('dashboard.summary')">
+                <ul class="grid gap-3 sm:grid-cols-3">
+                    <li
+                        v-for="item in summaryItems"
+                        :key="item.label"
+                        class="min-w-0"
+                    >
+                        <Card class="h-full gap-0 rounded-md py-0">
+                            <CardContent
+                                class="flex min-w-0 items-center justify-between gap-4 p-4"
+                            >
+                                <div class="min-w-0">
+                                    <p
+                                        class="text-caption text-muted-foreground break-words"
+                                    >
+                                        {{ item.label }}
+                                    </p>
+                                    <p class="text-title mt-1 tabular-nums">
+                                        {{ item.value }}
+                                    </p>
+                                </div>
+                                <span
+                                    class="bg-accent text-primary flex size-10 shrink-0 items-center justify-center rounded-md"
+                                >
+                                    <component
+                                        :is="item.icon"
+                                        class="size-5"
+                                        aria-hidden="true"
+                                    />
+                                </span>
+                            </CardContent>
+                        </Card>
+                    </li>
+                </ul>
+            </section>
+
+            <section
+                aria-labelledby="assigned-work-title"
+                class="gap-column grid min-w-0"
            >
-                <PlaceholderPattern />
-            </div>
+                <header class="gap-stack grid min-w-0">
+                    <h2 id="assigned-work-title" class="text-title">
+                        {{ t('dashboard.assignedWork') }}
+                    </h2>
+                    <p class="text-muted-foreground max-w-2xl">
+                        {{ t('dashboard.assignedWorkDescription') }}
+                    </p>
+                </header>
+
+                <FeedbackState
+                    v-if="assignedTicketsByProject.length === 0"
+                    state="empty"
+                    :title="t('dashboard.empty.title')"
+                    :description="t('dashboard.empty.description')"
+                >
+                    <Button as-child variant="outline">
+                        <Link :href="projectsIndex()">
+                            <FolderGit2 aria-hidden="true" />
+                            {{ t('dashboard.empty.action') }}
+                        </Link>
+                    </Button>
+                </FeedbackState>
+
+                <div v-else class="gap-page grid min-w-0">
+                    <section
+                        v-for="group in assignedTicketsByProject"
+                        :key="group.project.id"
+                        :aria-labelledby="`dashboard-project-${group.project.id}`"
+                        class="gap-column grid min-w-0"
+                    >
+                        <header
+                            class="flex min-w-0 flex-col gap-3 border-b pb-3 sm:flex-row sm:items-center sm:justify-between"
+                        >
+                            <div class="flex min-w-0 items-center gap-3">
+                                <Badge
+                                    variant="outline"
+                                    class="max-w-full shrink-0 whitespace-normal break-all"
+                                >
+                                    {{ group.project.key }}
+                                </Badge>
+                                <div class="min-w-0">
+                                    <h3
+                                        :id="`dashboard-project-${group.project.id}`"
+                                        class="text-body break-words font-semibold"
+                                    >
+                                        {{ group.project.name }}
+                                    </h3>
+                                    <p
+                                        class="text-caption text-muted-foreground"
+                                    >
+                                        {{
+                                            t('tickets.count', {
+                                                count: group.tickets.length,
+                                            })
+                                        }}
+                                    </p>
+                                </div>
+                            </div>
+                            <Button
+                                as-child
+                                variant="link"
+                                class="self-start sm:self-auto"
+                            >
+                                <Link
+                                    :href="showProject(group.project.id)"
+                                    :aria-label="
+                                        t('dashboard.openProject', {
+                                            name: group.project.name,
+                                        })
+                                    "
+                                >
+                                    {{ t('dashboard.openProjectAction') }}
+                                    <ArrowUpRight aria-hidden="true" />
+                                </Link>
+                            </Button>
+                        </header>
+
+                        <ul
+                            :aria-label="
+                                t('dashboard.projectTickets', {
+                                    name: group.project.name,
+                                })
+                            "
+                            class="gap-column grid min-w-0 md:grid-cols-2 2xl:grid-cols-3"
+                        >
+                            <li
+                                v-for="ticket in group.tickets"
+                                :key="ticket.id"
+                                class="min-w-0"
+                            >
+                                <TicketCard
+                                    :project-id="group.project.id"
+                                    :ticket="ticket"
+                                />
+                            </li>
+                        </ul>
+                    </section>
+                </div>
+            </section>
        </div>
    </AppLayout>
 </template>
@@ -1,70 +1,155 @@
 <script setup lang="ts">
-import { Form, Head, Link } from '@inertiajs/vue3';
-import ProjectBoardController from '@/actions/App/Http/Controllers/ProjectBoardController';
-import Heading from '@/components/Heading.vue';
-import { TicketListItem } from '@/components/tickets';
+import { Head, Link } from '@inertiajs/vue3';
+import {
+    ArrowLeft,
+    ChevronsDownUp,
+    ChevronsUpDown,
+    Columns3,
+    Plus,
+    RotateCcw,
+    Search,
+} from 'lucide-vue-next';
+import { computed, reactive, ref, watch } from 'vue';
+import BacklogTicketTree from '@/components/BacklogTicketTree.vue';
+import FeedbackState from '@/components/FeedbackState.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardHeader,
-    CardTitle,
-} from '@/components/ui/card';
+import { useLocalization } from '@/composables/useLocalization';
 import AppLayout from '@/layouts/AppLayout.vue';
-import { ticketStatusLabel } from '@/lib/tickets';
+import {
+    buildBacklogTicketTree,
+    countBacklogTreeTickets,
+    expandableBacklogTicketIds,
+    filterBacklogTicketTree,
+} from '@/lib/backlog';
 import { index as boardIndex } from '@/routes/projects/board';
 import { index as backlogIndex } from '@/routes/projects/backlog';
-import { index, show } from '@/routes/projects/index';
+import { index as projectIndex, show } from '@/routes/projects/index';
 import { create as createTicket } from '@/routes/projects/tickets';
-import type { BreadcrumbItem, ProjectBacklogPageProps } from '@/types';
-import type { TicketModel } from '@/types/models/ticket-model';
-import type { TicketStatusModel } from '@/types/models/ticket-status-model';
+import type {
+    BacklogFilterState,
+    BreadcrumbItem,
+    ProjectBacklogPageProps,
+} from '@/types';

 const props = defineProps<ProjectBacklogPageProps>();
+const { t } = useLocalization();
+const breadcrumbs = computed<BreadcrumbItem[]>(() => [
+    { title: t('navigation.projects'), href: projectIndex() },
+    { title: props.project.name, href: show(props.project.id) },
+    { title: t('navigation.backlog'), href: backlogIndex(props.project.id) },
+]);

-const breadcrumbs: BreadcrumbItem[] = [
-    {
-        title: 'Projects',
-        href: index(),
-    },
-    {
-        title: props.project.name,
-        href: show(props.project.id),
-    },
-    {
-        title: 'Backlog',
-        href: backlogIndex(props.project.id),
-    },
-];
+const filters = reactive<BacklogFilterState>({
+    assigneeId: '',
+    priorityId: '',
+    query: '',
+    statusId: '',
+    typeId: '',
+});
+const collapsedTicketIds = reactive(new Set<number>());
+const pendingTicketId = ref<number | null>(null);
+const ticketTree = computed(() => buildBacklogTicketTree(props.tickets));
+const filteredTicketTree = computed(() =>
+    filterBacklogTicketTree(ticketTree.value, filters),
+);
+const visibleTicketCount = computed(() =>
+    countBacklogTreeTickets(filteredTicketTree.value),
+);
+const expandableTicketIds = computed(() =>
+    expandableBacklogTicketIds(filteredTicketTree.value),
+);
+const hasActiveFilters = computed(
+    () =>
+        filters.query.trim() !== '' ||
+        filters.typeId !== '' ||
+        filters.priorityId !== '' ||
+        filters.statusId !== '' ||
+        filters.assigneeId !== '',
+);
+const allVisibleBranchesCollapsed = computed(
+    () =>
+        expandableTicketIds.value.length > 0 &&
+        expandableTicketIds.value.every((ticketId) =>
+            collapsedTicketIds.has(ticketId),
+        ),
+);

-const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
-    return (ticket.ticket_status?.allowed_target_statuses ?? []).filter(
-        (ticketStatus) => ticketStatus.id !== ticket.ticket_status_id,
-    );
-};
+function clearFilters(): void {
+    filters.query = '';
+    filters.typeId = '';
+    filters.priorityId = '';
+    filters.statusId = '';
+    filters.assigneeId = '';
+}
+
+function toggleTicket(ticketId: number): void {
+    if (collapsedTicketIds.has(ticketId)) {
+        collapsedTicketIds.delete(ticketId);
+    } else {
+        collapsedTicketIds.add(ticketId);
+    }
+}
+
+function toggleAllBranches(): void {
+    if (allVisibleBranchesCollapsed.value) {
+        collapsedTicketIds.clear();
+
+        return;
+    }
+
+    for (const ticketId of expandableTicketIds.value) {
+        collapsedTicketIds.add(ticketId);
+    }
+}
+
+function finishMove(ticketId: number): void {
+    if (pendingTicketId.value === ticketId) {
+        pendingTicketId.value = null;
+    }
+}
+
+watch(
+    () => props.project.id,
+    () => {
+        clearFilters();
+        collapsedTicketIds.clear();
+        pendingTicketId.value = null;
+    },
+);
 </script>

 <template>
    <AppLayout :breadcrumbs="breadcrumbs">
-        <Head :title="`${project.name} backlog`" />
+        <Head :title="t('backlog.title', { name: project.name })" />

-        <div class="flex flex-1 flex-col gap-6 p-4">
-            <div
-                class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
+        <div class="gap-page md:p-page flex min-w-0 flex-1 flex-col p-4">
+            <header
+                class="flex min-w-0 flex-col gap-4 xl:flex-row xl:items-start xl:justify-between"
            >
-                <div class="space-y-3">
-                    <Badge variant="outline" class="px-3 py-1">
-                        {{ project.key }}
-                    </Badge>
-                    <Heading
-                        :title="`${project.name} backlog`"
-                        description="All newly created tickets start here before they move onto the board."
-                    />
+                <div class="grid min-w-0 gap-2">
+                    <div class="flex min-w-0 flex-wrap items-center gap-3">
+                        <Badge
+                            variant="outline"
+                            class="wrap-anywhere max-w-full whitespace-normal"
+                        >
+                            {{ project.key }}
+                        </Badge>
+                        <p class="text-caption text-muted-foreground">
+                            {{ t('tickets.count', { count: tickets.length }) }}
+                        </p>
+                    </div>
+                    <h1
+                        class="text-headline-mobile md:text-headline wrap-anywhere"
+                    >
+                        {{ t('backlog.title', { name: project.name }) }}
+                    </h1>
+                    <p class="text-caption text-muted-foreground max-w-2xl">
+                        {{ t('backlog.description') }}
+                    </p>
                </div>

-                <div class="flex flex-wrap gap-3">
+                <div class="flex flex-wrap gap-2">
                    <Button v-if="canCreateTickets" as-child>
                        <Link
                            :href="
@@ -74,138 +159,286 @@ const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
                                )
                            "
                        >
-                            Create ticket
+                            <Plus aria-hidden="true" />
+                            {{ t('navigation.createTicket') }}
                        </Link>
                    </Button>
-
                    <Button as-child variant="outline">
-                        <Link :href="boardIndex(project.id)">Open board</Link>
+                        <Link :href="boardIndex(project.id)">
+                            <Columns3 aria-hidden="true" />
+                            {{ t('backlog.openBoard') }}
+                        </Link>
                    </Button>
-
-                    <Button as-child variant="outline">
-                        <Link :href="show(project.id)">Back to project</Link>
+                    <Button as-child variant="ghost">
+                        <Link :href="show(project.id)">
+                            <ArrowLeft aria-hidden="true" />
+                            {{ t('backlog.backToProject') }}
+                        </Link>
                    </Button>
                </div>
+            </header>
+
+            <FeedbackState v-if="status" state="success" :title="status" />
+
+            <section
+                aria-labelledby="backlog-filter-title"
+                class="bg-card gap-card p-card grid min-w-0 rounded-md border"
+            >
+                <div
+                    class="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"
+                >
+                    <div class="grid min-w-0 gap-1">
+                        <h2 id="backlog-filter-title" class="text-title">
+                            {{ t('backlog.filters.title') }}
+                        </h2>
+                        <p class="text-caption text-muted-foreground">
+                            {{ t('backlog.filters.description') }}
+                        </p>
+                    </div>
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        :disabled="!hasActiveFilters"
+                        @click="clearFilters"
+                    >
+                        <RotateCcw aria-hidden="true" />
+                        {{ t('backlog.filters.clear') }}
+                    </Button>
+                </div>
+
+                <div
+                    class="grid min-w-0 gap-3 sm:grid-cols-2 xl:grid-cols-[minmax(14rem,2fr)_repeat(4,minmax(9rem,1fr))]"
+                >
+                    <div
+                        class="grid min-w-0 gap-1.5 sm:col-span-2 xl:col-span-1"
+                    >
+                        <label
+                            for="backlog-query"
+                            class="text-caption font-semibold"
+                        >
+                            {{ t('backlog.filters.search') }}
+                        </label>
+                        <div class="relative min-w-0">
+                            <Search
+                                class="text-muted-foreground pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2"
+                                aria-hidden="true"
+                            />
+                            <input
+                                id="backlog-query"
+                                v-model="filters.query"
+                                type="search"
+                                class="border-input bg-card text-body min-h-control focus-visible:ring-ring/35 w-full min-w-0 rounded-md border py-2 pl-9 pr-3 focus-visible:outline-none focus-visible:ring-2"
+                                :placeholder="
+                                    t('backlog.filters.searchPlaceholder')
+                                "
+                            />
+                        </div>
+                    </div>
+
+                    <div class="grid min-w-0 gap-1.5">
+                        <label
+                            for="backlog-type"
+                            class="text-caption font-semibold"
+                        >
+                            {{ t('backlog.filters.type') }}
+                        </label>
+                        <select
+                            id="backlog-type"
+                            v-model="filters.typeId"
+                            class="border-input bg-card text-body min-h-control focus-visible:ring-ring/35 w-full min-w-0 rounded-md border px-3 py-2 focus-visible:outline-none focus-visible:ring-2"
+                        >
+                            <option value="">
+                                {{ t('backlog.filters.allTypes') }}
+                            </option>
+                            <option
+                                v-for="ticketType in ticketTypes"
+                                :key="ticketType.id"
+                                :value="ticketType.id"
+                            >
+                                {{ ticketType.name }}
+                            </option>
+                        </select>
+                    </div>
+
+                    <div class="grid min-w-0 gap-1.5">
+                        <label
+                            for="backlog-priority"
+                            class="text-caption font-semibold"
+                        >
+                            {{ t('backlog.filters.priority') }}
+                        </label>
+                        <select
+                            id="backlog-priority"
+                            v-model="filters.priorityId"
+                            class="border-input bg-card text-body min-h-control focus-visible:ring-ring/35 w-full min-w-0 rounded-md border px-3 py-2 focus-visible:outline-none focus-visible:ring-2"
+                        >
+                            <option value="">
+                                {{ t('backlog.filters.allPriorities') }}
+                            </option>
+                            <option
+                                v-for="priority in ticketPriorities"
+                                :key="priority.id"
+                                :value="priority.id"
+                            >
+                                {{ priority.name }}
+                            </option>
+                        </select>
+                    </div>
+
+                    <div class="grid min-w-0 gap-1.5">
+                        <label
+                            for="backlog-status"
+                            class="text-caption font-semibold"
+                        >
+                            {{ t('backlog.filters.status') }}
+                        </label>
+                        <select
+                            id="backlog-status"
+                            v-model="filters.statusId"
+                            class="border-input bg-card text-body min-h-control focus-visible:ring-ring/35 w-full min-w-0 rounded-md border px-3 py-2 focus-visible:outline-none focus-visible:ring-2"
+                        >
+                            <option value="">
+                                {{ t('backlog.filters.allStatuses') }}
+                            </option>
+                            <option
+                                v-for="ticketStatus in backlogTicketStatuses"
+                                :key="ticketStatus.id"
+                                :value="ticketStatus.id"
+                            >
+                                {{ ticketStatus.name }}
+                            </option>
+                        </select>
+                    </div>
+
+                    <div class="grid min-w-0 gap-1.5">
+                        <label
+                            for="backlog-assignee"
+                            class="text-caption font-semibold"
+                        >
+                            {{ t('backlog.filters.assignee') }}
+                        </label>
+                        <select
+                            id="backlog-assignee"
+                            v-model="filters.assigneeId"
+                            class="border-input bg-card text-body min-h-control focus-visible:ring-ring/35 w-full min-w-0 rounded-md border px-3 py-2 focus-visible:outline-none focus-visible:ring-2"
+                        >
+                            <option value="">
+                                {{ t('backlog.filters.allAssignees') }}
+                            </option>
+                            <option value="unassigned">
+                                {{ t('tickets.unassigned') }}
+                            </option>
+                            <option
+                                v-for="user in users"
+                                :key="user.id"
+                                :value="user.id"
+                            >
+                                {{ user.name }}
+                            </option>
+                        </select>
+                    </div>
+                </div>
+            </section>
+
+            <div
+                v-if="tickets.length === 0"
+                class="grid justify-items-start gap-3"
+            >
+                <FeedbackState
+                    state="empty"
+                    :title="t('backlog.empty.title')"
+                    :description="t('backlog.empty.description')"
+                />
+                <Button v-if="canCreateTickets" as-child size="sm">
+                    <Link
+                        :href="
+                            createTicket(
+                                { project: project.id },
+                                { query: { source: 'backlog' } },
+                            )
+                        "
+                    >
+                        <Plus aria-hidden="true" />
+                        {{ t('backlog.empty.action') }}
+                    </Link>
+                </Button>
            </div>

            <div
-                v-if="status"
-                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
+                v-else-if="visibleTicketCount === 0"
+                class="grid justify-items-start gap-3"
            >
-                {{ status }}
+                <FeedbackState
+                    state="empty"
+                    :title="t('backlog.filters.empty.title')"
+                    :description="t('backlog.filters.empty.description')"
+                />
+                <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    @click="clearFilters"
+                >
+                    <RotateCcw aria-hidden="true" />
+                    {{ t('backlog.filters.clear') }}
+                </Button>
            </div>

-            <Card class="gap-0 overflow-hidden">
-                <CardHeader class="border-b">
-                    <CardTitle>Backlog tickets</CardTitle>
-                    <CardDescription>
-                        Tickets remain here while their status belongs to
-                        backlog.
-                    </CardDescription>
-                </CardHeader>
-
-                <CardContent class="p-0">
-                    <div
-                        v-if="tickets.length === 0"
-                        class="text-muted-foreground p-6 text-sm"
-                    >
-                        No backlog tickets exist yet.
+            <section
+                v-else
+                aria-labelledby="backlog-results-title"
+                class="grid min-w-0 gap-3"
+            >
+                <div
+                    class="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
+                >
+                    <div class="grid min-w-0 gap-1">
+                        <h2 id="backlog-results-title" class="text-title">
+                            {{ t('backlog.results.title') }}
+                        </h2>
+                        <p class="text-caption text-muted-foreground">
+                            {{
+                                t('backlog.results.count', {
+                                    count: visibleTicketCount,
+                                    total: tickets.length,
+                                })
+                            }}
+                        </p>
                    </div>
+                    <Button
+                        v-if="expandableTicketIds.length > 0"
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        @click="toggleAllBranches"
+                    >
+                        <ChevronsUpDown
+                            v-if="allVisibleBranchesCollapsed"
+                            aria-hidden="true"
+                        />
+                        <ChevronsDownUp v-else aria-hidden="true" />
+                        {{
+                            t(
+                                allVisibleBranchesCollapsed
+                                    ? 'backlog.tree.expandAll'
+                                    : 'backlog.tree.collapseAll',
+                            )
+                        }}
+                    </Button>
+                </div>

-                    <ul v-else class="gap-column grid p-4">
-                        <TicketListItem
-                            v-for="ticket in tickets"
-                            :key="ticket.id"
-                            :project-id="project.id"
-                            :ticket="ticket"
-                        >
-                            <template v-if="canEditTickets" #actions>
-                                <Form
-                                    v-bind="
-                                        ProjectBoardController.move.form({
-                                            project: project.id,
-                                            ticket: ticket.id,
-                                        })
-                                    "
-                                    class="flex w-full flex-col gap-2"
-                                    v-slot="{ processing }"
-                                >
-                                    <input
-                                        type="hidden"
-                                        name="redirect_to"
-                                        value="backlog"
-                                    />
-                                    <label
-                                        :for="`backlog-ticket-status-${ticket.id}`"
-                                        class="text-label text-muted-foreground uppercase"
-                                    >
-                                        Move to status
-                                    </label>
-                                    <div
-                                        class="flex flex-col gap-2 sm:flex-row"
-                                    >
-                                        <select
-                                            :id="`backlog-ticket-status-${ticket.id}`"
-                                            name="ticket_status_id"
-                                            :disabled="
-                                                allowedTargetStatuses(ticket)
-                                                    .length === 0 || processing
-                                            "
-                                            class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 min-h-control min-w-0 flex-1 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
-                                        >
-                                            <option
-                                                v-if="
-                                                    allowedTargetStatuses(
-                                                        ticket,
-                                                    ).length === 0
-                                                "
-                                                value=""
-                                            >
-                                                No allowed moves
-                                            </option>
-                                            <option
-                                                v-for="ticketStatus in allowedTargetStatuses(
-                                                    ticket,
-                                                )"
-                                                :key="ticketStatus.id"
-                                                :value="ticketStatus.id"
-                                            >
-                                                {{
-                                                    ticketStatusLabel(
-                                                        ticketStatus,
-                                                        'Unknown status',
-                                                    )
-                                                }}
-                                            </option>
-                                        </select>
-                                        <Button
-                                            type="submit"
-                                            size="sm"
-                                            :disabled="
-                                                processing ||
-                                                allowedTargetStatuses(ticket)
-                                                    .length === 0
-                                            "
-                                        >
-                                            Move
-                                        </Button>
-                                    </div>
-                                    <p
-                                        v-if="
-                                            allowedTargetStatuses(ticket)
-                                                .length === 0
-                                        "
-                                        class="text-caption text-muted-foreground"
-                                    >
-                                        This status does not allow moving
-                                        anywhere else.
-                                    </p>
-                                </Form>
-                            </template>
-                        </TicketListItem>
-                    </ul>
-                </CardContent>
-            </Card>
+                <BacklogTicketTree
+                    :nodes="filteredTicketTree"
+                    :project-id="project.id"
+                    :can-edit-tickets="canEditTickets"
+                    :collapsed-ticket-ids="collapsedTicketIds"
+                    :pending-ticket-id="pendingTicketId"
+                    @toggle="toggleTicket"
+                    @move-start="pendingTicketId = $event"
+                    @move-finish="finishMove"
+                />
+            </section>
        </div>
    </AppLayout>
 </template>
@@ -1,71 +1,248 @@
 <script setup lang="ts">
-import { Form, Head, Link } from '@inertiajs/vue3';
-import ProjectBoardController from '@/actions/App/Http/Controllers/ProjectBoardController';
-import Heading from '@/components/Heading.vue';
+import { Form, Head, Link, useForm } from '@inertiajs/vue3';
+import { ArrowLeft, GripVertical, ListTodo, Plus } from 'lucide-vue-next';
+import { computed, nextTick, ref, watch } from 'vue';
+import { move } from '@/actions/App/Http/Controllers/ProjectBoardController';
+import FeedbackState from '@/components/FeedbackState.vue';
+import FormFeedback from '@/components/FormFeedback.vue';
+import InputError from '@/components/InputError.vue';
 import { TicketCard } from '@/components/tickets';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardHeader,
-    CardTitle,
-} from '@/components/ui/card';
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import { useBoardDrag } from '@/composables/useBoardDrag';
+import { useFormProtection } from '@/composables/useFormProtection';
+import { useLocalization } from '@/composables/useLocalization';
 import AppLayout from '@/layouts/AppLayout.vue';
 import { ticketStatusLabel } from '@/lib/tickets';
 import { index as backlogIndex } from '@/routes/projects/backlog';
-import { index as projectIndex, show } from '@/routes/projects/index';
-import { board as boardSettings } from '@/routes/projects/settings';
 import { index as boardIndex } from '@/routes/projects/board';
+import { index as projectIndex, show } from '@/routes/projects/index';
 import { create as createTicket } from '@/routes/projects/tickets';
 import type { BreadcrumbItem, ProjectBoardPageProps } from '@/types';
 import type { TicketModel } from '@/types/models/ticket-model';
-import type { TicketStatusModel } from '@/types/models/ticket-status-model';

 const props = defineProps<ProjectBoardPageProps>();
+const { t } = useLocalization();
+const breadcrumbs = computed<BreadcrumbItem[]>(() => [
+    { title: t('navigation.projects'), href: projectIndex() },
+    { title: props.project.name, href: show(props.project.id) },
+    { title: t('navigation.board'), href: boardIndex(props.project.id) },
+]);
+const selectedColumnId = ref<number>();
+watch(
+    () =>
+        [
+            props.project.id,
+            props.boardColumns.map((column) => column.id),
+        ] as const,
+    ([projectId, columnIds], previous) => {
+        if (
+            projectId !== previous?.[0] ||
+            !columnIds.includes(selectedColumnId.value ?? -1)
+        ) {
+            selectedColumnId.value = columnIds[0];
+        }
+    },
+    { immediate: true },
+);
+const columns = computed(() =>
+    props.boardColumns.map((column) => {
+        const ticketsByStatus = new Map<number | null, TicketModel[]>();
+        for (const ticket of column.tickets ?? []) {
+            const tickets = ticketsByStatus.get(ticket.ticket_status_id) ?? [];
+            tickets.push(ticket);
+            ticketsByStatus.set(ticket.ticket_status_id, tickets);
+        }
+        return {
+            ...column,
+            count: column.tickets?.length ?? 0,
+            groups: (column.ticket_statuses ?? []).map((status) => ({
+                status,
+                tickets: ticketsByStatus.get(status.id) ?? [],
+            })),
+        };
+    }),
+);
+const ticketCount = computed(() =>
+    columns.value.reduce((count, column) => count + column.count, 0),
+);
+const allowedTargetStatuses = (ticket: TicketModel) =>
+    (ticket.ticket_status?.allowed_target_statuses ?? []).filter(
+        (status) => status.id !== ticket.ticket_status_id,
+    );

-const breadcrumbs: BreadcrumbItem[] = [
-    {
-        title: 'Projects',
-        href: projectIndex(),
-    },
-    {
-        title: props.project.name,
-        href: show(props.project.id),
-    },
-    {
-        title: 'Board',
-        href: boardIndex(props.project.id),
-    },
-];
-
-const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
-    return (ticket.ticket_status?.allowed_target_statuses ?? []).filter(
-        (ticketStatus) => ticketStatus.id !== ticket.ticket_status_id,
+const moveForm = useForm({ ticket_status_id: 0, redirect_to: 'board' });
+const feedback = useFormProtection(moveForm, { isDirty: () => false });
+const menuPending = ref<number | null>(null);
+const busy = computed(() => moveForm.processing || menuPending.value !== null);
+const choice = ref<{ ticketId: number; columnId: number } | null>(null);
+const lastMove = ref<{ ticketId: number; statusId: number } | null>(null);
+const findTicket = (id: number) =>
+    props.boardColumns
+        .flatMap((column) => column.tickets ?? [])
+        .find((ticket) => ticket.id === id);
+const targetsForColumn = (ticket: TicketModel, columnId: number) => {
+    const statusIds =
+        props.boardColumns
+            .find((column) => column.id === columnId)
+            ?.ticket_statuses?.map((status) => status.id) ?? [];
+    return allowedTargetStatuses(ticket).filter((status) =>
+        statusIds.includes(status.id),
    );
 };
+const choiceTicket = computed(() =>
+    choice.value ? findTicket(choice.value.ticketId) : undefined,
+);
+const choiceTargets = computed(() =>
+    choice.value && choiceTicket.value
+        ? targetsForColumn(choiceTicket.value, choice.value.columnId)
+        : [],
+);
+const choiceOpen = computed({
+    get: () => choice.value !== null,
+    set: (open: boolean) => {
+        if (!open) {
+            choice.value = null;
+        }
+    },
+});
+
+function submitMove(ticketId: number, statusId: number): void {
+    const ticket = findTicket(ticketId);
+    if (
+        busy.value ||
+        !props.canEditTickets ||
+        !ticket ||
+        !allowedTargetStatuses(ticket).some((status) => status.id === statusId)
+    ) {
+        return;
+    }
+    lastMove.value = { ticketId, statusId };
+    moveForm.ticket_status_id = statusId;
+    moveForm.clearErrors();
+    feedback.submit(move({ project: props.project.id, ticket: ticketId }), {
+        errorBag: `board-ticket-${ticketId}`,
+        preserveScroll: true,
+        onSuccess: async () => {
+            const destination = props.boardColumns.find((column) =>
+                column.ticket_statuses?.some(
+                    (status) => status.id === statusId,
+                ),
+            );
+            if (destination) {
+                selectedColumnId.value = destination.id;
+            }
+            await nextTick();
+            document
+                .getElementById(`ticket-status-${ticketId}`)
+                ?.focus({ preventScroll: true });
+        },
+    });
+}
+
+function dropTicket(ticket: TicketModel, columnId: number): void {
+    const current = findTicket(ticket.id);
+    if (!current || busy.value || !props.canEditTickets) {
+        return;
+    }
+    const targets = targetsForColumn(current, columnId);
+    if (targets.length === 1) {
+        submitMove(current.id, targets[0].id);
+    } else if (targets.length > 1) {
+        moveForm.ticket_status_id = targets[0].id;
+        choice.value = { ticketId: current.id, columnId };
+    }
+}
+
+const {
+    draggedTicket,
+    columnId: dropColumnId,
+    x: dragX,
+    y: dragY,
+    start: startDrag,
+    cancel: cancelDrag,
+} = useBoardDrag({
+    canStart: (ticket) =>
+        props.canEditTickets &&
+        !busy.value &&
+        !choice.value &&
+        allowedTargetStatuses(ticket).length > 0,
+    drop: dropTicket,
+});
+const canDrop = (columnId: number) =>
+    !!draggedTicket.value &&
+    targetsForColumn(draggedTicket.value, columnId).length > 0;
+const dropClasses = (columnId: number) =>
+    !draggedTicket.value
+        ? {}
+        : {
+              'border-primary border-dashed': canDrop(columnId),
+              'ring-2 ring-primary bg-primary/10':
+                  canDrop(columnId) && dropColumnId.value === columnId,
+              'opacity-40': !canDrop(columnId),
+          };
+function confirmMove(): void {
+    if (
+        !choice.value ||
+        !choiceTargets.value.some(
+            (status) => status.id === moveForm.ticket_status_id,
+        )
+    ) {
+        return;
+    }
+    const ticketId = choice.value.ticketId;
+    choice.value = null;
+    submitMove(ticketId, moveForm.ticket_status_id);
+}
+function focusStatus(ticketId: number): void {
+    document.getElementById(`ticket-status-${ticketId}`)?.focus();
+}
+watch(
+    () => [props.project.id, props.boardColumns, props.canEditTickets],
+    () => {
+        cancelDrag();
+        choice.value = null;
+    },
+);
 </script>

 <template>
    <AppLayout :breadcrumbs="breadcrumbs">
-        <Head :title="`${project.name} board`" />
+        <Head :title="t('board.title', { name: project.name })" />

-        <div class="flex flex-1 flex-col gap-6 p-4">
-            <div
-                class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
+        <div class="gap-column md:p-page flex min-w-0 flex-1 flex-col p-4">
+            <header
+                class="flex min-w-0 flex-col gap-4 xl:flex-row xl:items-start xl:justify-between"
            >
-                <div class="space-y-3">
-                    <Badge variant="outline" class="px-3 py-1">
-                        {{ project.key }}
-                    </Badge>
-                    <Heading
-                        :title="`${project.name} board`"
-                        description="Tickets only appear here once they are assigned to one of the project's workflow columns."
-                    />
+                <div class="grid min-w-0 gap-2">
+                    <div class="flex min-w-0 flex-wrap items-center gap-3">
+                        <Badge
+                            variant="outline"
+                            class="wrap-anywhere max-w-full whitespace-normal"
+                            >{{ project.key }}</Badge
+                        >
+                        <p class="text-caption text-muted-foreground">
+                            {{ t('tickets.count', { count: ticketCount }) }}
+                        </p>
+                    </div>
+                    <h1
+                        class="text-headline-mobile md:text-headline wrap-anywhere"
+                    >
+                        {{ t('board.title', { name: project.name }) }}
+                    </h1>
+                    <p class="text-caption text-muted-foreground max-w-2xl">
+                        {{ t('board.description') }}
+                    </p>
                </div>
-
-                <div class="flex flex-wrap gap-3">
+                <div class="flex flex-wrap gap-2">
                    <Button v-if="canCreateTickets" as-child>
                        <Link
                            :href="
@@ -75,187 +252,427 @@ const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
                                )
                            "
                        >
-                            Create ticket
+                            <Plus aria-hidden="true" />{{
+                                t('navigation.createTicket')
+                            }}
                        </Link>
                    </Button>
-
                    <Button as-child variant="outline">
                        <Link :href="backlogIndex(project.id)"
-                            >Open backlog</Link
+                            ><ListTodo aria-hidden="true" />{{
+                                t('board.openBacklog')
+                            }}</Link
                        >
                    </Button>
-
-                    <Button as-child variant="outline">
-                        <Link :href="show(project.id)">Back to project</Link>
+                    <Button as-child variant="ghost">
+                        <Link :href="show(project.id)"
+                            ><ArrowLeft aria-hidden="true" />{{
+                                t('board.backToProject')
+                            }}</Link
+                        >
                    </Button>
                </div>
-            </div>
+            </header>

-            <div
-                v-if="status"
-                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
-            >
-                {{ status }}
-            </div>
+            <FeedbackState v-if="status" state="success" :title="status" />
+            <FormFeedback
+                :state="feedback.state.value"
+                :description="moveForm.errors.ticket_status_id"
+                @retry="
+                    lastMove && submitMove(lastMove.ticketId, lastMove.statusId)
+                "
+            />
+            <FeedbackState
+                v-if="columns.length === 0"
+                state="empty"
+                :title="t('board.empty.title')"
+                :description="t('board.empty.description')"
+            />

-            <Card v-if="boardColumns.length === 0">
-                <CardContent class="flex flex-col gap-4 p-6 text-sm">
-                    <p class="text-muted-foreground">
-                        The board has no workflow columns yet, so no tickets can
-                        appear here.
-                    </p>
-                    <div v-if="canEditTickets">
-                        <Button as-child variant="outline">
-                            <Link :href="boardSettings(project.id)">
-                                Open board settings
-                            </Link>
-                        </Button>
-                    </div>
-                </CardContent>
-            </Card>
-
-            <div v-else class="grid gap-4 xl:grid-cols-3">
-                <Card
-                    v-for="boardColumn in boardColumns"
-                    :key="boardColumn.id"
-                    class="flex h-full flex-col gap-0 overflow-hidden"
-                >
-                    <CardHeader class="bg-muted/20 border-b">
-                        <div class="flex items-start justify-between gap-3">
-                            <div>
-                                <CardTitle>{{ boardColumn.name }}</CardTitle>
-                                <CardDescription>
-                                    {{ boardColumn.tickets?.length ?? 0 }}
-                                    active ticket(s)
-                                </CardDescription>
-                                <div
-                                    v-if="
-                                        (boardColumn.ticket_statuses?.length ??
-                                            0) > 0
-                                    "
-                                    class="mt-3 flex flex-wrap gap-2"
-                                >
-                                    <Badge
-                                        v-for="ticketStatus in boardColumn.ticket_statuses"
-                                        :key="ticketStatus.id"
-                                        variant="outline"
-                                    >
-                                        {{ ticketStatus.name }}
-                                    </Badge>
-                                </div>
-                            </div>
-
-                            <Badge variant="secondary">
-                                #{{ boardColumn.position }}
-                            </Badge>
-                        </div>
-                    </CardHeader>
-
-                    <CardContent class="flex flex-1 flex-col gap-4 p-4">
-                        <div
-                            v-if="(boardColumn.tickets?.length ?? 0) === 0"
-                            class="border-border text-muted-foreground rounded-xl border border-dashed px-4 py-6 text-sm"
+            <template v-else>
+                <div class="grid min-w-0 gap-2 md:hidden">
+                    <label for="board-column" class="text-body font-semibold">{{
+                        t('board.selectColumn')
+                    }}</label>
+                    <select
+                        id="board-column"
+                        v-model="selectedColumnId"
+                        class="border-input bg-card text-body min-h-control focus-visible:ring-ring/35 w-full min-w-0 rounded-md border px-3 py-2 focus-visible:outline-none focus-visible:ring-2"
+                        :aria-controls="`board-column-${selectedColumnId}`"
+                    >
+                        <option
+                            v-for="column in columns"
+                            :key="column.id"
+                            :value="column.id"
                        >
-                            No tickets are currently in this column.
-                        </div>
-
-                        <div v-else class="flex flex-col gap-4">
-                            <TicketCard
-                                v-for="ticket in boardColumn.tickets"
-                                :key="ticket.id"
-                                :project-id="project.id"
-                                :ticket="ticket"
+                            {{
+                                t('board.columnOption', {
+                                    name: column.name,
+                                    count: column.count,
+                                })
+                            }}
+                        </option>
+                    </select>
+                </div>
+                <p
+                    id="board-scroll-hint"
+                    class="text-caption text-muted-foreground hidden md:block"
+                >
+                    {{ t('board.scrollHint') }}
+                </p>
+                <p
+                    v-if="canEditTickets"
+                    id="board-drag-hint"
+                    class="text-caption text-muted-foreground"
+                >
+                    {{ t('board.dragHint') }}
+                </p>
+                <section
+                    :aria-label="t('board.columns')"
+                    aria-describedby="board-scroll-hint"
+                    tabindex="0"
+                    data-board-drag-scroll
+                    class="gap-column focus-visible:ring-ring/35 flex min-w-0 rounded-md pb-2 focus-visible:outline-none focus-visible:ring-2 md:overflow-x-auto md:overscroll-x-contain"
+                >
+                    <section
+                        v-for="column in columns"
+                        :id="`board-column-${column.id}`"
+                        :key="`${project.id}-${column.id}`"
+                        :aria-labelledby="`board-column-title-${column.id}`"
+                        :data-board-drop-column="column.id"
+                        :class="[
+                            'bg-muted/40 gap-column w-full min-w-0 shrink-0 flex-col self-stretch rounded-md border p-3 md:flex md:w-80',
+                            selectedColumnId === column.id ? 'flex' : 'hidden',
+                            dropClasses(column.id),
+                        ]"
+                    >
+                        <header
+                            class="border-primary/25 flex min-w-0 items-start justify-between gap-3 border-b-2 pb-3"
+                        >
+                            <h2
+                                :id="`board-column-title-${column.id}`"
+                                class="text-title wrap-anywhere"
                            >
-                                <template v-if="canEditTickets" #actions>
-                                    <Form
-                                        v-bind="
-                                            ProjectBoardController.move.form({
-                                                project: project.id,
-                                                ticket: ticket.id,
-                                            })
-                                        "
-                                        class="flex flex-col gap-2"
-                                        v-slot="{ processing }"
+                                {{ column.name }}
+                            </h2>
+                            <Badge
+                                variant="secondary"
+                                class="shrink-0 tabular-nums"
+                                :aria-label="
+                                    t('tickets.count', { count: column.count })
+                                "
+                                >{{ column.count }}</Badge
+                            >
+                        </header>
+                        <p
+                            v-if="column.count === 0"
+                            class="text-caption text-muted-foreground rounded-md border border-dashed p-3"
+                        >
+                            {{ t('board.emptyColumn') }}
+                        </p>
+                        <p
+                            v-if="column.groups.length === 0"
+                            class="text-caption text-muted-foreground"
+                        >
+                            {{ t('board.noStatuses') }}
+                        </p>
+                        <section
+                            v-for="group in column.groups"
+                            :key="group.status.id"
+                            :aria-labelledby="`board-status-${group.status.id}`"
+                            class="grid min-w-0 gap-3"
+                        >
+                            <div
+                                class="text-caption text-muted-foreground flex min-w-0 items-center justify-between gap-2"
+                            >
+                                <h3
+                                    :id="`board-status-${group.status.id}`"
+                                    class="wrap-anywhere font-semibold"
+                                >
+                                    {{ group.status.name }}
+                                </h3>
+                                <span
+                                    class="shrink-0 tabular-nums"
+                                    :aria-label="
+                                        t('tickets.count', {
+                                            count: group.tickets.length,
+                                        })
+                                    "
+                                    >{{ group.tickets.length }}</span
+                                >
+                            </div>
+                            <p
+                                v-if="group.tickets.length === 0"
+                                class="text-caption text-muted-foreground border-border rounded-md border border-dashed p-3"
+                            >
+                                {{ t('board.emptyStatus') }}
+                            </p>
+                            <ul v-else class="grid min-w-0 gap-3">
+                                <li
+                                    v-for="ticket in group.tickets"
+                                    :key="ticket.id"
+                                    class="min-w-0"
+                                    :class="{
+                                        'opacity-50':
+                                            draggedTicket?.id === ticket.id,
+                                    }"
+                                >
+                                    <TicketCard
+                                        :project-id="project.id"
+                                        :ticket="ticket"
+                                        :show-status="false"
                                    >
-                                        <input
-                                            type="hidden"
-                                            name="redirect_to"
-                                            value="board"
-                                        />
-                                        <label
-                                            :for="`ticket-status-${ticket.id}`"
-                                            class="text-muted-foreground text-xs font-medium uppercase tracking-wide"
+                                        <template
+                                            v-if="canEditTickets"
+                                            #actions
                                        >
-                                            Move ticket
-                                        </label>
-                                        <div
-                                            class="flex flex-col gap-2 sm:flex-row"
-                                        >
-                                            <select
-                                                :id="`ticket-status-${ticket.id}`"
-                                                name="ticket_status_id"
+                                            <Button
+                                                type="button"
+                                                variant="ghost"
+                                                class="mb-2 w-full cursor-grab touch-none select-none active:cursor-grabbing"
                                                :disabled="
+                                                    busy ||
                                                    allowedTargetStatuses(
                                                        ticket,
-                                                    ).length === 0 || processing
+                                                    ).length === 0
                                                "
-                                                class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 min-w-44 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"
+                                                :aria-label="
+                                                    t('board.dragTicket', {
+                                                        key: ticket.ticket_key,
+                                                    })
+                                                "
+                                                aria-describedby="board-drag-hint"
+                                                @pointerdown="
+                                                    startDrag($event, ticket)
+                                                "
+                                                @click.prevent
+                                                @keydown.enter.prevent="
+                                                    focusStatus(ticket.id)
+                                                "
+                                                @keydown.space.prevent="
+                                                    focusStatus(ticket.id)
+                                                "
+                                                ><GripVertical
+                                                    aria-hidden="true"
+                                                />{{ t('board.drag') }}</Button
                                            >
-                                                <option
+                                            <Form
+                                                v-bind="
+                                                    move.form({
+                                                        project: project.id,
+                                                        ticket: ticket.id,
+                                                    })
+                                                "
+                                                v-slot="{ processing, errors }"
+                                                :error-bag="`board-ticket-${ticket.id}`"
+                                                :options="{
+                                                    preserveScroll: true,
+                                                }"
+                                                :on-before="
+                                                    () =>
+                                                        !busy && !draggedTicket
+                                                "
+                                                @start="menuPending = ticket.id"
+                                                @finish="menuPending = null"
+                                                class="grid min-w-0 gap-2"
+                                            >
+                                                <input
+                                                    type="hidden"
+                                                    name="redirect_to"
+                                                    value="board"
+                                                />
+                                                <label
+                                                    :for="`ticket-status-${ticket.id}`"
+                                                    class="text-caption text-muted-foreground font-semibold"
+                                                    >{{
+                                                        t('board.moveTicket', {
+                                                            key: ticket.ticket_key,
+                                                        })
+                                                    }}</label
+                                                >
+                                                <select
+                                                    :id="`ticket-status-${ticket.id}`"
+                                                    name="ticket_status_id"
+                                                    :disabled="
+                                                        busy ||
+                                                        processing ||
+                                                        allowedTargetStatuses(
+                                                            ticket,
+                                                        ).length === 0
+                                                    "
+                                                    :aria-invalid="
+                                                        !!errors.ticket_status_id ||
+                                                        undefined
+                                                    "
+                                                    :aria-describedby="
+                                                        errors.ticket_status_id
+                                                            ? `ticket-status-error-${ticket.id}`
+                                                            : undefined
+                                                    "
+                                                    class="border-input bg-card text-body min-h-control focus-visible:ring-ring/35 w-full min-w-0 rounded-md border px-3 py-2 focus-visible:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-60"
+                                                >
+                                                    <option
+                                                        v-if="
+                                                            allowedTargetStatuses(
+                                                                ticket,
+                                                            ).length === 0
+                                                        "
+                                                        value=""
+                                                    >
+                                                        {{ t('board.noMoves') }}
+                                                    </option>
+                                                    <option
+                                                        v-for="target in allowedTargetStatuses(
+                                                            ticket,
+                                                        )"
+                                                        :key="target.id"
+                                                        :value="target.id"
+                                                    >
+                                                        {{
+                                                            ticketStatusLabel(
+                                                                target,
+                                                                t(
+                                                                    'tickets.noStatus',
+                                                                ),
+                                                            )
+                                                        }}
+                                                    </option>
+                                                </select>
+                                                <InputError
+                                                    :id="`ticket-status-error-${ticket.id}`"
+                                                    :message="
+                                                        errors.ticket_status_id
+                                                    "
+                                                />
+                                                <Button
+                                                    type="submit"
+                                                    variant="outline"
+                                                    :disabled="
+                                                        busy ||
+                                                        processing ||
+                                                        allowedTargetStatuses(
+                                                            ticket,
+                                                        ).length === 0
+                                                    "
+                                                    >{{
+                                                        t(
+                                                            processing
+                                                                ? 'board.updatingStatus'
+                                                                : 'board.updateStatus',
+                                                        )
+                                                    }}</Button
+                                                >
+                                                <p
                                                    v-if="
                                                        allowedTargetStatuses(
                                                            ticket,
                                                        ).length === 0
                                                    "
-                                                    value=""
-                                                >
-                                                    No allowed moves
-                                                </option>
-                                                <option
-                                                    v-for="ticketStatus in allowedTargetStatuses(
-                                                        ticket,
-                                                    )"
-                                                    :key="ticketStatus.id"
-                                                    :value="ticketStatus.id"
+                                                    class="text-caption text-muted-foreground"
                                                >
                                                    {{
-                                                        ticketStatusLabel(
-                                                            ticketStatus,
-                                                            'Unknown status',
+                                                        t(
+                                                            'board.noMovesDescription',
                                                        )
                                                    }}
-                                                </option>
-                                            </select>
-                                            <Button
-                                                type="submit"
-                                                size="sm"
-                                                :disabled="
-                                                    processing ||
-                                                    allowedTargetStatuses(
-                                                        ticket,
-                                                    ).length === 0
-                                                "
-                                            >
-                                                Update status
-                                            </Button>
-                                        </div>
-                                        <p
-                                            v-if="
-                                                allowedTargetStatuses(ticket)
-                                                    .length === 0
-                                            "
-                                            class="text-muted-foreground text-xs"
-                                        >
-                                            This status does not allow moving
-                                            anywhere else.
-                                        </p>
-                                    </Form>
-                                </template>
-                            </TicketCard>
-                        </div>
-                    </CardContent>
-                </Card>
+                                                </p>
+                                            </Form>
+                                        </template>
+                                    </TicketCard>
+                                </li>
+                            </ul>
+                        </section>
+                    </section>
+                </section>
+            </template>
+            <div
+                v-if="draggedTicket"
+                class="bg-card fixed inset-x-0 bottom-0 z-40 border-t p-3 shadow-lg md:hidden"
+                data-board-mobile-targets
+            >
+                <p class="text-caption mb-2 font-semibold">
+                    {{ t('board.dropHint') }}
+                </p>
+                <div class="flex gap-2 overflow-x-auto" data-board-drag-scroll>
+                    <div
+                        v-for="column in columns"
+                        :key="column.id"
+                        :data-board-drop-column="column.id"
+                        :class="dropClasses(column.id)"
+                        class="text-body flex min-h-20 w-36 shrink-0 items-center rounded-md border p-3"
+                    >
+                        {{ column.name }}
+                    </div>
+                </div>
            </div>
+            <div
+                v-if="draggedTicket"
+                aria-hidden="true"
+                class="bg-primary text-primary-foreground pointer-events-none fixed z-50 max-w-48 rounded-md px-3 py-2 shadow-lg"
+                :style="{
+                    left: `${Math.max(0, dragX - 80)}px`,
+                    top: `${Math.max(0, dragY - 56)}px`,
+                }"
+            >
+                {{ draggedTicket.ticket_key }}
+            </div>
+            <p class="sr-only" aria-live="polite">
+                {{
+                    draggedTicket
+                        ? t('board.dragging', { key: draggedTicket.ticket_key })
+                        : ''
+                }}
+            </p>
+            <Dialog v-model:open="choiceOpen">
+                <DialogContent>
+                    <DialogHeader>
+                        <DialogTitle>{{ t('board.chooseStatus') }}</DialogTitle>
+                        <DialogDescription>{{
+                            t('board.chooseStatusDescription', {
+                                key: choiceTicket?.ticket_key ?? '',
+                            })
+                        }}</DialogDescription>
+                    </DialogHeader>
+                    <form class="grid gap-4" @submit.prevent="confirmMove">
+                        <label
+                            for="board-drop-status"
+                            class="text-body font-semibold"
+                            >{{ t('board.targetStatus') }}</label
+                        >
+                        <select
+                            id="board-drop-status"
+                            v-model="moveForm.ticket_status_id"
+                            class="border-input bg-card text-body min-h-control focus-visible:ring-ring/35 w-full rounded-md border px-3 py-2 focus-visible:outline-none focus-visible:ring-2"
+                        >
+                            <option
+                                v-for="target in choiceTargets"
+                                :key="target.id"
+                                :value="target.id"
+                            >
+                                {{
+                                    ticketStatusLabel(
+                                        target,
+                                        t('tickets.noStatus'),
+                                    )
+                                }}
+                            </option>
+                        </select>
+                        <DialogFooter>
+                            <Button
+                                type="button"
+                                variant="outline"
+                                @click="choiceOpen = false"
+                                >{{ t('common.cancel') }}</Button
+                            >
+                            <Button
+                                type="submit"
+                                :disabled="busy || choiceTargets.length === 0"
+                                >{{ t('board.updateStatus') }}</Button
+                            >
+                        </DialogFooter>
+                    </form>
+                </DialogContent>
+            </Dialog>
        </div>
    </AppLayout>
 </template>
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { Head, Link, useForm, useRemember } from '@inertiajs/vue3';
-import { computed, toRef, unref } from 'vue';
+import { Head, Link, useForm } from '@inertiajs/vue3';
+import { useSessionStorage } from '@vueuse/core';
+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 TicketFormFields from '@/components/tickets/TicketFormFields.vue';
+import { useLocalization } from '@/composables/useLocalization';
 import FormFeedback from '@/components/FormFeedback.vue';
 import { useFormProtection } from '@/composables/useFormProtection';
 import { Badge } from '@/components/ui/badge';
@@ -15,32 +16,30 @@ import {
    CardHeader,
    CardTitle,
 } from '@/components/ui/card';
-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 AcceptanceCriteriaChecklist from '@/components/tickets/AcceptanceCriteriaChecklist.vue';
+import type { AcceptanceCriteriaModel } from '@/types/models/acceptance-criteria-model';
 import { index as backlogIndex } from '@/routes/projects/backlog';
 import { index as boardIndex } from '@/routes/projects/board';
 import { index, show } from '@/routes/projects/index';
 import { metadata as metadataSettings } from '@/routes/projects/settings';
 import type { BreadcrumbItem, ProjectTicketCreatePageProps } from '@/types';
-import type { TicketStatusModel } from '@/types/models/ticket-status-model';

 const props = defineProps<ProjectTicketCreatePageProps>();
+const { t } = useLocalization();

 const returnHref =
    props.source === 'board'
        ? boardIndex(props.project.id)
        : backlogIndex(props.project.id);
 const returnLabel =
-    props.source === 'board' ? 'Back to board' : 'Back to backlog';
+    props.source === 'board'
+        ? t('ticketForm.backToBoard')
+        : t('ticketForm.backToBacklog');

 const breadcrumbs: BreadcrumbItem[] = [
    {
-        title: 'Projects',
+        title: t('navigation.projects'),
        href: index(),
    },
    {
@@ -48,36 +47,31 @@ const breadcrumbs: BreadcrumbItem[] = [
        href: show(props.project.id),
    },
    {
-        title: props.source === 'board' ? 'Board' : 'Backlog',
+        title:
+            props.source === 'board'
+                ? t('navigation.board')
+                : t('navigation.backlog'),
        href: returnHref,
    },
    {
-        title: 'Create ticket',
+        title: t('ticketForm.create'),
        href: ProjectTicketController.create({
            project: props.project.id,
        }),
    },
 ];

-const hasTicketMetadata =
-    props.ticketTypes.length > 0 &&
-    props.ticketPriorities.length > 0 &&
-    props.ticketStatusOptions.length > 0;
+const hasTicketMetadata = computed(
+    () =>
+        props.ticketTypes.length > 0 &&
+        props.ticketPriorities.length > 0 &&
+        props.ticketStatusOptions.length > 0,
+);

 const draftKey = `projects:${props.project.id}:tickets:create`;
-const acceptanceCriteriaDraft = useRemember(
-    { checklist: '' },
-    `${draftKey}:checklist`,
-);
-const acceptanceCriteriaChecklist = toRef(
-    unref(acceptanceCriteriaDraft),
-    'checklist',
-);
-
-const form = useForm(draftKey, {
-    acceptance_criteria: buildAcceptanceCriteria(
-        acceptanceCriteriaChecklist.value,
-    ),
+const draftGeneration = useSessionStorage(`${draftKey}:generation`, 0);
+const form = useForm(`${draftKey}:${draftGeneration.value}`, {
+    acceptance_criteria: [] as AcceptanceCriteriaModel,
    assignee_user_id: '',
    description: '',
    parent_ticket_id: '',
@@ -90,13 +84,16 @@ const form = useForm(draftKey, {
    title: '',
 });

-const protection = useFormProtection(form, {
-    isDirty: () => form.isDirty || acceptanceCriteriaChecklist.value !== '',
-});
-
-const acceptanceCriteriaPreviewItems = computed(() =>
-    parseChecklistLines(acceptanceCriteriaChecklist.value),
-);
+const isDirty = computed(() => form.isDirty);
+const protection = useFormProtection(form);
+const reset = (): void => {
+    if (form.processing || !protection.confirmLeave()) {
+        return;
+    }
+    form.reset();
+    form.clearErrors();
+    protection.clearFeedback();
+};

 const acceptanceCriteriaError = computed(() => {
    return (
@@ -109,39 +106,35 @@ const acceptanceCriteriaError = computed(() => {
 });

 const submit = (): void => {
-    form.acceptance_criteria = buildAcceptanceCriteria(
-        acceptanceCriteriaChecklist.value,
-    );
+    if (!hasTicketMetadata.value || form.processing) {
+        return;
+    }

    protection.submit(
        ProjectTicketController.store({ project: props.project.id }),
        {
            preserveScroll: true,
+            onSuccess: () => {
+                // The source page is unmounted before this callback, so its storage watcher has stopped.
+                window.sessionStorage.setItem(
+                    `${draftKey}:generation`,
+                    String(draftGeneration.value + 1),
+                );
+                draftGeneration.value++;
+                form.reset();
+            },
        },
    );
 };
-
-const ticketStatusLabel = (ticketStatus: TicketStatusModel): string => {
-    if (
-        ticketStatus.board_column === null ||
-        ticketStatus.board_column === undefined
-    ) {
-        return ticketStatus.name;
-    }
-
-    if (ticketStatus.board_column.name === ticketStatus.name) {
-        return ticketStatus.name;
-    }
-
-    return `${ticketStatus.board_column.name} / ${ticketStatus.name}`;
-};
 </script>

 <template>
    <AppLayout :breadcrumbs="breadcrumbs">
-        <Head :title="`Create ${project.name} ticket`" />
+        <Head :title="t('ticketForm.pageTitle', { project: project.name })" />

-        <div class="flex flex-1 flex-col gap-6 p-4">
+        <div
+            class="mx-auto flex w-full min-w-0 max-w-5xl flex-1 flex-col gap-6 p-4 sm:p-6 lg:p-8"
+        >
            <div
                class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
            >
@@ -149,10 +142,16 @@ const ticketStatusLabel = (ticketStatus: TicketStatusModel): string => {
                    <Badge variant="outline" class="px-3 py-1">
                        {{ project.key }}
                    </Badge>
-                    <Heading
-                        title="Create ticket"
-                        :description="`Add a ticket to ${project.name}.`"
-                    />
+                    <h1 class="text-headline font-semibold tracking-tight">
+                        {{ t('ticketForm.create') }}
+                    </h1>
+                    <p class="text-muted-foreground text-sm">
+                        {{
+                            t('ticketForm.createDescription', {
+                                project: project.name,
+                            })
+                        }}
+                    </p>
                </div>

                <div class="flex flex-wrap gap-3">
@@ -160,7 +159,9 @@ const ticketStatusLabel = (ticketStatus: TicketStatusModel): string => {
                        <Link :href="returnHref">{{ returnLabel }}</Link>
                    </Button>
                    <Button as-child variant="outline">
-                        <Link :href="show(project.id)">Back to project</Link>
+                        <Link :href="show(project.id)">{{
+                            t('ticketDetail.backToProject')
+                        }}</Link>
                    </Button>
                </div>
            </div>
@@ -174,9 +175,9 @@ const ticketStatusLabel = (ticketStatus: TicketStatusModel): string => {

            <Card v-if="hasTicketMetadata">
                <CardHeader>
-                    <CardTitle>Ticket details</CardTitle>
+                    <CardTitle>{{ t('ticketForm.details') }}</CardTitle>
                    <CardDescription>
-                        The ticket key is assigned after creation.
+                        {{ t('ticketForm.keyAssigned') }}
                    </CardDescription>
                </CardHeader>

@@ -186,258 +187,58 @@ const ticketStatusLabel = (ticketStatus: TicketStatusModel): string => {
                            :state="protection.state.value"
                            @retry="submit"
                        />
-                        <div class="grid gap-2">
-                            <Label for="title">Title</Label>
-                            <Input
-                                id="title"
-                                v-model="form.title"
-                                :invalid="Boolean(form.errors.title)"
-                                aria-describedby="title-error"
-                                required
-                                autofocus
-                                :disabled="form.processing"
-                                placeholder="Implement repository sync"
-                            />
-                            <InputError
-                                id="title-error"
-                                :message="form.errors.title"
-                            />
-                        </div>
-
-                        <div
-                            class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_20rem]"
+                        <TicketFormFields
+                            v-model:title="form.title"
+                            v-model:description="form.description"
+                            v-model:type="form.ticket_type_id"
+                            v-model:priority="form.ticket_priority_id"
+                            v-model:status="form.ticket_status_id"
+                            v-model:assignee="form.assignee_user_id"
+                            v-model:parent="form.parent_ticket_id"
+                            v-model:points="form.story_points"
+                            :project="project"
+                            :ticket-types="ticketTypes"
+                            :ticket-priorities="ticketPriorities"
+                            :ticket-status-options="ticketStatusOptions"
+                            :users="users"
+                            :parent-ticket-options="parentTicketOptions"
+                            :errors="form.errors"
+                            :disabled="form.processing"
+                            autofocus
                        >
-                            <div class="grid gap-6">
-                                <div class="grid gap-2">
-                                    <Label for="description">Description</Label>
-                                    <textarea
-                                        id="description"
-                                        v-model="form.description"
-                                        rows="4"
-                                        :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="Describe the expected behavior and relevant context."
-                                    />
-                                    <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="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>
-                            </div>
-
-                            <div class="grid h-fit 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="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="String(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="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="String(ticketPriority.id)"
-                                        >
-                                            {{ ticketPriority.name }}
-                                        </option>
-                                    </select>
-                                    <InputError
-                                        :message="
-                                            form.errors.ticket_priority_id
-                                        "
-                                    />
-                                </div>
-
-                                <div class="grid gap-2">
-                                    <Label for="ticket_status_id">Status</Label>
-                                    <select
-                                        id="ticket_status_id"
-                                        v-model="form.ticket_status_id"
-                                        :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"
-                                    >
-                                        <option
-                                            v-for="ticketStatus in ticketStatusOptions"
-                                            :key="ticketStatus.id"
-                                            :value="String(ticketStatus.id)"
-                                        >
-                                            {{
-                                                ticketStatusLabel(ticketStatus)
-                                            }}
-                                        </option>
-                                    </select>
-                                    <InputError
-                                        :message="form.errors.ticket_status_id"
-                                    />
-                                </div>
-
-                                <div class="grid gap-2">
-                                    <Label for="assignee_user_id">
-                                        Assignee
-                                    </Label>
-                                    <select
-                                        id="assignee_user_id"
-                                        v-model="form.assignee_user_id"
-                                        :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"
-                                    >
-                                        <option value="">Unassigned</option>
-                                        <option
-                                            v-for="user in users"
-                                            :key="user.id"
-                                            :value="String(user.id)"
-                                        >
-                                            {{ user.name }}
-                                        </option>
-                                    </select>
-                                    <InputError
-                                        :message="form.errors.assignee_user_id"
-                                    />
-                                </div>
-
-                                <div class="grid gap-2">
-                                    <Label for="parent_ticket_id">
-                                        Parent ticket
-                                    </Label>
-                                    <select
-                                        id="parent_ticket_id"
-                                        v-model="form.parent_ticket_id"
-                                        :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"
-                                    >
-                                        <option value="">
-                                            No parent ticket
-                                        </option>
-                                        <option
-                                            v-for="parentTicketOption in parentTicketOptions"
-                                            :key="parentTicketOption.id"
-                                            :value="
-                                                String(parentTicketOption.id)
-                                            "
-                                        >
-                                            {{
-                                                `${parentTicketOption.ticket_key} - ${parentTicketOption.title}`
-                                            }}
-                                        </option>
-                                    </select>
-                                    <InputError
-                                        :message="form.errors.parent_ticket_id"
-                                    />
-                                </div>
-
-                                <div
-                                    v-if="project.show_story_points"
-                                    class="grid gap-2"
-                                >
-                                    <Label for="story_points">
-                                        Estimated story points
-                                    </Label>
-                                    <Input
-                                        id="story_points"
-                                        v-model="form.story_points"
-                                        type="number"
-                                        step="1"
-                                        :disabled="form.processing"
-                                    />
-                                    <InputError
-                                        :message="form.errors.story_points"
-                                    />
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="flex flex-wrap items-center gap-3">
-                            <Button type="submit" :disabled="form.processing">
-                                Create ticket
-                            </Button>
-                            <Button as-child variant="outline">
-                                <Link :href="returnHref">
-                                    {{ returnLabel }}
-                                </Link>
-                            </Button>
+                            <template #content>
+                                <AcceptanceCriteriaChecklist
+                                    v-model="form.acceptance_criteria"
+                                    :disabled="form.processing"
+                                    :error="acceptanceCriteriaError"
+                                />
+                            </template>
+                        </TicketFormFields>
+                        <div
+                            class="flex flex-wrap items-center gap-3 border-t pt-5"
+                        >
+                            <Button type="submit" :disabled="form.processing">{{
+                                form.processing
+                                    ? t('ticketForm.creating')
+                                    : t('ticketForm.create')
+                            }}</Button>
+                            <Button
+                                type="button"
+                                variant="outline"
+                                :disabled="form.processing || !isDirty"
+                                @click="reset"
+                                >{{ t('ticketForm.reset') }}</Button
+                            >
+                            <p
+                                role="status"
+                                class="text-muted-foreground text-sm"
+                            >
+                                {{
+                                    isDirty
+                                        ? t('ticketForm.unsaved')
+                                        : t('ticketForm.ready')
+                                }}
+                            </p>
                        </div>
                    </form>
                </CardContent>
@@ -446,13 +247,12 @@ const ticketStatusLabel = (ticketStatus: TicketStatusModel): string => {
            <Card v-else>
                <CardContent class="flex flex-col gap-4 p-6 text-sm">
                    <p class="text-muted-foreground">
-                        Ticket creation needs at least one type, one priority,
-                        and one status.
+                        {{ t('ticketForm.metadataRequired') }}
                    </p>
                    <div>
                        <Button as-child variant="outline">
                            <Link :href="metadataSettings(project.id)">
-                                Open ticket settings
+                                {{ t('ticketForm.openSettings') }}
                            </Link>
                        </Button>
                    </div>
--- a/Show More
+++ b/Show More