agent-relay-server 0.3.11 → 0.4.0

package/public/index.html

@@ -81,6 +81,10 @@
       <a href="#" class="nav-link" :class="{ active: view === 'messages' }" @click.prevent="switchView('messages')">
         <i class="ti ti-messages"></i>Messages
       </a>
+      <a href="#" class="nav-link" :class="{ active: view === 'tasks' }" @click.prevent="switchView('tasks')">
+        <i class="ti ti-checkup-list"></i>Tasks
+        <span class="badge bg-warning text-white ms-auto" x-text="stats.openTasks ?? 0"></span>
+      </a>
       <a href="#" class="nav-link" :class="{ active: view === 'analytics' }" @click.prevent="switchView('analytics')">
         <i class="ti ti-chart-area-line"></i>Analytics
       </a>
@@ -96,20 +100,34 @@
           <span class="form-check-label small">Show offline</span>
         </label>
       </div>
-      <div class="text-muted small" x-show="stats.version" x-text="'v' + stats.version"></div>
-    </div>
-  </aside>
+	    <div class="text-muted small" x-show="stats.version" x-text="'v' + stats.version"></div>
+	  </div>
+	</aside>
 
   <!-- Mobile nav -->
   <div class="mobile-nav d-none border-bottom p-2 gap-1 position-fixed top-0 w-100 bg-dark" style="z-index:50">
-    <template x-for="v in ['overview','agents','messages','analytics']">
+    <template x-for="v in ['overview','agents','messages','tasks','analytics']">
       <button class="btn btn-sm" :class="view === v ? 'btn-primary' : 'btn-ghost-secondary'" @click="switchView(v)" x-text="v.charAt(0).toUpperCase() + v.slice(1)"></button>
     </template>
   </div>
 
   <!-- Main content -->
-  <main class="flex-grow-1 overflow-auto" style="height: 100vh">
-    <div class="container-xl py-3">
+	  <main class="flex-grow-1 overflow-auto" style="height: 100vh">
+	    <div class="container-xl py-3">
+	      <template x-if="authNeeded">
+	        <div class="alert alert-warning d-flex align-items-center gap-2 mb-3">
+	          <i class="ti ti-lock"></i>
+	          <input
+	            type="password"
+	            class="form-control form-control-sm"
+	            style="max-width: 320px"
+	            placeholder="Agent Relay token"
+	            x-model="authToken"
+	            @keydown.enter="saveTokenAndRefresh()"
+	          >
+	          <button class="btn btn-sm btn-warning" @click="saveTokenAndRefresh()">Unlock</button>
+	        </div>
+	      </template>
 
       <!-- ==================== OVERVIEW ==================== -->
       <div x-show="view === 'overview'" x-cloak class="fade-in">
@@ -148,7 +166,7 @@
                 <div class="d-flex align-items-center">
                   <div>
                     <div class="text-secondary small">Messages (24h)</div>
-                    <div class="h1 mb-0 text-info" x-text="stats.messages24h ?? 0"></div>
+	                    <div class="h1 mb-0 text-info" x-text="stats.messagesLast24h ?? 0"></div>
                   </div>
                   <i class="ti ti-mail ms-auto stat-card"></i>
                 </div>
@@ -446,6 +464,90 @@
         </div>
       </div>
 
+      <!-- ==================== TASKS ==================== -->
+      <div x-show="view === 'tasks'" x-cloak class="fade-in">
+        <div class="d-flex align-items-center mb-3 gap-2 flex-wrap">
+          <h2 class="page-title mb-0">Tasks</h2>
+          <div class="ms-auto d-flex gap-2 align-items-center flex-wrap">
+            <select class="form-select form-select-sm" style="width:auto; min-width: 150px" x-model="taskStatusFilter" @change="fetchTasks()">
+              <option value="">Status: Active</option>
+              <option value="open">Status: Open</option>
+              <option value="claimed">Status: Claimed</option>
+              <option value="in_progress">Status: In Progress</option>
+              <option value="blocked">Status: Blocked</option>
+              <option value="done">Status: Done</option>
+              <option value="failed">Status: Failed</option>
+              <option value="canceled">Status: Canceled</option>
+            </select>
+            <input type="text" class="form-control form-control-sm" style="width: 150px" placeholder="Source" x-model.debounce.300ms="taskSourceFilter" @input="fetchTasks()">
+            <button class="btn btn-sm btn-ghost-secondary" @click="fetchTasks()">
+              <i class="ti ti-refresh"></i>
+            </button>
+          </div>
+        </div>
+
+        <div class="row g-3">
+          <template x-for="task in filteredTasks" :key="task.id">
+            <div class="col-lg-6">
+              <div class="card">
+                <div class="card-body">
+                  <div class="d-flex align-items-start gap-2">
+                    <span class="badge" :class="severityClass(task.severity)" x-text="task.severity"></span>
+                    <div class="flex-grow-1 min-width-0">
+                      <div class="d-flex align-items-center gap-2">
+                        <span class="fw-bold text-truncate" x-text="task.title"></span>
+                        <span class="badge bg-secondary-lt" x-text="task.status"></span>
+                      </div>
+                      <div class="text-secondary small mt-1">
+                        <span x-text="'#' + task.id"></span>
+                        <span class="mx-1">·</span>
+                        <span x-text="task.source"></span>
+                        <span class="mx-1">·</span>
+                        <span x-text="displayTarget(task.target)"></span>
+                        <template x-if="task.occurrenceCount > 1">
+                          <span class="badge bg-warning-lt ms-1" x-text="'x' + task.occurrenceCount"></span>
+                        </template>
+                      </div>
+                      <div class="msg-body mt-2" x-text="task.body"></div>
+                      <div class="d-flex align-items-center gap-2 mt-2 flex-wrap">
+                        <template x-if="task.channel">
+                          <span class="badge bg-warning-lt" x-text="'#' + task.channel"></span>
+                        </template>
+                        <template x-if="task.dedupeKey">
+                          <span class="badge bg-secondary-lt" x-text="task.dedupeKey"></span>
+                        </template>
+                        <template x-if="task.claimedBy">
+                          <span class="badge bg-success-lt" x-text="'claimed by ' + displayTarget(task.claimedBy)"></span>
+                        </template>
+                        <template x-if="task.externalUrl">
+                          <a class="btn btn-sm btn-ghost-secondary py-0 px-1" :href="task.externalUrl" target="_blank" rel="noreferrer">
+                            <i class="ti ti-external-link" style="font-size:14px"></i>
+                          </a>
+                        </template>
+                        <button class="btn btn-sm btn-ghost-secondary py-0 px-1 ms-auto" @click="openTaskEvents(task)">
+                          <i class="ti ti-history" style="font-size:14px"></i>
+                          Events
+                        </button>
+                      </div>
+                    </div>
+                    <span class="text-secondary small" x-text="timeAgo(task.updatedAt)"></span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
+
+        <template x-if="filteredTasks.length === 0">
+          <div class="card">
+            <div class="card-body text-center text-secondary py-5">
+              <i class="ti ti-checkup-list" style="font-size:48px; opacity:0.3"></i>
+              <p class="mt-2">No tasks</p>
+            </div>
+          </div>
+        </template>
+      </div>
+
       <!-- ==================== ANALYTICS ==================== -->
       <div x-show="view === 'analytics'" x-cloak class="fade-in">
         <h2 class="page-title mb-3">Analytics</h2>
@@ -471,7 +573,7 @@
             <div class="card">
               <div class="card-body text-center">
                 <div class="text-secondary small">Messages (24h)</div>
-                <div class="h2 mb-0 text-info" x-text="stats.messages24h ?? 0"></div>
+	                <div class="h2 mb-0 text-info" x-text="stats.messagesLast24h ?? 0"></div>
               </div>
             </div>
           </div>
@@ -638,6 +740,38 @@
   </div>
   <div class="modal-backdrop fade show" x-show="threadOpen" x-cloak></div>
 
+  <!-- ==================== TASK EVENTS MODAL ==================== -->
+  <div class="modal modal-blur" :class="{ show: taskEventsOpen }" :style="taskEventsOpen ? 'display:block' : 'display:none'" tabindex="-1" @click.self="taskEventsOpen = false">
+    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Task Events</h5>
+          <button class="btn-close" @click="taskEventsOpen = false"></button>
+        </div>
+        <div class="modal-body p-0">
+          <template x-for="event in taskEvents" :key="event.id">
+            <div class="p-3 border-bottom">
+              <div class="d-flex align-items-center gap-2 mb-1">
+                <span class="badge" :class="severityClass(event.severity)" x-text="event.severity"></span>
+                <span class="fw-bold small" x-text="event.type"></span>
+                <span class="text-secondary small ms-auto" x-text="'#' + event.id + ' · ' + fmtTime(event.createdAt)"></span>
+              </div>
+              <div class="fw-bold small mb-1" x-text="event.title"></div>
+              <div class="msg-body" x-text="event.body"></div>
+            </div>
+          </template>
+          <template x-if="taskEvents.length === 0">
+            <div class="p-4 text-center text-secondary">No events</div>
+          </template>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-ghost-secondary" @click="taskEventsOpen = false">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="modal-backdrop fade show" x-show="taskEventsOpen" x-cloak></div>
+
   <!-- ==================== CONFIRM MODAL ==================== -->
   <div class="modal modal-blur" :class="{ show: confirmModal.show }" :style="confirmModal.show ? 'display:block' : 'display:none'" tabindex="-1" @click.self="confirmModal.show = false">
     <div class="modal-dialog modal-sm modal-dialog-centered">
@@ -683,502 +817,7 @@
 <script src="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest/dist/apexcharts.min.js"></script>
 <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>
-<script>
-function relay() {
-  const load = (key, fallback) => {
-    try { const v = localStorage.getItem('ar-' + key); return v !== null ? JSON.parse(v) : fallback; }
-    catch { return fallback; }
-  };
-
-  return {
-    // Navigation
-    view: load('view', 'overview'),
-
-    // Persisted preferences
-    showOffline: load('showOffline', false),
-    autoRefresh: load('autoRefresh', true),
-    agentSort: load('agentSort', 'status'),
-    agentSortDir: load('agentSortDir', 'asc'),
-
-    // Data
-    agents: [],
-    agentsById: {},
-    messages: [],
-    stats: {},
-
-    // UI state
-    selectedAgent: '',
-    replyTo: null,
-    composeOpen: false,
-    threadOpen: false,
-    threadMessages: [],
-    connected: false,
-
-    // Compose form
-    compose: { from: '', to: '', body: '', channel: '', subject: '', claimable: false },
-
-    // Modals
-    confirmModal: { show: false, title: '', message: '', action: null },
-    renameModal: { show: false, agentId: '', label: '' },
-
-    // Filters
-    channelFilter: '',
-    tagFilter: '',
-    agentStatusFilter: load('agentStatusFilter', ''),
-    agentTagFilter: load('agentTagFilter', ''),
-
-    // Charts
-    chartInstances: {},
-
-    // SSE + polling
-    _es: null,
-    _statsTimer: null,
-
-    async init() {
-      await this.refresh();
-      this.connectSSE();
-      // Slow poll for stats only — SSE handles real-time data
-      this._statsTimer = setInterval(() => this.fetchStats(), 30_000);
-
-      this.$watch('showOffline', v => this.save('showOffline', v));
-      this.$watch('agentSort', v => this.save('agentSort', v));
-      this.$watch('agentSortDir', v => this.save('agentSortDir', v));
-      this.$watch('agentStatusFilter', v => this.save('agentStatusFilter', v));
-      this.$watch('agentTagFilter', v => this.save('agentTagFilter', v));
-      this.$watch('view', v => {
-        this.save('view', v);
-        if (v === 'analytics') this.$nextTick(() => this.renderCharts());
-      });
-    },
-
-    connectSSE() {
-      if (this._es) this._es.close();
-      const es = new EventSource(window.location.origin + '/api/events');
-      this._es = es;
-
-      es.addEventListener('connected', () => { this.connected = true; });
-      es.onerror = () => { this.connected = false; };
-
-      es.addEventListener('message.new', (e) => {
-        const msg = JSON.parse(e.data);
-        if (this.messages.some(m => m.id === msg.id)) return;
-        if (this.selectedAgent && msg.from !== this.selectedAgent && msg.to !== this.selectedAgent) return;
-        if (this.channelFilter && msg.channel !== this.channelFilter) return;
-        this.messages.push(msg);
-        if (this.messages.length > 200) this.messages.shift();
-        this.stats.messages = (this.stats.messages ?? 0) + 1;
-      });
-
-      es.addEventListener('agent.status', (e) => {
-        const data = JSON.parse(e.data);
-        const idx = this.agents.findIndex(a => a.id === data.id);
-        if (idx >= 0) {
-          this.agents[idx] = data;
-        } else {
-          this.agents.push(data);
-        }
-        this.agentsById[data.id] = data;
-      });
-
-      es.addEventListener('agent.removed', (e) => {
-        const { id } = JSON.parse(e.data);
-        this.agents = this.agents.filter(a => a.id !== id);
-        delete this.agentsById[id];
-      });
-
-      es.addEventListener('message.claimed', (e) => {
-        const { messageId, claimedBy } = JSON.parse(e.data);
-        const msg = this.messages.find(m => m.id === messageId);
-        if (msg) msg.claimedBy = claimedBy;
-      });
-
-      es.addEventListener('message.deleted', (e) => {
-        const { messageId } = JSON.parse(e.data);
-        this.messages = this.messages.filter(m => m.id !== messageId);
-      });
-    },
-
-    save(key, value) {
-      localStorage.setItem('ar-' + key, JSON.stringify(value));
-    },
-
-    switchView(v) {
-      this.view = v;
-      if (v === 'messages') this.fetchMessages();
-    },
-
-    // ── API ──
-
-    async api(method, path, body) {
-      const opts = { method, headers: {} };
-      if (body) {
-        opts.headers['Content-Type'] = 'application/json';
-        opts.body = JSON.stringify(body);
-      }
-      const r = await fetch(window.location.origin + '/api' + path, opts);
-      if (!r.ok) {
-        const text = await r.text();
-        throw new Error(text || r.statusText);
-      }
-      return r.json();
-    },
-
-    async refresh() {
-      await Promise.all([this.fetchStats(), this.fetchAgents(), this.fetchMessages()]);
-    },
-
-    async fetchStats() {
-      try { this.stats = await this.api('GET', '/stats'); } catch {}
-    },
-
-    async fetchAgents() {
-      try {
-        this.agents = await this.api('GET', '/agents');
-        this.agentsById = {};
-        for (const a of this.agents) this.agentsById[a.id] = a;
-      } catch {}
-    },
-
-    async fetchMessages() {
-      try {
-        let path = '/messages?limit=100';
-        if (this.selectedAgent) path += '&for=' + encodeURIComponent(this.selectedAgent);
-        if (this.channelFilter) path += '&channel=' + encodeURIComponent(this.channelFilter);
-        this.messages = await this.api('GET', path);
-      } catch {}
-    },
-
-    // ── Computed ──
-
-    get onlineCount() {
-      return this.agents.filter(a => a.status !== 'offline').length;
-    },
-
-    get sortedAgents() {
-      let list = this.showOffline ? [...this.agents] : this.agents.filter(a => a.status !== 'offline');
-      if (this.agentStatusFilter) {
-        if (this.agentStatusFilter === 'starting') {
-          list = list.filter(a => a.status !== 'offline' && !a.ready);
-        } else {
-          list = list.filter(a => a.status === this.agentStatusFilter);
-        }
-      }
-      if (this.agentTagFilter) {
-        list = list.filter(a => (a.tags || []).includes(this.agentTagFilter));
-      }
-      const dir = this.agentSortDir === 'desc' ? -1 : 1;
-      return list.sort((a, b) => {
-        let cmp = 0;
-        switch (this.agentSort) {
-          case 'name': cmp = this.displayName(a).localeCompare(this.displayName(b)); break;
-          case 'status': {
-            const order = { online: 0, idle: 1, busy: 2, offline: 3 };
-            cmp = (order[a.status] ?? 9) - (order[b.status] ?? 9);
-            break;
-          }
-          case 'lastSeen': cmp = new Date(b.lastSeen) - new Date(a.lastSeen); break;
-          case 'created': cmp = new Date(b.createdAt) - new Date(a.createdAt); break;
-        }
-        return cmp * dir;
-      });
-    },
-
-    get filteredMessages() {
-      if (!this.tagFilter) return this.messages;
-      const tag = this.tagFilter;
-      return this.messages.filter(m => {
-        if (m.to === 'tag:' + tag) return true;
-        const fromAgent = this.agentsById[m.from];
-        if (fromAgent?.tags?.includes(tag)) return true;
-        const toAgent = this.agentsById[m.to];
-        if (toAgent?.tags?.includes(tag)) return true;
-        return false;
-      });
-    },
-
-    get groupedMessages() {
-      const threads = new Map();
-      for (const m of this.filteredMessages) {
-        const tid = m.threadId || m.id;
-        if (!threads.has(tid)) threads.set(tid, { threadId: tid, messages: [] });
-        threads.get(tid).messages.push(m);
-      }
-      for (const group of threads.values()) {
-        group.messages.sort((a, b) => a.id - b.id);
-      }
-      return [...threads.values()].sort((a, b) => {
-        const aLast = a.messages[a.messages.length - 1].id;
-        const bLast = b.messages[b.messages.length - 1].id;
-        return bLast - aLast;
-      });
-    },
-
-    get composeAgents() {
-      return this.showOffline ? this.agents : this.agents.filter(a => a.status !== 'offline');
-    },
-
-    get uniqueLabels() {
-      return [...new Set(this.agents.filter(a => a.label).map(a => a.label))];
-    },
-
-    get uniqueCaps() {
-      return [...new Set(this.agents.flatMap(a => a.capabilities || []))];
-    },
-
-    get uniqueTags() {
-      return [...new Set(this.agents.flatMap(a => a.tags || []))];
-    },
-
-    // ── Display helpers ──
-
-    displayName(agent) {
-      if (!agent) return '?';
-      return agent.label || agent.name || agent.id.slice(-12);
-    },
-
-    displayTarget(target) {
-      if (!target) return '?';
-      if (target === 'broadcast') return 'broadcast';
-      if (target.startsWith('tag:')) return '#' + target.slice(4);
-      if (target.startsWith('cap:')) return target.slice(4);
-      if (target.startsWith('label:')) return target.slice(6);
-      const agent = this.agentsById[target];
-      return agent ? this.displayName(agent) : target.slice(-8);
-    },
-
-    agentStatusTitle(agent) {
-      if (!agent) return '';
-      if (agent.status === 'offline') return 'offline';
-      if (agent.ready) return agent.status;
-      const lastSeenMs = new Date(agent.lastSeen).getTime();
-      if (!Number.isFinite(lastSeenMs)) return 'Trying to reconnect…';
-      const ageSec = Math.max(0, (Date.now() - lastSeenMs) / 1000);
-      return ageSec <= 45 ? 'Starting up…' : 'Trying to reconnect…';
-    },
-
-    timeAgo(iso) {
-      if (!iso) return '';
-      const ts = new Date(iso).getTime();
-      if (!Number.isFinite(ts)) return '';
-      const diff = Math.max(0, (Date.now() - ts) / 1000);
-      if (diff < 60) return Math.floor(diff) + 's ago';
-      if (diff < 3600) return Math.floor(diff / 60) + 'm ago';
-      if (diff < 86400) return Math.floor(diff / 3600) + 'h ago';
-      return Math.floor(diff / 86400) + 'd ago';
-    },
-
-    fmtTime(iso) {
-      if (!iso) return '';
-      return new Date(iso).toLocaleString();
-    },
-
-    // ── Actions ──
-
-    openCompose() {
-      if (!this.replyTo) {
-        this.compose = { from: 'user', to: '', body: '', channel: '', subject: '', claimable: false };
-      }
-      this.composeOpen = true;
-      this.$nextTick(() => this.$refs.composeBody?.focus());
-    },
-
-    openComposeToAgent(agent) {
-      this.replyTo = null;
-      this.compose = { from: 'user', to: agent.id, body: '', channel: '', subject: '', claimable: false };
-      this.composeOpen = true;
-      this.$nextTick(() => this.$refs.composeBody?.focus());
-    },
-
-    startReply(msg) {
-      this.replyTo = { id: msg.id, from: msg.from };
-      this.compose.to = msg.from;
-      this.compose.from = '';
-      this.compose.body = '';
-      this.compose.channel = msg.channel || '';
-      this.compose.subject = '';
-      this.compose.claimable = false;
-      this.openCompose();
-    },
-
-    cancelReply() {
-      this.replyTo = null;
-    },
-
-    async doSend() {
-      if (!this.compose.from || !this.compose.to || !this.compose.body) {
-        alert('From, To, and Message are required.');
-        return;
-      }
-      const payload = {
-        from: this.compose.from,
-        to: this.compose.to,
-        body: this.compose.body,
-      };
-      if (this.compose.channel) payload.channel = this.compose.channel;
-      if (this.compose.subject) payload.subject = this.compose.subject;
-      if (this.replyTo) payload.replyTo = this.replyTo.id;
-      if (this.compose.claimable) payload.claimable = true;
-
-      try {
-        await this.api('POST', '/messages', payload);
-        this.composeOpen = false;
-        this.replyTo = null;
-        this.compose = { from: '', to: '', body: '', channel: '', subject: '', claimable: false };
-      } catch (e) {
-        alert('Send failed: ' + e.message);
-      }
-    },
-
-    async doClaim(msgId) {
-      if (!this.compose.from && !this.selectedAgent) {
-        alert('Select a "From" agent first (open Compose to pick one).');
-        return;
-      }
-      const agentId = this.compose.from || this.selectedAgent;
-      try {
-        const result = await this.api('POST', '/messages/' + msgId + '/claim', { agentId });
-        if (!result.ok) alert('Claim failed: ' + (result.error || 'unknown'));
-      } catch (e) {
-        alert('Claim failed: ' + e.message);
-      }
-    },
-
-    async doDeleteMessage(id) {
-      try {
-        await this.api('DELETE', '/messages/' + id);
-        this.messages = this.messages.filter(m => m.id !== id);
-      } catch (e) {
-        alert('Delete failed: ' + e.message);
-      }
-    },
-
-    async openThread(threadId) {
-      this.threadMessages = [];
-      this.threadOpen = true;
-      try {
-        this.threadMessages = await this.api('GET', '/messages/' + threadId + '/thread');
-      } catch (e) {
-        alert('Failed to load thread: ' + e.message);
-      }
-    },
-
-    openRename(agent) {
-      this.renameModal = { show: true, agentId: agent.id, label: agent.label || '' };
-      this.$nextTick(() => this.$refs.renameInput?.focus());
-    },
-
-    async doRename() {
-      const label = this.renameModal.label.trim() || null;
-      try {
-        await this.api('PATCH', '/agents/' + this.renameModal.agentId + '/label', { label });
-        this.renameModal.show = false;
-      } catch (e) {
-        alert('Rename failed: ' + e.message);
-      }
-    },
-
-    openConfirm(title, message, action) {
-      this.confirmModal = { show: true, title, message, action };
-    },
-
-    async doDeleteAgent(id) {
-      try {
-        await this.api('DELETE', '/agents/' + id);
-        if (this.selectedAgent === id) this.selectedAgent = '';
-        this.agents = this.agents.filter(a => a.id !== id);
-        delete this.agentsById[id];
-      } catch (e) {
-        alert('Delete failed: ' + e.message);
-      }
-    },
-
-    // ── Charts ──
-
-    renderCharts() {
-      this.renderVolumeChart();
-      this.renderStatusChart();
-      this.renderAgentChart();
-    },
-
-    renderVolumeChart() {
-      if (this.chartInstances.volume) this.chartInstances.volume.destroy();
-      const el = document.querySelector('#chart-volume');
-      if (!el) return;
-
-      const buckets = {};
-      for (const m of this.messages) {
-        const day = m.createdAt ? new Date(m.createdAt).toISOString().split('T')[0] : null;
-        if (day) buckets[day] = (buckets[day] || 0) + 1;
-      }
-      const sorted = Object.entries(buckets).sort((a, b) => a[0].localeCompare(b[0]));
-
-      this.chartInstances.volume = new ApexCharts(el, {
-        chart: { type: 'area', height: 280, background: 'transparent', toolbar: { show: false } },
-        theme: { mode: 'dark' },
-        series: [{ name: 'Messages', data: sorted.map(([d, c]) => ({ x: d, y: c })) }],
-        xaxis: { type: 'datetime' },
-        stroke: { curve: 'smooth', width: 2 },
-        fill: { type: 'gradient', gradient: { opacityFrom: 0.4, opacityTo: 0 } },
-        dataLabels: { enabled: false },
-        colors: ['#4299e1'],
-        grid: { borderColor: 'rgba(255,255,255,0.06)' },
-      });
-      this.chartInstances.volume.render();
-    },
-
-    renderStatusChart() {
-      if (this.chartInstances.status) this.chartInstances.status.destroy();
-      const el = document.querySelector('#chart-status');
-      if (!el) return;
-
-      const counts = { online: 0, idle: 0, busy: 0, offline: 0 };
-      for (const a of this.agents) counts[a.status] = (counts[a.status] || 0) + 1;
-      const labels = Object.keys(counts).filter(k => counts[k] > 0);
-      const series = labels.map(k => counts[k]);
-      const colorMap = { online: '#48bb78', idle: '#48bb78', busy: '#ecc94b', offline: '#718096' };
-
-      this.chartInstances.status = new ApexCharts(el, {
-        chart: { type: 'donut', height: 280, background: 'transparent' },
-        theme: { mode: 'dark' },
-        series,
-        labels,
-        colors: labels.map(l => colorMap[l] || '#718096'),
-        legend: { position: 'bottom' },
-        dataLabels: { enabled: true },
-      });
-      this.chartInstances.status.render();
-    },
-
-    renderAgentChart() {
-      if (this.chartInstances.agents) this.chartInstances.agents.destroy();
-      const el = document.querySelector('#chart-agents');
-      if (!el) return;
-
-      const counts = {};
-      for (const m of this.messages) {
-        const name = this.displayTarget(m.from);
-        counts[name] = (counts[name] || 0) + 1;
-      }
-      const sorted = Object.entries(counts).sort((a, b) => b[1] - a[1]).slice(0, 10);
-
-      this.chartInstances.agents = new ApexCharts(el, {
-        chart: { type: 'bar', height: 280, background: 'transparent', toolbar: { show: false } },
-        theme: { mode: 'dark' },
-        series: [{ name: 'Messages', data: sorted.map(([, c]) => c) }],
-        xaxis: { categories: sorted.map(([n]) => n) },
-        colors: ['#4299e1'],
-        plotOptions: { bar: { borderRadius: 4, distributed: true } },
-        legend: { show: false },
-        grid: { borderColor: 'rgba(255,255,255,0.06)' },
-      });
-      this.chartInstances.agents.render();
-    },
-  };
-}
+<script src="/dashboard.js"></script>
 
-document.addEventListener('alpine:init', () => {
-  Alpine.data('relay', relay);
-});
-</script>
 </body>
 </html>