@escalated-dev/escalated 0.8.0 → 0.11.1

package/src/pages/Admin/Reports/SlaTrends.vue

@@ -1,183 +1,183 @@
-<script setup>
-import EscalatedLayout from '../../../components/EscalatedLayout.vue';
-import KpiCard from '../../../components/KpiCard.vue';
-import ReportChart from '../../../components/ReportChart.vue';
-import PeriodSelector from '../../../components/PeriodSelector.vue';
-import ReportExportButton from '../../../components/ReportExportButton.vue';
-import { router, Link } from '@inertiajs/vue3';
-import { ref, computed } from 'vue';
-
-const props = defineProps({
-    period_days: { type: Number, default: 30 },
-    breach_trend: { type: Array, default: () => [] },
-    breach_by_type_trend: { type: Array, default: () => [] },
-    breach_by_department: { type: Array, default: () => [] },
-    breach_by_priority: { type: Array, default: () => [] },
-    at_risk_tickets: { type: Array, default: () => [] },
-    total_breaches: { type: Number, default: 0 },
-    breach_rate: { type: Number, default: 0 },
-    first_response_breaches: { type: Number, default: 0 },
-    resolution_breaches: { type: Number, default: 0 },
-});
-
-const periodDays = ref(props.period_days);
-
-function changePeriod(days) {
-    periodDays.value = days;
-    router.get(route('escalated.admin.reports.sla-trends'), { days }, { preserveState: true });
-}
-
-const riskCategories = computed(() => {
-    const tickets = props.at_risk_tickets || [];
-    return {
-        critical: tickets.filter((t) => t.hours_remaining <= 1),
-        warning: tickets.filter((t) => t.hours_remaining > 1 && t.hours_remaining <= 4),
-        watch: tickets.filter((t) => t.hours_remaining > 4 && t.hours_remaining <= 8),
-    };
-});
-</script>
-
-<template>
-    <EscalatedLayout title="SLA Breach Trends">
-        <div class="mb-6 flex items-center justify-between">
-            <PeriodSelector :model-value="periodDays" @update:model-value="changePeriod" />
-            <div class="flex items-center gap-3">
-                <ReportExportButton report-name="sla-trends" :period-days="periodDays" />
-                <Link
-                    :href="route('escalated.admin.reports')"
-                    class="text-sm text-[var(--esc-panel-text-muted)] hover:text-[var(--esc-panel-text-secondary)]"
-                >
-                    &larr; Back
-                </Link>
-            </div>
-        </div>
-
-        <!-- KPI Cards -->
-        <div class="mb-6 grid grid-cols-2 gap-4 md:grid-cols-4">
-            <KpiCard
-                label="Total Breaches"
-                :value="total_breaches"
-                :icon="'M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z'"
-            />
-            <KpiCard
-                label="Breach Rate"
-                :value="`${breach_rate}%`"
-                :icon="'M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75z'"
-            />
-            <KpiCard
-                label="FRT Breaches"
-                :value="first_response_breaches"
-                :icon="'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z'"
-            />
-            <KpiCard
-                label="Resolution Breaches"
-                :value="resolution_breaches"
-                :icon="'M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z'"
-            />
-        </div>
-
-        <!-- Charts -->
-        <div class="mb-6 grid grid-cols-1 gap-6 lg:grid-cols-2">
-            <ReportChart type="line" title="Breach Count Over Time" :data="breach_trend" :colors="['#ef4444']" />
-            <ReportChart
-                type="stacked-bar"
-                title="First Response vs Resolution Breaches"
-                :data="breach_by_type_trend"
-                :colors="['#f59e0b', '#ef4444']"
-            />
-            <ReportChart
-                type="bar"
-                title="Breach Rate by Department"
-                :data="breach_by_department"
-                :colors="['#8b5cf6']"
-            />
-            <ReportChart type="bar" title="Breach Rate by Priority" :data="breach_by_priority" :colors="['#06b6d4']" />
-        </div>
-
-        <!-- At Risk Panel -->
-        <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-5">
-            <h3 class="mb-4 text-sm font-semibold text-[var(--esc-panel-text-secondary)]">
-                At Risk - Approaching SLA Breach
-            </h3>
-            <div v-if="at_risk_tickets?.length" class="space-y-4">
-                <!-- Critical: < 1h -->
-                <div v-if="riskCategories.critical.length">
-                    <div class="mb-2 flex items-center gap-2">
-                        <span class="inline-block h-2 w-2 rounded-full bg-red-500"></span>
-                        <span class="text-xs font-semibold uppercase tracking-wider text-red-400"
-                            >Critical (&lt;1h)</span
-                        >
-                    </div>
-                    <div class="space-y-1">
-                        <div
-                            v-for="ticket in riskCategories.critical"
-                            :key="ticket.id"
-                            class="flex items-center justify-between rounded-lg bg-red-500/5 px-3 py-2 border border-red-500/10"
-                        >
-                            <div class="flex items-center gap-3">
-                                <span class="font-mono text-xs text-red-400">{{ ticket.reference }}</span>
-                                <span class="truncate text-sm text-[var(--esc-panel-text-secondary)]">{{
-                                    ticket.subject
-                                }}</span>
-                            </div>
-                            <span class="text-xs font-bold text-red-400">{{ ticket.hours_remaining }}h remaining</span>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Warning: 1-4h -->
-                <div v-if="riskCategories.warning.length">
-                    <div class="mb-2 flex items-center gap-2">
-                        <span class="inline-block h-2 w-2 rounded-full bg-amber-500"></span>
-                        <span class="text-xs font-semibold uppercase tracking-wider text-amber-400"
-                            >Warning (1-4h)</span
-                        >
-                    </div>
-                    <div class="space-y-1">
-                        <div
-                            v-for="ticket in riskCategories.warning"
-                            :key="ticket.id"
-                            class="flex items-center justify-between rounded-lg bg-amber-500/5 px-3 py-2 border border-amber-500/10"
-                        >
-                            <div class="flex items-center gap-3">
-                                <span class="font-mono text-xs text-amber-400">{{ ticket.reference }}</span>
-                                <span class="truncate text-sm text-[var(--esc-panel-text-secondary)]">{{
-                                    ticket.subject
-                                }}</span>
-                            </div>
-                            <span class="text-xs font-bold text-amber-400"
-                                >{{ ticket.hours_remaining }}h remaining</span
-                            >
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Watch: 4-8h -->
-                <div v-if="riskCategories.watch.length">
-                    <div class="mb-2 flex items-center gap-2">
-                        <span class="inline-block h-2 w-2 rounded-full bg-blue-500"></span>
-                        <span class="text-xs font-semibold uppercase tracking-wider text-blue-400">Watch (4-8h)</span>
-                    </div>
-                    <div class="space-y-1">
-                        <div
-                            v-for="ticket in riskCategories.watch"
-                            :key="ticket.id"
-                            class="flex items-center justify-between rounded-lg bg-blue-500/5 px-3 py-2 border border-blue-500/10"
-                        >
-                            <div class="flex items-center gap-3">
-                                <span class="font-mono text-xs text-blue-400">{{ ticket.reference }}</span>
-                                <span class="truncate text-sm text-[var(--esc-panel-text-secondary)]">{{
-                                    ticket.subject
-                                }}</span>
-                            </div>
-                            <span class="text-xs font-bold text-blue-400">{{ ticket.hours_remaining }}h remaining</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div v-else class="py-6 text-center text-sm text-[var(--esc-panel-text-muted)]">
-                No tickets currently at risk of breaching SLA.
-            </div>
-        </div>
-    </EscalatedLayout>
-</template>
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import KpiCard from '../../../components/KpiCard.vue';
+import ReportChart from '../../../components/ReportChart.vue';
+import PeriodSelector from '../../../components/PeriodSelector.vue';
+import ReportExportButton from '../../../components/ReportExportButton.vue';
+import { router, Link } from '@inertiajs/vue3';
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+    period_days: { type: Number, default: 30 },
+    breach_trend: { type: Array, default: () => [] },
+    breach_by_type_trend: { type: Array, default: () => [] },
+    breach_by_department: { type: Array, default: () => [] },
+    breach_by_priority: { type: Array, default: () => [] },
+    at_risk_tickets: { type: Array, default: () => [] },
+    total_breaches: { type: Number, default: 0 },
+    breach_rate: { type: Number, default: 0 },
+    first_response_breaches: { type: Number, default: 0 },
+    resolution_breaches: { type: Number, default: 0 },
+});
+
+const periodDays = ref(props.period_days);
+
+function changePeriod(days) {
+    periodDays.value = days;
+    router.get(route('escalated.admin.reports.sla-trends'), { days }, { preserveState: true });
+}
+
+const riskCategories = computed(() => {
+    const tickets = props.at_risk_tickets || [];
+    return {
+        critical: tickets.filter((t) => t.hours_remaining <= 1),
+        warning: tickets.filter((t) => t.hours_remaining > 1 && t.hours_remaining <= 4),
+        watch: tickets.filter((t) => t.hours_remaining > 4 && t.hours_remaining <= 8),
+    };
+});
+</script>
+
+<template>
+    <EscalatedLayout title="SLA Breach Trends">
+        <div class="mb-6 flex items-center justify-between">
+            <PeriodSelector :model-value="periodDays" @update:model-value="changePeriod" />
+            <div class="flex items-center gap-3">
+                <ReportExportButton report-name="sla-trends" :period-days="periodDays" />
+                <Link
+                    :href="route('escalated.admin.reports')"
+                    class="text-sm text-[var(--esc-panel-text-muted)] hover:text-[var(--esc-panel-text-secondary)]"
+                >
+                    &larr; Back
+                </Link>
+            </div>
+        </div>
+
+        <!-- KPI Cards -->
+        <div class="mb-6 grid grid-cols-2 gap-4 md:grid-cols-4">
+            <KpiCard
+                label="Total Breaches"
+                :value="total_breaches"
+                :icon="'M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z'"
+            />
+            <KpiCard
+                label="Breach Rate"
+                :value="`${breach_rate}%`"
+                :icon="'M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75z'"
+            />
+            <KpiCard
+                label="FRT Breaches"
+                :value="first_response_breaches"
+                :icon="'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z'"
+            />
+            <KpiCard
+                label="Resolution Breaches"
+                :value="resolution_breaches"
+                :icon="'M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z'"
+            />
+        </div>
+
+        <!-- Charts -->
+        <div class="mb-6 grid grid-cols-1 gap-6 lg:grid-cols-2">
+            <ReportChart type="line" title="Breach Count Over Time" :data="breach_trend" :colors="['#ef4444']" />
+            <ReportChart
+                type="stacked-bar"
+                title="First Response vs Resolution Breaches"
+                :data="breach_by_type_trend"
+                :colors="['#f59e0b', '#ef4444']"
+            />
+            <ReportChart
+                type="bar"
+                title="Breach Rate by Department"
+                :data="breach_by_department"
+                :colors="['#8b5cf6']"
+            />
+            <ReportChart type="bar" title="Breach Rate by Priority" :data="breach_by_priority" :colors="['#06b6d4']" />
+        </div>
+
+        <!-- At Risk Panel -->
+        <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-5">
+            <h3 class="mb-4 text-sm font-semibold text-[var(--esc-panel-text-secondary)]">
+                At Risk - Approaching SLA Breach
+            </h3>
+            <div v-if="at_risk_tickets?.length" class="space-y-4">
+                <!-- Critical: < 1h -->
+                <div v-if="riskCategories.critical.length">
+                    <div class="mb-2 flex items-center gap-2">
+                        <span class="inline-block h-2 w-2 rounded-full bg-red-500"></span>
+                        <span class="text-xs font-semibold uppercase tracking-wider text-red-400"
+                            >Critical (&lt;1h)</span
+                        >
+                    </div>
+                    <div class="space-y-1">
+                        <div
+                            v-for="ticket in riskCategories.critical"
+                            :key="ticket.id"
+                            class="flex items-center justify-between rounded-lg bg-red-500/5 px-3 py-2 border border-red-500/10"
+                        >
+                            <div class="flex items-center gap-3">
+                                <span class="font-mono text-xs text-red-400">{{ ticket.reference }}</span>
+                                <span class="truncate text-sm text-[var(--esc-panel-text-secondary)]">{{
+                                    ticket.subject
+                                }}</span>
+                            </div>
+                            <span class="text-xs font-bold text-red-400">{{ ticket.hours_remaining }}h remaining</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Warning: 1-4h -->
+                <div v-if="riskCategories.warning.length">
+                    <div class="mb-2 flex items-center gap-2">
+                        <span class="inline-block h-2 w-2 rounded-full bg-amber-500"></span>
+                        <span class="text-xs font-semibold uppercase tracking-wider text-amber-400"
+                            >Warning (1-4h)</span
+                        >
+                    </div>
+                    <div class="space-y-1">
+                        <div
+                            v-for="ticket in riskCategories.warning"
+                            :key="ticket.id"
+                            class="flex items-center justify-between rounded-lg bg-amber-500/5 px-3 py-2 border border-amber-500/10"
+                        >
+                            <div class="flex items-center gap-3">
+                                <span class="font-mono text-xs text-amber-400">{{ ticket.reference }}</span>
+                                <span class="truncate text-sm text-[var(--esc-panel-text-secondary)]">{{
+                                    ticket.subject
+                                }}</span>
+                            </div>
+                            <span class="text-xs font-bold text-amber-400"
+                                >{{ ticket.hours_remaining }}h remaining</span
+                            >
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Watch: 4-8h -->
+                <div v-if="riskCategories.watch.length">
+                    <div class="mb-2 flex items-center gap-2">
+                        <span class="inline-block h-2 w-2 rounded-full bg-blue-500"></span>
+                        <span class="text-xs font-semibold uppercase tracking-wider text-blue-400">Watch (4-8h)</span>
+                    </div>
+                    <div class="space-y-1">
+                        <div
+                            v-for="ticket in riskCategories.watch"
+                            :key="ticket.id"
+                            class="flex items-center justify-between rounded-lg bg-blue-500/5 px-3 py-2 border border-blue-500/10"
+                        >
+                            <div class="flex items-center gap-3">
+                                <span class="font-mono text-xs text-blue-400">{{ ticket.reference }}</span>
+                                <span class="truncate text-sm text-[var(--esc-panel-text-secondary)]">{{
+                                    ticket.subject
+                                }}</span>
+                            </div>
+                            <span class="text-xs font-bold text-blue-400">{{ ticket.hours_remaining }}h remaining</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div v-else class="py-6 text-center text-sm text-[var(--esc-panel-text-muted)]">
+                No tickets currently at risk of breaching SLA.
+            </div>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Admin/Settings/DatabaseConnection.vue

@@ -0,0 +1,228 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { useForm, router } from '@inertiajs/vue3';
+import { computed, ref } from 'vue';
+
+/**
+ * Which database Escalated's own tables live on.
+ *
+ * Two things about this screen are deliberate and worth not undoing.
+ *
+ * It refuses a switch to a database with no Escalated tables. That case does
+ * not error at runtime — the panel simply comes up with no tickets, no
+ * departments and no settings, which reads exactly like data loss. The server
+ * refuses it, and the option is disabled here so the mistake is hard to make
+ * in the first place.
+ *
+ * And when `escalated.connection` is set in config or .env, the whole form is
+ * read-only. That value is deployed infrastructure; a web form must not be
+ * able to quietly disagree with it.
+ */
+const props = defineProps({
+    connections: { type: Array, default: () => [] },
+    current: { type: String, default: null },
+    hostDefault: { type: String, default: null },
+    pinnedByConfig: { type: Boolean, default: false },
+    tablePrefix: { type: String, default: 'escalated_' },
+});
+
+const form = useForm({
+    connection: props.current ?? '',
+});
+
+const testing = ref(null);
+
+const active = computed(() => props.connections.find((c) => c.is_current) ?? null);
+
+const selected = computed(
+    () => props.connections.find((c) => c.name === (form.connection || props.hostDefault)) ?? null,
+);
+
+const isChanging = computed(() => (form.connection || null) !== (props.current || null));
+
+function submit() {
+    if (props.pinnedByConfig) return;
+    form.post(route('escalated.admin.settings.database.update'), { preserveScroll: true });
+}
+
+function test(name) {
+    testing.value = name;
+
+    router.post(
+        route('escalated.admin.settings.database.test'),
+        { connection: name },
+        {
+            preserveScroll: true,
+            preserveState: false,
+            onFinish: () => {
+                testing.value = null;
+            },
+        },
+    );
+}
+
+function statusLabel(connection) {
+    if (!connection.reachable) return 'Unreachable';
+    if (!connection.migrated) return 'Not migrated';
+    return 'Ready';
+}
+
+function statusClass(connection) {
+    if (!connection.reachable) return 'text-[var(--esc-danger)]';
+    if (!connection.migrated) return 'text-[var(--esc-warning)]';
+    return 'text-[var(--esc-success)]';
+}
+
+function formatCount(value) {
+    return value === null || value === undefined ? null : value.toLocaleString();
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Database Connection">
+        <div class="mx-auto max-w-3xl space-y-6">
+            <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6">
+                <h3 class="mb-1 text-sm font-semibold text-[var(--esc-panel-text)]">Current connection</h3>
+                <p class="mb-5 text-xs text-[var(--esc-panel-text-muted)]">
+                    Where Escalated's own tables (<code>{{ tablePrefix }}*</code>) are read and written. Your users
+                    table is not affected — it stays wherever your application keeps it.
+                </p>
+
+                <dl v-if="active" class="grid grid-cols-2 gap-x-6 gap-y-3 text-sm">
+                    <dt class="text-[var(--esc-panel-text-muted)]">Connection</dt>
+                    <dd class="font-medium text-[var(--esc-panel-text)]">
+                        {{ active.name }}
+                        <span v-if="active.is_host_default" class="text-xs text-[var(--esc-panel-text-muted)]">
+                            (application default)
+                        </span>
+                    </dd>
+
+                    <dt class="text-[var(--esc-panel-text-muted)]">Driver</dt>
+                    <dd class="text-[var(--esc-panel-text-secondary)]">{{ active.driver ?? '—' }}</dd>
+
+                    <dt class="text-[var(--esc-panel-text-muted)]">Database</dt>
+                    <dd class="break-all text-[var(--esc-panel-text-secondary)]">{{ active.database ?? '—' }}</dd>
+
+                    <dt class="text-[var(--esc-panel-text-muted)]">Tickets stored</dt>
+                    <dd class="text-[var(--esc-panel-text-secondary)]">
+                        {{ formatCount(active.ticket_count) ?? '—' }}
+                    </dd>
+                </dl>
+            </div>
+
+            <div
+                v-if="pinnedByConfig"
+                class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface-alt)] p-4 text-sm text-[var(--esc-panel-text-secondary)]"
+            >
+                This connection is set in your application config (<code>escalated.connection</code> /
+                <code>ESCALATED_DB_CONNECTION</code>) and cannot be changed from here. Edit it where it is deployed, so
+                the panel and your configuration cannot disagree.
+            </div>
+
+            <form v-else class="space-y-6" @submit.prevent="submit">
+                <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6">
+                    <h3 class="mb-1 text-sm font-semibold text-[var(--esc-panel-text)]">Change connection</h3>
+                    <p class="mb-5 text-xs text-[var(--esc-panel-text-muted)]">
+                        Only connections already carrying Escalated's tables can be selected. Run the package migrations
+                        against a database before pointing Escalated at it.
+                    </p>
+
+                    <div class="space-y-2">
+                        <label
+                            v-for="connection in connections"
+                            :key="connection.name"
+                            :class="[
+                                'flex items-start gap-3 rounded-lg border p-3 transition',
+                                connection.migrated
+                                    ? 'cursor-pointer border-[var(--esc-panel-border)] hover:bg-[var(--esc-panel-surface-alt)]'
+                                    : 'cursor-not-allowed border-[var(--esc-panel-border)] opacity-60',
+                            ]"
+                        >
+                            <input
+                                v-model="form.connection"
+                                type="radio"
+                                :value="connection.is_host_default ? '' : connection.name"
+                                :disabled="!connection.migrated"
+                                class="mt-1"
+                            />
+                            <span class="min-w-0 flex-1">
+                                <span class="flex flex-wrap items-center gap-2">
+                                    <span class="text-sm font-medium text-[var(--esc-panel-text)]">
+                                        {{ connection.name }}
+                                    </span>
+                                    <span
+                                        v-if="connection.is_host_default"
+                                        class="text-xs text-[var(--esc-panel-text-muted)]"
+                                    >
+                                        application default
+                                    </span>
+                                    <span :class="['text-xs font-medium', statusClass(connection)]">
+                                        {{ statusLabel(connection) }}
+                                    </span>
+                                </span>
+                                <span class="mt-0.5 block text-xs text-[var(--esc-panel-text-muted)]">
+                                    {{ connection.driver ?? 'unknown driver' }} ·
+                                    {{ connection.database ?? 'no database configured' }}
+                                    <template v-if="connection.ticket_count !== null">
+                                        · {{ formatCount(connection.ticket_count) }} tickets
+                                    </template>
+                                </span>
+                                <span
+                                    v-if="connection.error"
+                                    class="mt-1 block break-all text-xs text-[var(--esc-danger)]"
+                                >
+                                    {{ connection.error }}
+                                </span>
+                                <span
+                                    v-else-if="!connection.migrated"
+                                    class="mt-1 block text-xs text-[var(--esc-panel-text-muted)]"
+                                >
+                                    No Escalated tables here yet. Switching would show an empty panel, so it is
+                                    disabled.
+                                </span>
+                            </span>
+                            <button
+                                type="button"
+                                class="shrink-0 rounded-md border border-[var(--esc-panel-border-input)] px-2 py-1 text-xs text-[var(--esc-panel-text-secondary)]"
+                                :disabled="testing === connection.name"
+                                @click.prevent="test(connection.name)"
+                            >
+                                {{ testing === connection.name ? 'Testing…' : 'Test' }}
+                            </button>
+                        </label>
+                    </div>
+
+                    <p v-if="form.errors.connection" class="mt-3 text-xs text-[var(--esc-danger)]">
+                        {{ form.errors.connection }}
+                    </p>
+                </div>
+
+                <div
+                    v-if="isChanging"
+                    class="rounded-xl border border-[var(--esc-warning)] bg-[var(--esc-panel-surface-alt)] p-4 text-sm text-[var(--esc-panel-text-secondary)]"
+                >
+                    <p class="font-medium text-[var(--esc-panel-text)]">This does not move any data.</p>
+                    <p class="mt-1 text-xs">
+                        Escalated will start reading and writing
+                        <strong>{{ selected?.name ?? hostDefault }}</strong
+                        >, which currently holds
+                        <strong>{{ formatCount(selected?.ticket_count) ?? 'an unknown number of' }}</strong> tickets.
+                        The <strong>{{ formatCount(active?.ticket_count) ?? 'existing' }}</strong> tickets on
+                        <strong>{{ active?.name }}</strong> stay where they are and will no longer be visible in the
+                        panel.
+                    </p>
+                </div>
+
+                <div class="flex justify-end">
+                    <button
+                        type="submit"
+                        :disabled="form.processing || !isChanging"
+                        class="rounded-lg bg-[var(--esc-accent)] px-4 py-2 text-sm font-medium text-white disabled:opacity-50"
+                    >
+                        {{ form.processing ? 'Saving…' : 'Use this connection' }}
+                    </button>
+                </div>
+            </form>
+        </div>
+    </EscalatedLayout>
+</template>