@action-llama/action-llama 0.13.7 → 0.14.1

package/dist/gateway/views/dashboard-page.js

@@ -1,36 +1,12 @@
-function escapeHtml(str) {
-    return str
-        .replace(/&/g, "&")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;")
-        .replace(/"/g, "&quot;");
-}
+import { escapeHtml, formatDuration, formatTime, formatCost, formatTokens, renderLayout } from "./layout.js";
 function stateColor(state) {
     switch (state) {
-        case "running": return "#22c55e";
-        case "building": return "#eab308";
-        case "error": return "#ef4444";
-        case "idle": return "#6b7280";
+        case "running": return { dot: "bg-green-500", text: "text-green-600 dark:text-green-400" };
+        case "building": return { dot: "bg-yellow-500", text: "text-yellow-600 dark:text-yellow-400" };
+        case "error": return { dot: "bg-red-500", text: "text-red-600 dark:text-red-400" };
+        case "idle": return { dot: "bg-slate-400", text: "text-slate-500 dark:text-slate-400" };
     }
 }
-function formatDuration(ms) {
-    if (ms < 1000)
-        return `${ms}ms`;
-    const s = Math.floor(ms / 1000);
-    if (s < 60)
-        return `${s}s`;
-    const m = Math.floor(s / 60);
-    return `${m}m ${s % 60}s`;
-}
-function formatTime(date) {
-    if (!date)
-        return "\u2014";
-    return date.toLocaleTimeString();
-}
-function formatLogLine(log) {
-    const time = log.timestamp.toLocaleTimeString();
-    return `<span class="log-time">${escapeHtml(time)}</span> <span class="log-agent">[${escapeHtml(log.agent)}]</span> ${escapeHtml(log.message)}`;
-}
 function formatScale(agent) {
     if (agent.state === "running" && agent.scale > 1)
         return `running ${agent.runningCount}/${agent.scale}`;
@@ -38,262 +14,229 @@ function formatScale(agent) {
         return `${agent.state} (\u00d7${agent.scale})`;
     return agent.state;
 }
-function renderAgentRow(agent) {
-    const color = stateColor(agent.state);
-    const statusText = agent.statusText || agent.lastError || "\u2014";
+function renderStatCard(label, value, id) {
+    const idAttr = id ? ` id="${id}"` : "";
+    return `<div class="bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800 p-3 sm:p-4">
+    <div class="text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-1">${escapeHtml(label)}</div>
+    <div class="text-lg sm:text-xl font-semibold text-slate-900 dark:text-white"${idAttr}>${value}</div>
+  </div>`;
+}
+function renderTokenBar(agent, totalSessionTokens) {
+    const tokens = agent.cumulativeUsage?.totalTokens ?? 0;
+    const pct = totalSessionTokens > 0 ? Math.round((tokens / totalSessionTokens) * 100) : 0;
+    return `<div class="flex items-center gap-2">
+    <div class="flex-1 h-2 bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden" style="min-width:60px">
+      <div class="h-full bg-blue-500 rounded-full" style="width:${pct}%"></div>
+    </div>
+    <span class="text-xs text-slate-500 dark:text-slate-400 whitespace-nowrap">${formatTokens(tokens)}</span>
+  </div>`;
+}
+function renderAgentRow(agent, totalSessionTokens) {
+    const colors = stateColor(agent.state);
     const toggleLabel = agent.enabled ? "Disable" : "Enable";
     const toggleAction = agent.enabled ? "disable" : "enable";
-    return `<tr data-agent="${escapeHtml(agent.name)}">
-    <td><a href="/dashboard/agents/${escapeHtml(agent.name)}/logs">${escapeHtml(agent.name)}</a></td>
-    <td><span class="state-dot" style="background:${color}"></span> ${escapeHtml(formatScale(agent))}</td>
-    <td class="status-text">${escapeHtml(statusText)}</td>
-    <td>${formatTime(agent.lastRunAt)}</td>
-    <td>${agent.lastRunDuration != null ? formatDuration(agent.lastRunDuration) : "\u2014"}</td>
-    <td>${formatTime(agent.nextRunAt)}</td>
-    <td class="actions">
-      <button class="btn btn-sm" onclick="triggerAgent('${escapeHtml(agent.name)}')">Run</button>
-      <button class="btn btn-sm btn-outline" onclick="toggleAgent('${escapeHtml(agent.name)}','${toggleAction}')">${toggleLabel}</button>
+    const descHtml = agent.description
+        ? `<div class="text-xs text-slate-400 mt-0.5">${escapeHtml(agent.description)}</div>`
+        : "";
+    return `<tr data-agent="${escapeHtml(agent.name)}" class="hover:bg-slate-50 dark:hover:bg-slate-900/50 transition-colors">
+    <td class="px-3 py-2.5">
+      <a href="/dashboard/agents/${escapeHtml(agent.name)}" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">${escapeHtml(agent.name)}</a>
+      ${descHtml}
+    </td>
+    <td class="px-3 py-2.5"><span class="state-dot ${colors.dot} mr-1.5 inline-block"></span><span class="${colors.text} text-sm">${escapeHtml(formatScale(agent))}</span></td>
+    <td class="px-3 py-2.5 text-sm text-slate-600 dark:text-slate-300">${formatTime(agent.lastRunAt)}</td>
+    <td class="px-3 py-2.5 text-sm text-slate-600 dark:text-slate-300">${agent.lastRunDuration != null ? formatDuration(agent.lastRunDuration) : "\u2014"}</td>
+    <td class="px-3 py-2.5 text-sm text-slate-600 dark:text-slate-300">${formatTime(agent.nextRunAt)}</td>
+    <td class="px-3 py-2.5" style="min-width:120px">${renderTokenBar(agent, totalSessionTokens)}</td>
+    <td class="px-3 py-2.5 whitespace-nowrap">
+      <button class="px-2 py-1 text-xs rounded font-bold bg-green-600 hover:bg-green-700 text-white transition-colors mr-1" onclick="triggerAgent('${escapeHtml(agent.name)}')">Run</button>
+      <button class="px-2 py-1 text-xs rounded font-bold bg-red-600 hover:bg-red-700 text-white transition-colors mr-1" onclick="killAgent('${escapeHtml(agent.name)}')">Kill</button>
+      <button class="px-2 py-1 text-xs rounded font-bold border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 transition-colors" onclick="toggleAgent('${escapeHtml(agent.name)}','${toggleAction}')">${toggleLabel}</button>
     </td>
   </tr>`;
 }
 function renderAgentCard(agent) {
-    const color = stateColor(agent.state);
-    const statusText = agent.statusText || agent.lastError || "\u2014";
+    const colors = stateColor(agent.state);
     const toggleLabel = agent.enabled ? "Disable" : "Enable";
     const toggleAction = agent.enabled ? "disable" : "enable";
-    return `<div class="agent-card">
-    <a href="/dashboard/agents/${escapeHtml(agent.name)}/logs" class="card-link">
-      <div class="card-header">
-        <span class="card-name">${escapeHtml(agent.name)}</span>
-        <span><span class="state-dot" style="background:${color}"></span>${escapeHtml(formatScale(agent))}</span>
+    const descHtml = agent.description
+        ? `<div class="text-xs text-slate-400 mb-1">${escapeHtml(agent.description)}</div>`
+        : "";
+    return `<div class="bg-white dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800 p-3 mb-2">
+    <a href="/dashboard/agents/${escapeHtml(agent.name)}" class="block">
+      <div class="flex justify-between items-center mb-1">
+        <span class="text-blue-600 dark:text-blue-400 font-semibold text-sm">${escapeHtml(agent.name)}</span>
+        <span class="text-xs ${colors.text}"><span class="state-dot ${colors.dot} mr-1 inline-block"></span>${escapeHtml(formatScale(agent))}</span>
       </div>
-      <div class="card-status">${escapeHtml(statusText)}</div>
-      <div class="card-meta">
+      ${descHtml}
+      <div class="flex gap-3 text-xs text-slate-400">
         <span>Last: ${formatTime(agent.lastRunAt)}</span>
         <span>${agent.lastRunDuration != null ? formatDuration(agent.lastRunDuration) : ""}</span>
         <span>Next: ${formatTime(agent.nextRunAt)}</span>
       </div>
     </a>
-    <div class="card-actions">
-      <button class="btn btn-sm" onclick="triggerAgent('${escapeHtml(agent.name)}')">Run</button>
-      <button class="btn btn-sm btn-outline" onclick="toggleAgent('${escapeHtml(agent.name)}','${toggleAction}')">${toggleLabel}</button>
+    <div class="flex gap-2 mt-2 pt-2 border-t border-slate-100 dark:border-slate-800">
+      <button class="px-2.5 py-1 text-xs rounded font-bold bg-green-600 hover:bg-green-700 text-white transition-colors" onclick="triggerAgent('${escapeHtml(agent.name)}')">Run</button>
+      <button class="px-2.5 py-1 text-xs rounded font-bold bg-red-600 hover:bg-red-700 text-white transition-colors" onclick="killAgent('${escapeHtml(agent.name)}')">Kill</button>
+      <button class="px-2.5 py-1 text-xs rounded font-bold border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 transition-colors" onclick="toggleAgent('${escapeHtml(agent.name)}','${toggleAction}')">${toggleLabel}</button>
     </div>
   </div>`;
 }
+function formatLogLine(log) {
+    const time = log.timestamp.toLocaleTimeString();
+    return `<span class="text-slate-400">${escapeHtml(time)}</span> <span class="text-indigo-400">[${escapeHtml(log.agent)}]</span> ${escapeHtml(log.message)}`;
+}
 export function renderDashboardPage(agents, schedulerInfo, recentLogs) {
-    const mode = schedulerInfo?.mode || "host";
-    const runtime = schedulerInfo?.runtime || "\u2014";
-    const uptime = schedulerInfo ? formatDuration(Date.now() - schedulerInfo.startedAt.getTime()) : "\u2014";
-    const cronCount = schedulerInfo?.cronJobCount || 0;
-    const webhooks = schedulerInfo?.webhooksActive ? "active" : "inactive";
-    return `<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Action Llama Dashboard</title>
-<style>
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: #0f172a; color: #e2e8f0; padding: 16px; }
-  h1 { font-size: 1.5rem; margin-bottom: 8px; color: #f8fafc; }
-  .header { display: flex; align-items: baseline; gap: 12px 20px; margin-bottom: 24px; flex-wrap: wrap; }
-  .header-stat { font-size: 0.85rem; color: #94a3b8; white-space: nowrap; }
-  .header-stat strong { color: #cbd5e1; }
-
-  /* Desktop table */
-  .agent-table { width: 100%; border-collapse: collapse; margin-bottom: 32px; }
-  .agent-table th { text-align: left; padding: 8px 12px; border-bottom: 2px solid #334155; color: #94a3b8; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
-  .agent-table td { padding: 8px 12px; border-bottom: 1px solid #1e293b; font-size: 0.9rem; }
-  .agent-table td a { color: #60a5fa; text-decoration: none; }
-  .agent-table td a:hover { text-decoration: underline; }
-  .agent-table tr:hover { background: #1e293b; }
-  .status-text { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #94a3b8; }
-
-  /* Mobile cards (hidden on desktop) */
-  .agent-cards { display: none; margin-bottom: 24px; }
-  .agent-card { display: block; background: #1e293b; border-radius: 8px; padding: 12px 16px; margin-bottom: 8px; text-decoration: none; color: #e2e8f0; border: 1px solid #334155; }
-  .agent-card:active { background: #334155; }
-  .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
-  .card-name { color: #60a5fa; font-weight: 600; font-size: 0.95rem; }
-  .card-status { color: #94a3b8; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 6px; }
-  .card-meta { display: flex; gap: 12px; font-size: 0.75rem; color: #64748b; flex-wrap: wrap; }
-
-  .state-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
-
-  h2 { font-size: 1.1rem; margin-bottom: 12px; color: #f8fafc; }
-  .logs { background: #1e293b; border-radius: 8px; padding: 12px; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.75rem; line-height: 1.6; max-height: 300px; overflow-y: auto; }
-  .log-line { white-space: pre-wrap; word-break: break-all; }
-  .log-time { color: #64748b; }
-  .log-agent { color: #818cf8; }
-  .empty { color: #475569; font-style: italic; }
-
-  .btn { background: #334155; color: #e2e8f0; border: 1px solid #475569; border-radius: 4px; padding: 4px 10px; font-size: 0.75rem; cursor: pointer; transition: background 0.15s; }
-  .btn:hover { background: #475569; }
-  .btn-sm { padding: 3px 8px; font-size: 0.7rem; }
-  .btn-outline { background: transparent; }
-  .btn-outline:hover { background: #1e293b; }
-  .btn-primary { background: #3b82f6; border-color: #3b82f6; color: #fff; }
-  .btn-primary:hover { background: #2563eb; }
-  .actions { white-space: nowrap; }
-  .actions button { margin-right: 4px; }
-  .card-actions { display: flex; gap: 6px; margin-top: 8px; }
-  .card-link { display: block; text-decoration: none; color: #e2e8f0; }
-  .header-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
-  .header-actions a { color: #94a3b8; font-size: 0.85rem; text-decoration: none; }
-  .header-actions a:hover { color: #e2e8f0; }
-
-  @media (max-width: 640px) {
-    body { padding: 12px; }
-    h1 { font-size: 1.25rem; }
-    .header { gap: 6px 14px; margin-bottom: 16px; }
-    .header-stat { font-size: 0.75rem; }
-    .agent-table { display: none; }
-    .agent-cards { display: block; }
-    .logs { font-size: 0.7rem; padding: 10px; max-height: 250px; }
-  }
-
-  @media (min-width: 641px) {
-    body { padding: 24px; }
-    .logs { font-size: 0.8rem; padding: 16px; }
-  }
-</style>
-</head>
-<body>
-  <div class="header">
-    <h1>Action Llama</h1>
-    <span class="header-stat">Mode: <strong>${escapeHtml(mode)}</strong></span>
-    <span class="header-stat">Runtime: <strong>${escapeHtml(runtime)}</strong></span>
-    <span class="header-stat">Agents: <strong>${agents.length}</strong></span>
-    <span class="header-stat">Cron: <strong>${cronCount}</strong></span>
-    <span class="header-stat">Webhooks: <strong>${escapeHtml(webhooks)}</strong></span>
-    <span class="header-stat">Uptime: <strong id="uptime">${escapeHtml(uptime)}</strong></span>
-    <span class="header-actions">
-      <button id="pause-btn" class="btn btn-sm" onclick="togglePause()">${schedulerInfo?.paused ? "Resume" : "Pause"}</button>
-      <a href="#" onclick="doLogout(); return false;">Logout</a>
-    </span>
-  </div>
+    const sessionTokens = agents.reduce((sum, a) => sum + (a.cumulativeUsage?.totalTokens ?? 0), 0);
+    const sessionCost = agents.reduce((sum, a) => sum + (a.cumulativeUsage?.cost ?? 0), 0);
+    const content = `
+    <div class="flex flex-wrap items-center justify-between gap-3 mb-6">
+      <h1 class="text-xl sm:text-2xl font-bold text-slate-900 dark:text-white">Dashboard</h1>
+      <div class="flex items-center gap-2">
+        <button id="pause-btn" class="px-3 py-1.5 text-sm rounded-md font-bold border border-yellow-500 bg-yellow-500 hover:bg-yellow-600 text-white transition-colors" onclick="togglePause()">${schedulerInfo?.paused ? "Resume" : "Pause"}</button>
+      </div>
+    </div>
 
-  <table class="agent-table">
-    <thead>
-      <tr>
-        <th>Agent</th>
-        <th>State</th>
-        <th>Status</th>
-        <th>Last Run</th>
-        <th>Duration</th>
-        <th>Next Run</th>
-        <th>Actions</th>
-      </tr>
-    </thead>
-    <tbody id="agent-table-body">
-      ${agents.length > 0 ? agents.map(renderAgentRow).join("\n      ") : '<tr><td colspan="7" class="empty">No agents registered</td></tr>'}
-    </tbody>
-  </table>
+    <div class="grid grid-cols-2 gap-3 mb-6">
+      ${renderStatCard("Session Tokens", formatTokens(sessionTokens), "stat-tokens")}
+      ${renderStatCard("Session Cost", formatCost(sessionCost), "stat-cost")}
+    </div>
 
-  <div class="agent-cards" id="agent-cards">
-    ${agents.length > 0 ? agents.map(renderAgentCard).join("\n    ") : '<div class="empty">No agents registered</div>'}
-  </div>
+    <!-- Desktop table -->
+    <div class="hidden sm:block mb-8">
+      <table class="w-full">
+        <thead>
+          <tr class="border-b-2 border-slate-200 dark:border-slate-700">
+            <th class="text-left px-3 py-2 text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wider font-medium">Agent</th>
+            <th class="text-left px-3 py-2 text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wider font-medium">State</th>
+            <th class="text-left px-3 py-2 text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wider font-medium">Last Run</th>
+            <th class="text-left px-3 py-2 text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wider font-medium">Duration</th>
+            <th class="text-left px-3 py-2 text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wider font-medium">Next Run</th>
+            <th class="text-left px-3 py-2 text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wider font-medium">Tokens Used</th>
+            <th class="text-left px-3 py-2 text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wider font-medium">Actions</th>
+          </tr>
+        </thead>
+        <tbody id="agent-table-body" class="divide-y divide-slate-100 dark:divide-slate-800">
+          ${agents.length > 0 ? agents.map((a) => renderAgentRow(a, sessionTokens)).join("\n") : '<tr><td colspan="7" class="px-3 py-8 text-center text-slate-400 italic">No agents registered</td></tr>'}
+        </tbody>
+      </table>
+    </div>
 
-  <h2>Recent Activity</h2>
-  <div class="logs" id="recent-logs">
-    ${recentLogs.length > 0 ? recentLogs.map((l) => `<div class="log-line">${formatLogLine(l)}</div>`).join("\n    ") : '<div class="empty">No recent activity</div>'}
-  </div>
+    <!-- Mobile cards -->
+    <div class="sm:hidden mb-6" id="agent-cards">
+      ${agents.length > 0 ? agents.map(renderAgentCard).join("\n") : '<div class="text-slate-400 italic text-center py-6">No agents registered</div>'}
+    </div>
 
-  <script>
-    const stateColors = { running: "#22c55e", building: "#eab308", error: "#ef4444", idle: "#6b7280" };
+    <h2 class="text-base font-semibold text-slate-900 dark:text-white mb-3">Recent Activity</h2>
+    <div class="bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800 p-3 sm:p-4 font-mono text-xs sm:text-sm leading-relaxed max-h-72 overflow-y-auto scrollbar-thin" id="recent-logs">
+      ${recentLogs.length > 0 ? recentLogs.map((l) => `<div class="whitespace-pre-wrap break-all">${formatLogLine(l)}</div>`).join("\n") : '<div class="text-slate-400 italic">No recent activity</div>'}
+    </div>`;
+    const scripts = `<script>
+    var stateColors = { running: "bg-green-500", building: "bg-yellow-500", error: "bg-red-500", idle: "bg-slate-400" };
+    var stateTextColors = { running: "text-green-600 dark:text-green-400", building: "text-yellow-600 dark:text-yellow-400", error: "text-red-600 dark:text-red-400", idle: "text-slate-500 dark:text-slate-400" };
 
-    function esc(s) { const d = document.createElement("div"); d.textContent = s; return d.innerHTML; }
+    function fmtScale(a) {
+      if (a.state === "running" && a.scale > 1) return "running " + a.runningCount + "/" + a.scale;
+      if (a.scale > 1) return a.state + " (\\u00d7" + a.scale + ")";
+      return a.state;
+    }
 
-    function fmtDur(ms) {
-      if (ms < 1000) return ms + "ms";
-      const s = Math.floor(ms / 1000);
-      if (s < 60) return s + "s";
-      return Math.floor(s / 60) + "m " + (s % 60) + "s";
+    function sessionTotalTokens(agents) {
+      var total = 0;
+      for (var i = 0; i < agents.length; i++) {
+        if (agents[i].cumulativeUsage) total += agents[i].cumulativeUsage.totalTokens || 0;
+      }
+      return total;
     }
 
-    function fmtTime(iso) {
-      if (!iso) return "\\u2014";
-      return new Date(iso).toLocaleTimeString();
+    function sessionTotalCost(agents) {
+      var total = 0;
+      for (var i = 0; i < agents.length; i++) {
+        if (agents[i].cumulativeUsage) total += agents[i].cumulativeUsage.cost || 0;
+      }
+      return total;
     }
 
-    function fmtScale(a) {
-      if (a.state === "running" && a.scale > 1) return "running " + a.runningCount + "/" + a.scale;
-      if (a.scale > 1) return a.state + " (\\u00d7" + a.scale + ")";
-      return a.state;
+    function tokenBar(a, totalTokens) {
+      var tokens = (a.cumulativeUsage && a.cumulativeUsage.totalTokens) || 0;
+      var pct = totalTokens > 0 ? Math.round((tokens / totalTokens) * 100) : 0;
+      return '<div class="flex items-center gap-2">' +
+        '<div class="flex-1 h-2 bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden" style="min-width:60px">' +
+        '<div class="h-full bg-blue-500 rounded-full" style="width:' + pct + '%"></div></div>' +
+        '<span class="text-xs text-slate-500 dark:text-slate-400 whitespace-nowrap">' + fmtTokens(tokens) + '</span></div>';
     }
 
+    var _cachedAgents = null;
+
     function renderRow(a) {
-      const color = stateColors[a.state] || "#6b7280";
-      const status = a.statusText || a.lastError || "\\u2014";
-      const toggleLabel = a.enabled ? "Disable" : "Enable";
-      const toggleAction = a.enabled ? "disable" : "enable";
-      return '<tr data-agent="' + esc(a.name) + '">' +
-        '<td><a href="/dashboard/agents/' + esc(a.name) + '/logs">' + esc(a.name) + '</a></td>' +
-        '<td><span class="state-dot" style="background:' + color + '"></span> ' + esc(fmtScale(a)) + '</td>' +
-        '<td class="status-text">' + esc(status) + '</td>' +
-        '<td>' + fmtTime(a.lastRunAt) + '</td>' +
-        '<td>' + (a.lastRunDuration != null ? fmtDur(a.lastRunDuration) : "\\u2014") + '</td>' +
-        '<td>' + fmtTime(a.nextRunAt) + '</td>' +
-        '<td class="actions"><button class="btn btn-sm" onclick="triggerAgent(\\'' + esc(a.name) + '\\')">Run</button>' +
-        '<button class="btn btn-sm btn-outline" onclick="toggleAgent(\\'' + esc(a.name) + '\\',\\'' + toggleAction + '\\')">' + toggleLabel + '</button></td>' +
-        '</tr>';
+      var dotClass = stateColors[a.state] || "bg-slate-400";
+      var textClass = stateTextColors[a.state] || "text-slate-400";
+      var toggleLabel = a.enabled ? "Disable" : "Enable";
+      var toggleAction = a.enabled ? "disable" : "enable";
+      var totalTok = _cachedAgents ? sessionTotalTokens(_cachedAgents) : 0;
+      return '<tr data-agent="' + esc(a.name) + '" class="hover:bg-slate-50 dark:hover:bg-slate-900/50 transition-colors">' +
+        '<td class="px-3 py-2.5"><a href="/dashboard/agents/' + esc(a.name) + '" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">' + esc(a.name) + '</a></td>' +
+        '<td class="px-3 py-2.5"><span class="state-dot ' + dotClass + ' mr-1.5 inline-block"></span><span class="' + textClass + ' text-sm">' + esc(fmtScale(a)) + '</span></td>' +
+        '<td class="px-3 py-2.5 text-sm text-slate-600 dark:text-slate-300">' + fmtTime(a.lastRunAt) + '</td>' +
+        '<td class="px-3 py-2.5 text-sm text-slate-600 dark:text-slate-300">' + (a.lastRunDuration != null ? fmtDur(a.lastRunDuration) : "\\u2014") + '</td>' +
+        '<td class="px-3 py-2.5 text-sm text-slate-600 dark:text-slate-300">' + fmtTime(a.nextRunAt) + '</td>' +
+        '<td class="px-3 py-2.5" style="min-width:120px">' + tokenBar(a, totalTok) + '</td>' +
+        '<td class="px-3 py-2.5 whitespace-nowrap">' +
+        '<button class="px-2 py-1 text-xs rounded font-bold bg-green-600 hover:bg-green-700 text-white transition-colors mr-1" onclick="triggerAgent(\\'' + esc(a.name) + '\\')">Run</button>' +
+        '<button class="px-2 py-1 text-xs rounded font-bold bg-red-600 hover:bg-red-700 text-white transition-colors mr-1" onclick="killAgent(\\'' + esc(a.name) + '\\')">Kill</button>' +
+        '<button class="px-2 py-1 text-xs rounded font-bold border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 transition-colors" onclick="toggleAgent(\\'' + esc(a.name) + '\\',\\'' + toggleAction + '\\')">' + toggleLabel + '</button></td></tr>';
     }
 
     function renderCard(a) {
-      const color = stateColors[a.state] || "#6b7280";
-      const status = a.statusText || a.lastError || "\\u2014";
-      const toggleLabel = a.enabled ? "Disable" : "Enable";
-      const toggleAction = a.enabled ? "disable" : "enable";
-      return '<div class="agent-card"><a href="/dashboard/agents/' + esc(a.name) + '/logs" class="card-link">' +
-        '<div class="card-header"><span class="card-name">' + esc(a.name) + '</span>' +
-        '<span><span class="state-dot" style="background:' + color + '"></span>' + esc(fmtScale(a)) + '</span></div>' +
-        '<div class="card-status">' + esc(status) + '</div>' +
-        '<div class="card-meta"><span>Last: ' + fmtTime(a.lastRunAt) + '</span>' +
-        '<span>' + (a.lastRunDuration != null ? fmtDur(a.lastRunDuration) : "") + '</span>' +
-        '<span>Next: ' + fmtTime(a.nextRunAt) + '</span></div></a>' +
-        '<div class="card-actions"><button class="btn btn-sm" onclick="triggerAgent(\\'' + esc(a.name) + '\\')">Run</button>' +
-        '<button class="btn btn-sm btn-outline" onclick="toggleAgent(\\'' + esc(a.name) + '\\',\\'' + toggleAction + '\\')">' + toggleLabel + '</button></div></div>';
+      var dotClass = stateColors[a.state] || "bg-slate-400";
+      var textClass = stateTextColors[a.state] || "text-slate-400";
+      var toggleLabel = a.enabled ? "Disable" : "Enable";
+      var toggleAction = a.enabled ? "disable" : "enable";
+      return '<div class="bg-white dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800 p-3 mb-2">' +
+        '<a href="/dashboard/agents/' + esc(a.name) + '" class="block">' +
+        '<div class="flex justify-between items-center mb-1"><span class="text-blue-600 dark:text-blue-400 font-semibold text-sm">' + esc(a.name) + '</span>' +
+        '<span class="text-xs ' + textClass + '"><span class="state-dot ' + dotClass + ' mr-1 inline-block"></span>' + esc(fmtScale(a)) + '</span></div>' +
+        '<div class="flex gap-3 text-xs text-slate-400"><span>Last: ' + fmtTime(a.lastRunAt) + '</span><span>' + (a.lastRunDuration != null ? fmtDur(a.lastRunDuration) : "") + '</span><span>Next: ' + fmtTime(a.nextRunAt) + '</span></div></a>' +
+        '<div class="flex gap-2 mt-2 pt-2 border-t border-slate-100 dark:border-slate-800">' +
+        '<button class="px-2.5 py-1 text-xs rounded font-bold bg-green-600 hover:bg-green-700 text-white transition-colors" onclick="triggerAgent(\\'' + esc(a.name) + '\\')">Run</button>' +
+        '<button class="px-2.5 py-1 text-xs rounded font-bold bg-red-600 hover:bg-red-700 text-white transition-colors" onclick="killAgent(\\'' + esc(a.name) + '\\')">Kill</button>' +
+        '<button class="px-2.5 py-1 text-xs rounded font-bold border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 transition-colors" onclick="toggleAgent(\\'' + esc(a.name) + '\\',\\'' + toggleAction + '\\')">' + toggleLabel + '</button></div></div>';
     }
 
     function renderLog(l) {
-      const t = new Date(l.timestamp).toLocaleTimeString();
-      return '<div class="log-line"><span class="log-time">' + esc(t) + '</span> <span class="log-agent">[' + esc(l.agent) + ']</span> ' + esc(l.message) + '</div>';
+      var t = new Date(l.timestamp).toLocaleTimeString();
+      return '<div class="whitespace-pre-wrap break-all"><span class="text-slate-400">' + esc(t) + '</span> <span class="text-indigo-400">[' + esc(l.agent) + ']</span> ' + esc(l.message) + '</div>';
     }
 
-    const es = new EventSource("/dashboard/api/status-stream");
+    var es = new EventSource("/dashboard/api/status-stream");
     es.onmessage = function(e) {
-      const data = JSON.parse(e.data);
-
+      var data = JSON.parse(e.data);
       if (data.agents) {
-        // Update desktop table
-        const tbody = document.getElementById("agent-table-body");
+        _cachedAgents = data.agents;
+        var tbody = document.getElementById("agent-table-body");
         if (data.agents.length > 0) {
           tbody.innerHTML = data.agents.map(renderRow).join("");
         } else {
-          tbody.innerHTML = '<tr><td colspan="7" class="empty">No agents registered</td></tr>';
+          tbody.innerHTML = '<tr><td colspan="7" class="px-3 py-8 text-center text-slate-400 italic">No agents registered</td></tr>';
         }
-
-        // Update mobile cards
-        const cards = document.getElementById("agent-cards");
+        var cards = document.getElementById("agent-cards");
         if (data.agents.length > 0) {
           cards.innerHTML = data.agents.map(renderCard).join("");
         } else {
-          cards.innerHTML = '<div class="empty">No agents registered</div>';
+          cards.innerHTML = '<div class="text-slate-400 italic text-center py-6">No agents registered</div>';
         }
+        // Update session stats
+        var tokEl = document.getElementById("stat-tokens");
+        var costEl = document.getElementById("stat-cost");
+        if (tokEl) tokEl.textContent = fmtTokens(sessionTotalTokens(data.agents));
+        if (costEl) costEl.textContent = fmtCost(sessionTotalCost(data.agents));
       }
-
-      // Update recent logs
-      const logsDiv = document.getElementById("recent-logs");
       if (data.recentLogs && data.recentLogs.length > 0) {
+        var logsDiv = document.getElementById("recent-logs");
         logsDiv.innerHTML = data.recentLogs.map(renderLog).join("");
         logsDiv.scrollTop = logsDiv.scrollHeight;
       }
-
-      // Update uptime and pause button
       if (data.schedulerInfo) {
-        if (data.schedulerInfo.startedAt) {
-          document.getElementById("uptime").textContent = fmtDur(Date.now() - new Date(data.schedulerInfo.startedAt).getTime());
-        }
         var btn = document.getElementById("pause-btn");
         if (btn) {
           schedulerPaused = !!data.schedulerInfo.paused;
@@ -304,29 +247,20 @@ export function renderDashboardPage(agents, schedulerInfo, recentLogs) {
 
     var schedulerPaused = ${schedulerInfo?.paused ? "true" : "false"};
 
-    function ctrlPost(path) {
-      return fetch(path, { method: "POST", credentials: "same-origin" }).then(function(r) { return r.json(); });
-    }
-
     function triggerAgent(name) {
       ctrlPost("/control/trigger/" + encodeURIComponent(name));
     }
-
     function toggleAgent(name, action) {
       ctrlPost("/control/agents/" + encodeURIComponent(name) + "/" + action);
     }
-
+    function killAgent(name) {
+      if (!confirm("Kill all instances of agent '" + name + "'?")) return;
+      ctrlPost("/control/agents/" + encodeURIComponent(name) + "/kill");
+    }
     function togglePause() {
       ctrlPost(schedulerPaused ? "/control/resume" : "/control/pause");
     }
-
-    function doLogout() {
-      fetch("/logout", { method: "POST", credentials: "same-origin" }).then(function() {
-        window.location.href = "/login";
-      });
-    }
-  </script>
-</body>
-</html>`;
+  </script>`;
+    return renderLayout({ title: "Dashboard", content, scripts });
 }
 //# sourceMappingURL=dashboard-page.js.map

package/dist/gateway/views/dashboard-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard-page.js","sourceRoot":"","sources":["../../../src/gateway/views/dashboard-page.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"dashboard-page.js","sourceRoot":"","sources":["../../../src/gateway/views/dashboard-page.ts"],"names":[],"mappings":"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"}

package/dist/gateway/views/instance-detail-page.d.ts

@@ -0,0 +1,24 @@
+export interface InstanceDetailData {
+    agentName: string;
+    instanceId: string;
+    run: {
+        instance_id: string;
+        agent_name: string;
+        trigger_type: string;
+        trigger_source?: string;
+        result: string;
+        exit_code?: number;
+        started_at: number;
+        duration_ms: number;
+        input_tokens: number;
+        output_tokens: number;
+        cache_read_tokens: number;
+        cache_write_tokens: number;
+        total_tokens: number;
+        cost_usd: number;
+        turn_count: number;
+        error_message?: string;
+    } | null;
+}
+export declare function renderInstanceDetailPage(data: InstanceDetailData): string;
+//# sourceMappingURL=instance-detail-page.d.ts.map

package/dist/gateway/views/instance-detail-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"instance-detail-page.d.ts","sourceRoot":"","sources":["../../../src/gateway/views/instance-detail-page.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,GAAG,EAAE;QACH,WAAW,EAAE,MAAM,CAAC;QACpB,UAAU,EAAE,MAAM,CAAC;QACnB,YAAY,EAAE,MAAM,CAAC;QACrB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,MAAM,EAAE,MAAM,CAAC;QACf,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,UAAU,EAAE,MAAM,CAAC;QACnB,WAAW,EAAE,MAAM,CAAC;QACpB,YAAY,EAAE,MAAM,CAAC;QACrB,aAAa,EAAE,MAAM,CAAC;QACtB,iBAAiB,EAAE,MAAM,CAAC;QAC1B,kBAAkB,EAAE,MAAM,CAAC;QAC3B,YAAY,EAAE,MAAM,CAAC;QACrB,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,MAAM,CAAC;QACnB,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,GAAG,IAAI,CAAC;CACV;AAqBD,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,kBAAkB,GAAG,MAAM,CAoFzE"}