@escalated-dev/escalated 0.7.0 → 0.8.0

package/src/pages/Admin/CannedResponses/Index.vue

@@ -1,127 +1,127 @@
-<script setup>
-import EscalatedLayout from '../../../components/EscalatedLayout.vue';
-import { useForm, router } from '@inertiajs/vue3';
-import { ref } from 'vue';
-
-defineProps({ responses: Array });
-
-const showForm = ref(false);
-const form = useForm({ title: '', body: '', category: '', is_shared: true });
-
-function create() {
-    form.post(route('escalated.admin.canned-responses.store'), {
-        onSuccess: () => {
-            form.reset();
-            showForm.value = false;
-        },
-    });
-}
-
-function destroy(id) {
-    if (confirm('Delete this canned response?')) {
-        router.delete(route('escalated.admin.canned-responses.destroy', id));
-    }
-}
-</script>
-
-<template>
-    <EscalatedLayout title="Canned Responses">
-        <div class="mb-4 flex justify-end">
-            <button
-                :class="
-                    showForm
-                        ? 'rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] px-4 py-2 text-sm font-medium text-[var(--esc-panel-text-secondary)] transition-colors hover:bg-[var(--esc-panel-hover)]'
-                        : 'rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-4 py-2 text-sm font-medium text-white shadow-lg shadow-[var(--esc-panel-bg)]/20 transition-all hover:from-[var(--esc-panel-accent-hover)] hover:to-[var(--esc-panel-accent-secondary-hover)]'
-                "
-                @click="showForm = !showForm"
-            >
-                {{ showForm ? 'Cancel' : 'Add Response' }}
-            </button>
-        </div>
-        <form
-            v-if="showForm"
-            class="mb-6 space-y-3 rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-5"
-            @submit.prevent="create"
-        >
-            <input
-                v-model="form.title"
-                type="text"
-                placeholder="Title"
-                required
-                class="w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] placeholder-gray-500 focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
-            />
-            <textarea
-                v-model="form.body"
-                rows="4"
-                placeholder="Response body..."
-                required
-                class="w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] placeholder-gray-500 focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
-            ></textarea>
-            <div class="flex items-center gap-3">
-                <input
-                    v-model="form.category"
-                    type="text"
-                    placeholder="Category (optional)"
-                    class="rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] placeholder-gray-500 focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
-                />
-                <label class="flex items-center gap-2">
-                    <input
-                        v-model="form.is_shared"
-                        type="checkbox"
-                        class="rounded border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface)] text-[var(--esc-panel-text)] focus:ring-[var(--esc-panel-border-input)]"
-                    />
-                    <span class="text-sm text-[var(--esc-panel-text-secondary)]">Shared</span>
-                </label>
-                <button
-                    type="submit"
-                    :disabled="form.processing"
-                    class="ml-auto rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-4 py-2 text-sm font-medium text-white shadow-lg shadow-[var(--esc-panel-bg)]/20 transition-all hover:from-[var(--esc-panel-accent-hover)] hover:to-[var(--esc-panel-accent-secondary-hover)] disabled:opacity-50"
-                >
-                    Create
-                </button>
-            </div>
-        </form>
-        <div class="space-y-3">
-            <div
-                v-if="!responses?.length"
-                class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] px-4 py-12 text-center"
-            >
-                <svg
-                    class="mx-auto mb-3 h-8 w-8 text-[var(--esc-panel-text-muted)]"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                    viewBox="0 0 24 24"
-                >
-                    <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
-                    />
-                </svg>
-                <p class="text-sm text-[var(--esc-panel-text-muted)]">No canned responses yet</p>
-                <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
-                    Create reusable templates for common replies
-                </p>
-            </div>
-            <div
-                v-for="resp in responses"
-                :key="resp.id"
-                class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-4 transition-colors hover:bg-gray-900/80"
-            >
-                <div class="mb-2 flex items-center justify-between">
-                    <div class="flex items-center gap-2">
-                        <span class="font-medium text-[var(--esc-panel-text-secondary)]">{{ resp.title }}</span>
-                        <span
-                            v-if="resp.category"
-                            class="rounded-md bg-[var(--esc-panel-hover)] px-2 py-0.5 text-xs text-[var(--esc-panel-text-tertiary)] ring-1 ring-white/[0.06]"
-                            >{{ resp.category }}</span
-                        >
-                    </div>
-                    <button class="text-sm text-rose-400 hover:text-rose-300" @click="destroy(resp.id)">Delete</button>
-                </div>
-                <p class="text-sm text-[var(--esc-panel-text-tertiary)]">{{ resp.body }}</p>
-            </div>
-        </div>
-    </EscalatedLayout>
-</template>
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { useForm, router } from '@inertiajs/vue3';
+import { ref } from 'vue';
+
+defineProps({ responses: Array });
+
+const showForm = ref(false);
+const form = useForm({ title: '', body: '', category: '', is_shared: true });
+
+function create() {
+    form.post(route('escalated.admin.canned-responses.store'), {
+        onSuccess: () => {
+            form.reset();
+            showForm.value = false;
+        },
+    });
+}
+
+function destroy(id) {
+    if (confirm('Delete this canned response?')) {
+        router.delete(route('escalated.admin.canned-responses.destroy', id));
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Canned Responses">
+        <div class="mb-4 flex justify-end">
+            <button
+                :class="
+                    showForm
+                        ? 'rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] px-4 py-2 text-sm font-medium text-[var(--esc-panel-text-secondary)] transition-colors hover:bg-[var(--esc-panel-hover)]'
+                        : 'rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-4 py-2 text-sm font-medium text-white shadow-lg shadow-[var(--esc-panel-bg)]/20 transition-all hover:from-[var(--esc-panel-accent-hover)] hover:to-[var(--esc-panel-accent-secondary-hover)]'
+                "
+                @click="showForm = !showForm"
+            >
+                {{ showForm ? 'Cancel' : 'Add Response' }}
+            </button>
+        </div>
+        <form
+            v-if="showForm"
+            class="mb-6 space-y-3 rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-5"
+            @submit.prevent="create"
+        >
+            <input
+                v-model="form.title"
+                type="text"
+                placeholder="Title"
+                required
+                class="w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] placeholder-gray-500 focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+            />
+            <textarea
+                v-model="form.body"
+                rows="4"
+                placeholder="Response body..."
+                required
+                class="w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] placeholder-gray-500 focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+            ></textarea>
+            <div class="flex items-center gap-3">
+                <input
+                    v-model="form.category"
+                    type="text"
+                    placeholder="Category (optional)"
+                    class="rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] placeholder-gray-500 focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                />
+                <label class="flex items-center gap-2">
+                    <input
+                        v-model="form.is_shared"
+                        type="checkbox"
+                        class="rounded border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface)] text-[var(--esc-panel-text)] focus:ring-[var(--esc-panel-border-input)]"
+                    />
+                    <span class="text-sm text-[var(--esc-panel-text-secondary)]">Shared</span>
+                </label>
+                <button
+                    type="submit"
+                    :disabled="form.processing"
+                    class="ml-auto rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-4 py-2 text-sm font-medium text-white shadow-lg shadow-[var(--esc-panel-bg)]/20 transition-all hover:from-[var(--esc-panel-accent-hover)] hover:to-[var(--esc-panel-accent-secondary-hover)] disabled:opacity-50"
+                >
+                    Create
+                </button>
+            </div>
+        </form>
+        <div class="space-y-3">
+            <div
+                v-if="!responses?.length"
+                class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] px-4 py-12 text-center"
+            >
+                <svg
+                    class="mx-auto mb-3 h-8 w-8 text-[var(--esc-panel-text-muted)]"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    viewBox="0 0 24 24"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
+                    />
+                </svg>
+                <p class="text-sm text-[var(--esc-panel-text-muted)]">No canned responses yet</p>
+                <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                    Create reusable templates for common replies
+                </p>
+            </div>
+            <div
+                v-for="resp in responses"
+                :key="resp.id"
+                class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-4 transition-colors hover:bg-gray-900/80"
+            >
+                <div class="mb-2 flex items-center justify-between">
+                    <div class="flex items-center gap-2">
+                        <span class="font-medium text-[var(--esc-panel-text-secondary)]">{{ resp.title }}</span>
+                        <span
+                            v-if="resp.category"
+                            class="rounded-md bg-[var(--esc-panel-hover)] px-2 py-0.5 text-xs text-[var(--esc-panel-text-tertiary)] ring-1 ring-white/[0.06]"
+                            >{{ resp.category }}</span
+                        >
+                    </div>
+                    <button class="text-sm text-rose-400 hover:text-rose-300" @click="destroy(resp.id)">Delete</button>
+                </div>
+                <p class="text-sm text-[var(--esc-panel-text-tertiary)]">{{ resp.body }}</p>
+            </div>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Admin/Capacity/Index.vue

@@ -1,134 +1,134 @@
-<script setup>
-import EscalatedLayout from '../../../components/EscalatedLayout.vue';
-import AgentLoadIndicator from '../../../components/AgentLoadIndicator.vue';
-import { useForm } from '@inertiajs/vue3';
-import { ref } from 'vue';
-
-defineProps({ capacities: Array });
-
-const editingId = ref(null);
-const editForm = useForm({ max_concurrent: 10 });
-
-function startEdit(cap) {
-    editingId.value = cap.id;
-    editForm.max_concurrent = cap.max_concurrent;
-}
-
-function saveEdit(id) {
-    editForm.put(route('escalated.admin.capacity.update', id), {
-        preserveScroll: true,
-        onSuccess: () => {
-            editingId.value = null;
-        },
-    });
-}
-</script>
-
-<template>
-    <EscalatedLayout title="Agent Capacity">
-        <div class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]">
-            <table class="min-w-full divide-y divide-[var(--esc-panel-border)]">
-                <thead>
-                    <tr class="bg-[var(--esc-panel-hover)]">
-                        <th
-                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
-                        >
-                            Agent
-                        </th>
-                        <th
-                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
-                        >
-                            Channel
-                        </th>
-                        <th
-                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
-                        >
-                            Max Concurrent
-                        </th>
-                        <th
-                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
-                        >
-                            Current Load
-                        </th>
-                        <th
-                            class="px-4 py-3 text-right text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
-                        >
-                            Actions
-                        </th>
-                    </tr>
-                </thead>
-                <tbody class="divide-y divide-[var(--esc-panel-border)]">
-                    <tr v-if="!capacities?.length">
-                        <td colspan="5" class="px-4 py-12 text-center">
-                            <svg
-                                class="mx-auto mb-3 h-8 w-8 text-[var(--esc-panel-text-muted)]"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="1.5"
-                                viewBox="0 0 24 24"
-                            >
-                                <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    d="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.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
-                                />
-                            </svg>
-                            <p class="text-sm text-[var(--esc-panel-text-muted)]">No capacity records yet</p>
-                            <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
-                                Capacity records are created when agents are assigned tickets
-                            </p>
-                        </td>
-                    </tr>
-                    <tr
-                        v-for="cap in capacities"
-                        :key="cap.id"
-                        class="transition-colors hover:bg-[var(--esc-panel-hover)]"
-                    >
-                        <td class="px-4 py-3 text-sm font-medium text-[var(--esc-panel-text-secondary)]">
-                            {{ cap.agent_name }}
-                        </td>
-                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">{{ cap.channel }}</td>
-                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-secondary)]">
-                            <template v-if="editingId === cap.id">
-                                <form class="flex items-center gap-2" @submit.prevent="saveEdit(cap.id)">
-                                    <input
-                                        v-model.number="editForm.max_concurrent"
-                                        type="number"
-                                        min="1"
-                                        max="999"
-                                        class="w-20 rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-2 py-1 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
-                                    />
-                                    <button
-                                        type="submit"
-                                        class="text-xs text-[var(--esc-panel-text-secondary)] hover:text-[var(--esc-panel-text)]"
-                                    >
-                                        Save
-                                    </button>
-                                    <button
-                                        type="button"
-                                        class="text-xs text-[var(--esc-panel-text-tertiary)] hover:text-[var(--esc-panel-text-secondary)]"
-                                        @click="editingId = null"
-                                    >
-                                        Cancel
-                                    </button>
-                                </form>
-                            </template>
-                            <template v-else>{{ cap.max_concurrent }}</template>
-                        </td>
-                        <td class="px-4 py-3">
-                            <AgentLoadIndicator :current="cap.current_count" :max="cap.max_concurrent" />
-                        </td>
-                        <td class="px-4 py-3 text-right text-sm">
-                            <button
-                                class="text-[var(--esc-panel-text-secondary)] hover:text-[var(--esc-panel-text)]"
-                                @click="startEdit(cap)"
-                            >
-                                Edit
-                            </button>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </EscalatedLayout>
-</template>
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import AgentLoadIndicator from '../../../components/AgentLoadIndicator.vue';
+import { useForm } from '@inertiajs/vue3';
+import { ref } from 'vue';
+
+defineProps({ capacities: Array });
+
+const editingId = ref(null);
+const editForm = useForm({ max_concurrent: 10 });
+
+function startEdit(cap) {
+    editingId.value = cap.id;
+    editForm.max_concurrent = cap.max_concurrent;
+}
+
+function saveEdit(id) {
+    editForm.put(route('escalated.admin.capacity.update', id), {
+        preserveScroll: true,
+        onSuccess: () => {
+            editingId.value = null;
+        },
+    });
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Agent Capacity">
+        <div class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]">
+            <table class="min-w-full divide-y divide-[var(--esc-panel-border)]">
+                <thead>
+                    <tr class="bg-[var(--esc-panel-hover)]">
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Agent
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Channel
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Max Concurrent
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Current Load
+                        </th>
+                        <th
+                            class="px-4 py-3 text-right text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Actions
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-[var(--esc-panel-border)]">
+                    <tr v-if="!capacities?.length">
+                        <td colspan="5" class="px-4 py-12 text-center">
+                            <svg
+                                class="mx-auto mb-3 h-8 w-8 text-[var(--esc-panel-text-muted)]"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    d="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.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
+                                />
+                            </svg>
+                            <p class="text-sm text-[var(--esc-panel-text-muted)]">No capacity records yet</p>
+                            <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                                Capacity records are created when agents are assigned tickets
+                            </p>
+                        </td>
+                    </tr>
+                    <tr
+                        v-for="cap in capacities"
+                        :key="cap.id"
+                        class="transition-colors hover:bg-[var(--esc-panel-hover)]"
+                    >
+                        <td class="px-4 py-3 text-sm font-medium text-[var(--esc-panel-text-secondary)]">
+                            {{ cap.agent_name }}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">{{ cap.channel }}</td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-secondary)]">
+                            <template v-if="editingId === cap.id">
+                                <form class="flex items-center gap-2" @submit.prevent="saveEdit(cap.id)">
+                                    <input
+                                        v-model.number="editForm.max_concurrent"
+                                        type="number"
+                                        min="1"
+                                        max="999"
+                                        class="w-20 rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-2 py-1 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                                    />
+                                    <button
+                                        type="submit"
+                                        class="text-xs text-[var(--esc-panel-text-secondary)] hover:text-[var(--esc-panel-text)]"
+                                    >
+                                        Save
+                                    </button>
+                                    <button
+                                        type="button"
+                                        class="text-xs text-[var(--esc-panel-text-tertiary)] hover:text-[var(--esc-panel-text-secondary)]"
+                                        @click="editingId = null"
+                                    >
+                                        Cancel
+                                    </button>
+                                </form>
+                            </template>
+                            <template v-else>{{ cap.max_concurrent }}</template>
+                        </td>
+                        <td class="px-4 py-3">
+                            <AgentLoadIndicator :current="cap.current_count" :max="cap.max_concurrent" />
+                        </td>
+                        <td class="px-4 py-3 text-right text-sm">
+                            <button
+                                class="text-[var(--esc-panel-text-secondary)] hover:text-[var(--esc-panel-text)]"
+                                @click="startEdit(cap)"
+                            >
+                                Edit
+                            </button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>