@escalated-dev/escalated 0.6.0 → 0.7.0

package/src/pages/Customer/Index.vue

@@ -1,24 +1,31 @@
-<script setup>
-import EscalatedLayout from '../../components/EscalatedLayout.vue';
-import TicketList from '../../components/TicketList.vue';
-import TicketFilters from '../../components/TicketFilters.vue';
-import { Link } from '@inertiajs/vue3';
-
-defineProps({
-    tickets: Object,
-    filters: Object,
-});
-</script>
-
-<template>
-    <EscalatedLayout title="My Tickets">
-        <div class="mb-6 flex items-center justify-between">
-            <TicketFilters :filters="filters" :route="route('escalated.customer.tickets.index')" />
-            <Link :href="route('escalated.customer.tickets.create')"
-                  class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">
-                New Ticket
-            </Link>
-        </div>
-        <TicketList :tickets="tickets" route-prefix="escalated.customer.tickets" />
-    </EscalatedLayout>
-</template>
+<script setup>
+import EscalatedLayout from '../../components/EscalatedLayout.vue';
+import TicketList from '../../components/TicketList.vue';
+import TicketFilters from '../../components/TicketFilters.vue';
+import PluginSlot from '../../components/PluginSlot.vue';
+import { Link } from '@inertiajs/vue3';
+import { usePluginExtensions } from '../../composables/usePluginExtensions';
+
+defineProps({
+    tickets: Object,
+    filters: Object,
+});
+
+const { getPageComponents } = usePluginExtensions();
+</script>
+
+<template>
+    <EscalatedLayout title="My Tickets">
+        <PluginSlot slot="customer.index.header" :components="getPageComponents('customer.index', 'header')" />
+        <div class="mb-6 flex items-center justify-between">
+            <TicketFilters :filters="filters" :route="route('escalated.customer.tickets.index')" />
+            <Link
+                :href="route('escalated.customer.tickets.create')"
+                class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700"
+            >
+                New Ticket
+            </Link>
+        </div>
+        <TicketList :tickets="tickets" route-prefix="escalated.customer.tickets" />
+    </EscalatedLayout>
+</template>

package/src/pages/Customer/KnowledgeBase/Article.vue

@@ -0,0 +1,127 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { router, Link } from '@inertiajs/vue3';
+import { ref } from 'vue';
+
+const props = defineProps({
+    article: Object,
+    related: Array,
+});
+
+const feedbackSent = ref(false);
+
+function sendFeedback(helpful) {
+    router.post(
+        route('escalated.customer.kb.feedback', props.article.slug),
+        {
+            helpful,
+        },
+        {
+            preserveScroll: true,
+            onSuccess: () => {
+                feedbackSent.value = true;
+            },
+        },
+    );
+}
+</script>
+
+<template>
+    <EscalatedLayout :title="article.title">
+        <div class="mx-auto max-w-3xl">
+            <div class="mb-6">
+                <Link :href="route('escalated.customer.kb.index')" class="text-sm text-gray-500 hover:text-gray-700">
+                    &larr; Back to Knowledge Base
+                </Link>
+            </div>
+
+            <!-- Breadcrumb -->
+            <div v-if="article.category" class="mb-4 flex items-center gap-2 text-xs text-gray-500">
+                <Link :href="route('escalated.customer.kb.index')" class="hover:text-gray-700">Knowledge Base</Link>
+                <span>/</span>
+                <Link
+                    :href="route('escalated.customer.kb.index', { category: article.category.id })"
+                    class="hover:text-gray-700"
+                    >{{ article.category.name }}</Link
+                >
+            </div>
+
+            <!-- Article -->
+            <article class="rounded-lg border border-gray-200 bg-white p-8">
+                <h1 class="mb-4 text-2xl font-bold text-gray-900">{{ article.title }}</h1>
+                <div class="mb-6 flex items-center gap-4 text-xs text-gray-500">
+                    <span>{{ article.view_count }} views</span>
+                    <span v-if="article.published_at"
+                        >Published {{ new Date(article.published_at).toLocaleDateString() }}</span
+                    >
+                </div>
+
+                <!-- Article body rendered as HTML -->
+                <div class="prose prose-gray max-w-none text-gray-700" v-html="article.body"></div>
+            </article>
+
+            <!-- Feedback -->
+            <div class="mt-6 rounded-lg border border-gray-200 bg-white p-6 text-center">
+                <template v-if="!feedbackSent">
+                    <p class="mb-3 text-sm font-medium text-gray-700">Was this article helpful?</p>
+                    <div class="flex items-center justify-center gap-3">
+                        <button
+                            class="inline-flex items-center gap-2 rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:border-green-300 hover:bg-green-50 hover:text-green-700"
+                            @click="sendFeedback(true)"
+                        >
+                            <svg
+                                class="h-4 w-4"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 9.953 4.167 9.5 5 9.5h.904"
+                                />
+                            </svg>
+                            Yes
+                        </button>
+                        <button
+                            class="inline-flex items-center gap-2 rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:border-red-300 hover:bg-red-50 hover:text-red-700"
+                            @click="sendFeedback(false)"
+                        >
+                            <svg
+                                class="h-4 w-4"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    d="M7.5 15h2.25m8.024-9.75c.011.05.028.1.052.148.591 1.2.924 2.55.924 3.977a8.96 8.96 0 01-.999 4.125m.023-8.25c-.076-.365.183-.75.575-.75h.908c.889 0 1.713.518 1.972 1.368.339 1.11.521 2.287.521 3.507 0 1.553-.295 3.036-.831 4.398C20.613 14.547 19.833 15 19 15h-.904c-.26 0-.507-.098-.672-.28a5.002 5.002 0 01-.188-.226M7.5 15c-.863 0-1.706-.12-2.514-.348m2.514.348c.26.044.507.22.672.44a4.992 4.992 0 001.423 1.305M4.986 14.652a4.5 4.5 0 01-.236-.442m.236.442c-.31.652-.762 1.168-1.285 1.5m4.78-1.5a11.92 11.92 0 01-.813 1.25m.813-1.25c-.418.593-.91 1.098-1.459 1.5m1.459-1.5a6.12 6.12 0 01-.813 1.25m-2.606 0c-.5.338-1.1.5-1.71.5h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 9.953 4.167 9.5 5 9.5h.904"
+                                />
+                            </svg>
+                            No
+                        </button>
+                    </div>
+                </template>
+                <p v-else class="text-sm text-green-600">Thank you for your feedback!</p>
+            </div>
+
+            <!-- Related Articles -->
+            <div v-if="related?.length" class="mt-6">
+                <h3 class="mb-3 text-sm font-semibold text-gray-900">Related Articles</h3>
+                <div class="space-y-2">
+                    <Link
+                        v-for="item in related"
+                        :key="item.id"
+                        :href="route('escalated.customer.kb.show', item.slug)"
+                        class="block rounded-lg border border-gray-200 bg-white px-4 py-3 text-sm text-gray-700 transition-colors hover:border-gray-300 hover:bg-gray-50"
+                    >
+                        {{ item.title }}
+                    </Link>
+                </div>
+            </div>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Customer/KnowledgeBase/Index.vue

@@ -0,0 +1,151 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { router, Link } from '@inertiajs/vue3';
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+    categories: Array,
+    articles: Object,
+    filters: Object,
+});
+
+const search = ref(props.filters?.search || '');
+const selectedCategory = ref(props.filters?.category || '');
+
+let debounceTimer;
+function applyFilters() {
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => {
+        router.get(
+            route('escalated.customer.kb.index'),
+            {
+                search: search.value || undefined,
+                category: selectedCategory.value || undefined,
+            },
+            { preserveState: true, preserveScroll: true },
+        );
+    }, 300);
+}
+
+watch([search, selectedCategory], applyFilters);
+</script>
+
+<template>
+    <EscalatedLayout title="Knowledge Base">
+        <!-- Search -->
+        <div class="mb-8 text-center">
+            <h1 class="mb-3 text-2xl font-bold text-gray-900">How can we help you?</h1>
+            <div class="mx-auto max-w-lg">
+                <input
+                    v-model="search"
+                    type="text"
+                    placeholder="Search articles..."
+                    class="w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-sm text-gray-900 shadow-sm placeholder-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20"
+                />
+            </div>
+        </div>
+
+        <!-- Categories -->
+        <div v-if="categories?.length && !search" class="mb-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            <button
+                v-for="cat in categories"
+                :key="cat.id"
+                :class="[
+                    'rounded-lg border p-5 text-left transition-all',
+                    selectedCategory == cat.id
+                        ? 'border-indigo-500 bg-indigo-50 shadow-sm'
+                        : 'border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm',
+                ]"
+                @click="selectedCategory = selectedCategory == cat.id ? '' : cat.id"
+            >
+                <div class="flex items-center gap-3">
+                    <div
+                        :class="[
+                            'flex h-10 w-10 items-center justify-center rounded-lg',
+                            selectedCategory == cat.id ? 'bg-indigo-100' : 'bg-gray-100',
+                        ]"
+                    >
+                        <svg
+                            :class="['h-5 w-5', selectedCategory == cat.id ? 'text-indigo-600' : 'text-gray-500']"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            viewBox="0 0 24 24"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"
+                            />
+                        </svg>
+                    </div>
+                    <div>
+                        <h3
+                            :class="[
+                                'text-sm font-semibold',
+                                selectedCategory == cat.id ? 'text-indigo-900' : 'text-gray-900',
+                            ]"
+                        >
+                            {{ cat.name }}
+                        </h3>
+                        <p class="text-xs text-gray-500">{{ cat.articles_count }} articles</p>
+                    </div>
+                </div>
+                <p v-if="cat.description" class="mt-2 text-xs text-gray-500">{{ cat.description }}</p>
+            </button>
+        </div>
+
+        <!-- Articles -->
+        <div class="space-y-3">
+            <Link
+                v-for="article in articles.data"
+                :key="article.id"
+                :href="route('escalated.customer.kb.show', article.slug)"
+                class="block rounded-lg border border-gray-200 bg-white p-4 transition-all hover:border-gray-300 hover:shadow-sm"
+            >
+                <h3 class="text-sm font-semibold text-gray-900">{{ article.title }}</h3>
+                <div class="mt-1 flex items-center gap-3 text-xs text-gray-500">
+                    <span v-if="article.category">{{ article.category.name }}</span>
+                    <span>{{ article.view_count }} views</span>
+                </div>
+            </Link>
+        </div>
+
+        <div v-if="!articles.data?.length" class="py-12 text-center">
+            <svg
+                class="mx-auto mb-3 h-10 w-10 text-gray-300"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                viewBox="0 0 24 24"
+            >
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+                />
+            </svg>
+            <p class="text-sm text-gray-500">No articles found.</p>
+        </div>
+
+        <!-- Pagination -->
+        <div v-if="articles.links && articles.last_page > 1" class="mt-6 flex items-center justify-center gap-1">
+            <Link
+                v-for="link in articles.links"
+                :key="link.label"
+                :href="link.url || '#'"
+                :class="[
+                    'rounded-lg px-3 py-1.5 text-sm transition-colors',
+                    link.active
+                        ? 'bg-indigo-600 text-white'
+                        : link.url
+                          ? 'border border-gray-200 text-gray-600 hover:bg-gray-50'
+                          : 'cursor-default text-gray-300',
+                ]"
+                preserve-scroll
+            >
+                <!-- eslint-disable-next-line vue/no-v-html --><span v-html="link.label" />
+            </Link>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/plugin.js

@@ -24,6 +24,16 @@ export const EscalatedPlugin = {
         if (options.theme) {
             app.provide('escalated-theme', options.theme);
             applyTheme(options.theme);
+
+            if (options.theme.panel) {
+                const panelConfig = options.theme.panel;
+                applyPanelTheme(panelConfig);
+                app.provide('escalated-panel', {
+                    appName: panelConfig.appName || 'Escalated',
+                    logo: panelConfig.logo || null,
+                    mode: panelConfig.mode || 'dark',
+                });
+            }
         }
     },
 };
@@ -55,7 +65,7 @@ function darken(hex, percent) {
     const r = Math.max(0, (num >> 16) - Math.round(2.55 * percent));
     const g = Math.max(0, ((num >> 8) & 0x00ff) - Math.round(2.55 * percent));
     const b = Math.max(0, (num & 0x0000ff) - Math.round(2.55 * percent));
-    return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, '0')}`;
+    return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
 }
 
 function scaleBorderRadius(radius, factor) {
@@ -63,3 +73,78 @@ function scaleBorderRadius(radius, factor) {
     if (!match) return radius;
     return `${(parseFloat(match[1]) * factor).toFixed(2)}${match[2] || 'rem'}`;
 }
+
+const panelDarkDefaults = {
+    bg: '#000000',
+    sidebarBg: '#0a0a0a',
+    topbarBg: 'rgba(0,0,0,0.8)',
+    surface: 'rgba(23,23,23,0.6)',
+    surfaceAlt: '#0a0a0a',
+    border: 'rgba(255,255,255,0.06)',
+    borderInput: 'rgba(255,255,255,0.1)',
+    text: '#ffffff',
+    textSecondary: '#e5e5e5',
+    textTertiary: '#a3a3a3',
+    textMuted: '#737373',
+    accent: '#06b6d4',
+    accentSecondary: '#8b5cf6',
+    accentHover: '#22d3ee',
+    accentSecondaryHover: '#a78bfa',
+    hover: 'rgba(255,255,255,0.03)',
+    active: 'rgba(255,255,255,0.08)',
+};
+
+const panelLightDefaults = {
+    bg: '#f9fafb',
+    sidebarBg: '#ffffff',
+    topbarBg: 'rgba(255,255,255,0.95)',
+    surface: '#ffffff',
+    surfaceAlt: '#f9fafb',
+    border: '#e5e7eb',
+    borderInput: '#d1d5db',
+    text: '#111827',
+    textSecondary: '#374151',
+    textTertiary: '#6b7280',
+    textMuted: '#9ca3af',
+    accent: '#3b82f6',
+    accentSecondary: '#6366f1',
+    accentHover: '#2563eb',
+    accentSecondaryHover: '#818cf8',
+    hover: 'rgba(0,0,0,0.02)',
+    active: '#eff6ff',
+};
+
+const panelTokenMap = {
+    bg: '--esc-panel-bg',
+    sidebarBg: '--esc-panel-sidebar-bg',
+    topbarBg: '--esc-panel-topbar-bg',
+    surface: '--esc-panel-surface',
+    surfaceAlt: '--esc-panel-surface-alt',
+    border: '--esc-panel-border',
+    borderInput: '--esc-panel-border-input',
+    text: '--esc-panel-text',
+    textSecondary: '--esc-panel-text-secondary',
+    textTertiary: '--esc-panel-text-tertiary',
+    textMuted: '--esc-panel-text-muted',
+    accent: '--esc-panel-accent',
+    accentSecondary: '--esc-panel-accent-secondary',
+    accentHover: '--esc-panel-accent-hover',
+    accentSecondaryHover: '--esc-panel-accent-secondary-hover',
+    hover: '--esc-panel-hover',
+    active: '--esc-panel-active',
+};
+
+function applyPanelTheme(panelConfig) {
+    const defaults = panelConfig.mode === 'light' ? panelLightDefaults : panelDarkDefaults;
+    const overrides = {};
+    for (const key of Object.keys(panelTokenMap)) {
+        if (panelConfig[key] !== undefined) {
+            overrides[key] = panelConfig[key];
+        }
+    }
+    const merged = { ...defaults, ...overrides };
+    const style = document.documentElement.style;
+    for (const [key, cssVar] of Object.entries(panelTokenMap)) {
+        style.setProperty(cssVar, merged[key]);
+    }
+}

package/src/utils/constants.js

@@ -0,0 +1,30 @@
+/**
+ * Shared ticket constants used across multiple components.
+ * Single source of truth for statuses, priorities, and types.
+ */
+
+export const TICKET_STATUSES = [
+    'open',
+    'in_progress',
+    'waiting_on_customer',
+    'waiting_on_agent',
+    'escalated',
+    'resolved',
+    'closed',
+];
+
+export const TICKET_PRIORITIES = ['low', 'medium', 'high', 'urgent', 'critical'];
+
+export const TICKET_TYPES = [
+    { value: 'question', label: 'Question', color: 'text-cyan-400' },
+    { value: 'problem', label: 'Problem', color: 'text-rose-400' },
+    { value: 'incident', label: 'Incident', color: 'text-amber-400' },
+    { value: 'task', label: 'Task', color: 'text-violet-400' },
+];
+
+export const TICKET_TYPE_COLORS = {
+    question: { dark: 'bg-cyan-500/20 text-cyan-400', light: 'bg-cyan-100 text-cyan-700' },
+    problem: { dark: 'bg-rose-500/20 text-rose-400', light: 'bg-rose-100 text-rose-700' },
+    incident: { dark: 'bg-amber-500/20 text-amber-400', light: 'bg-amber-100 text-amber-700' },
+    task: { dark: 'bg-violet-500/20 text-violet-400', light: 'bg-violet-100 text-violet-700' },
+};

package/src/utils/formatting.js

@@ -0,0 +1,35 @@
+/**
+ * Shared formatting utilities for ticket display.
+ */
+
+/**
+ * Returns a human-readable relative time string (e.g. "5m ago", "3h ago", "2d ago").
+ * @param {string|Date} date
+ * @returns {string}
+ */
+export function timeAgo(date) {
+    if (!date) return '';
+    const diff = Date.now() - new Date(date).getTime();
+    const mins = Math.floor(diff / 60000);
+    if (mins < 60) return `${mins}m ago`;
+    const hrs = Math.floor(mins / 60);
+    if (hrs < 24) return `${hrs}h ago`;
+    const days = Math.floor(hrs / 24);
+    return `${days}d ago`;
+}
+
+/**
+ * Returns a Tailwind CSS class for the SLA indicator dot based on ticket SLA state.
+ * @param {Object} ticket
+ * @returns {string}
+ */
+export function slaClass(ticket) {
+    if (ticket.sla_first_response_breached || ticket.sla_resolution_breached) return 'bg-rose-500';
+    if (ticket.first_response_due_at || ticket.resolution_due_at) {
+        const due = ticket.resolution_due_at || ticket.first_response_due_at;
+        const mins = (new Date(due) - Date.now()) / 60000;
+        if (mins < 30) return 'bg-amber-500';
+        return 'bg-emerald-500';
+    }
+    return '';
+}

package/src/pages/Admin/Plugins.vue

@@ -1,129 +0,0 @@
-<script setup>
-import EscalatedLayout from '../../components/EscalatedLayout.vue';
-import { useForm, usePage, router } from '@inertiajs/vue3';
-import { computed } from 'vue';
-
-const props = defineProps({ plugins: Array });
-const page = usePage();
-
-const flash = computed(() => ({
-    success: page.props.flash?.success,
-    error: page.props.flash?.error,
-}));
-
-const uploadForm = useForm({
-    plugin: null,
-});
-
-function onFileChange(e) {
-    uploadForm.plugin = e.target.files[0];
-}
-
-function submitUpload() {
-    uploadForm.post(route('escalated.admin.plugins.upload'), {
-        forceFormData: true,
-        onSuccess: () => {
-            uploadForm.reset();
-        },
-    });
-}
-
-function activate(slug) {
-    router.post(route('escalated.admin.plugins.activate', slug));
-}
-
-function deactivate(slug) {
-    router.post(route('escalated.admin.plugins.deactivate', slug));
-}
-
-function deletePlugin(slug) {
-    if (confirm('Are you sure you want to delete this plugin? This cannot be undone.')) {
-        router.delete(route('escalated.admin.plugins.destroy', slug));
-    }
-}
-</script>
-
-<template>
-    <EscalatedLayout title="Plugins">
-        <div class="mx-auto max-w-4xl space-y-6">
-            <!-- Flash messages -->
-            <div v-if="flash.success" class="rounded-lg border border-emerald-500/20 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-400">
-                {{ flash.success }}
-            </div>
-            <div v-if="flash.error" class="rounded-lg border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-400">
-                {{ flash.error }}
-            </div>
-
-            <!-- Upload Plugin -->
-            <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-6">
-                <h3 class="mb-4 text-sm font-semibold text-white">Upload Plugin</h3>
-                <form @submit.prevent="submitUpload" class="flex items-end gap-4">
-                    <div class="flex-1">
-                        <label class="block text-sm font-medium text-neutral-200">Plugin ZIP File</label>
-                        <input type="file" accept=".zip" @change="onFileChange"
-                               class="mt-2 w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 file:mr-3 file:rounded file:border-0 file:bg-white/10 file:px-3 file:py-1 file:text-sm file:text-neutral-300 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10" />
-                        <p v-if="uploadForm.errors.plugin" class="mt-1 text-xs text-red-400">{{ uploadForm.errors.plugin }}</p>
-                    </div>
-                    <button type="submit" :disabled="uploadForm.processing || !uploadForm.plugin"
-                            class="shrink-0 rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-5 py-2 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400 disabled:opacity-50">
-                        {{ uploadForm.processing ? 'Uploading...' : 'Upload' }}
-                    </button>
-                </form>
-            </div>
-
-            <!-- Plugin List -->
-            <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-6">
-                <h3 class="mb-5 text-sm font-semibold text-white">Installed Plugins</h3>
-
-                <div v-if="!plugins || plugins.length === 0" class="py-8 text-center text-sm text-neutral-500">
-                    No plugins installed yet.
-                </div>
-
-                <div v-else class="divide-y divide-white/[0.06]">
-                    <div v-for="plugin in plugins" :key="plugin.slug" class="flex items-start justify-between gap-4 py-4 first:pt-0 last:pb-0">
-                        <!-- Plugin info -->
-                        <div class="min-w-0 flex-1">
-                            <div class="flex items-center gap-2.5">
-                                <span class="text-sm font-medium text-white">{{ plugin.name }}</span>
-                                <span class="rounded bg-white/[0.06] px-1.5 py-0.5 text-[10px] font-medium text-neutral-500">
-                                    v{{ plugin.version }}
-                                </span>
-                                <span :class="[
-                                    'rounded px-1.5 py-0.5 text-[10px] font-medium',
-                                    plugin.source === 'composer'
-                                        ? 'bg-violet-500/10 text-violet-400'
-                                        : 'bg-cyan-500/10 text-cyan-400'
-                                ]">
-                                    {{ plugin.source }}
-                                </span>
-                            </div>
-                            <p v-if="plugin.description" class="mt-1 text-xs text-neutral-500">{{ plugin.description }}</p>
-                            <p class="mt-1 text-xs text-neutral-600">by {{ plugin.author }}</p>
-                        </div>
-
-                        <!-- Actions -->
-                        <div class="flex shrink-0 items-center gap-2">
-                            <!-- Active status toggle -->
-                            <button v-if="plugin.is_active" @click="deactivate(plugin.slug)"
-                                    class="rounded-lg border border-emerald-500/20 bg-emerald-500/10 px-3 py-1.5 text-xs font-medium text-emerald-400 transition-colors hover:bg-emerald-500/20">
-                                Active
-                            </button>
-                            <button v-else @click="activate(plugin.slug)"
-                                    class="rounded-lg border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs font-medium text-neutral-500 transition-colors hover:bg-white/[0.08] hover:text-neutral-300">
-                                Inactive
-                            </button>
-
-                            <!-- Delete (local only) -->
-                            <button v-if="plugin.source === 'local'" @click="deletePlugin(plugin.slug)"
-                                    class="rounded-lg border border-white/10 bg-white/[0.04] p-1.5 text-neutral-600 transition-colors hover:border-red-500/20 hover:bg-red-500/10 hover:text-red-400">
-                                <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </EscalatedLayout>
-</template>