@mce-bt/microagents-dashboard 0.1.0

package/views/404.ejs

@@ -0,0 +1,10 @@
+<div class="page-header">
+  <h2>Not Found</h2>
+  <p><%= message || 'The page you are looking for does not exist.' %></p>
+</div>
+<div class="card">
+  <div class="empty-state">
+    <div class="icon">⚠</div>
+    <p><a href="/" class="link">← Back to Agents</a></p>
+  </div>
+</div>

package/views/agent-detail.ejs

@@ -0,0 +1,8 @@
+<div class="page-header">
+  <h2><%= agent.name %></h2>
+  <p><code><%= agent.id %></code> · <%= agent.domain || 'no domain' %> · v<%= agent.version || '0.0.0' %></p>
+</div>
+
+<div hx-get="/partial/agents/<%= agent.id %>" hx-trigger="every 10s" hx-swap="innerHTML">
+  <%- include('partials/agent-detail-content', { agent, metrics }) %>
+</div>

package/views/agents.ejs

@@ -0,0 +1,181 @@
+<div class="page-header">
+  <h2>Agents Overview</h2>
+  <p>All registered agents and their current status</p>
+</div>
+
+<div class="grid grid-4 mb-4">
+  <div class="stat-card">
+    <div class="label">Total Agents</div>
+    <div class="value accent"><%= agents.length %></div>
+  </div>
+  <div class="stat-card">
+    <div class="label">Online</div>
+    <div class="value green"><%= agents.filter(a => a.status === 'online').length %></div>
+  </div>
+  <div class="stat-card">
+    <div class="label">Offline</div>
+    <div class="value red"><%= agents.filter(a => a.status === 'offline').length %></div>
+  </div>
+  <div class="stat-card">
+    <div class="label">Unhealthy</div>
+    <div class="value yellow"><%= agents.filter(a => a.status === 'unhealthy').length %></div>
+  </div>
+</div>
+
+<!-- Token Usage Chart (Last 24h) -->
+<%
+  const now = Date.now();
+  const h24 = 24 * 60 * 60 * 1000;
+  const bucketCount = 24;
+  const bucketMs = h24 / bucketCount;
+  const agentColors = ['#4dabf7','#bc8cff','#51cf66','#ffd43b','#ff6b6b','#20c997','#ff922b','#da77f2'];
+  const agentColorsBg = ['rgba(77,171,247,0.7)','rgba(188,140,255,0.7)','rgba(81,207,102,0.7)','rgba(255,212,59,0.7)','rgba(255,107,107,0.7)','rgba(32,201,151,0.7)','rgba(255,146,43,0.7)','rgba(218,119,242,0.7)'];
+  const chartAgents = [];
+  const chartBuckets = {};
+
+  (agentMetrics || []).forEach(({ agent, metrics }) => {
+    if (!metrics?.callHistory?.length) return;
+    const idx = chartAgents.length;
+    chartAgents.push({ name: agent.name, id: agent.id });
+    metrics.callHistory.forEach(call => {
+      const ts = new Date(call.timestamp).getTime();
+      const age = now - ts;
+      if (age > h24 || age < 0) return;
+      const bi = Math.min(Math.floor((h24 - age) / bucketMs), bucketCount - 1);
+      const key = `${idx}_${bi}`;
+      chartBuckets[key] = (chartBuckets[key] || 0) + (call.totalTokens || 0);
+    });
+  });
+
+  const hasChartData = chartAgents.length > 0 && Object.values(chartBuckets).some(v => v > 0);
+  const hourLabels = [];
+  for (let b = 0; b < bucketCount; b++) {
+    const h = new Date(now - h24 + (b + 1) * bucketMs).getHours();
+    hourLabels.push(String(h).padStart(2, '0') + ':00');
+  }
+%>
+<% if (hasChartData) { %>
+<div class="card mb-4">
+  <div class="card-header">
+    <h3>Token Usage (Last 24 Hours)</h3>
+    <span class="text-muted text-sm">Hourly, stacked per agent</span>
+  </div>
+  <div style="position:relative;height:220px;padding:8px 0;">
+    <canvas id="tokenChart"></canvas>
+  </div>
+</div>
+<script>
+(function() {
+  const ctx = document.getElementById('tokenChart');
+  const labels = <%- JSON.stringify(hourLabels) %>;
+  const datasets = [
+    <% chartAgents.forEach((a, idx) => { %>
+    {
+      label: '<%= a.name %>',
+      data: [<% for (let b = 0; b < bucketCount; b++) { %><%= chartBuckets[`${idx}_${b}`] || 0 %><% if (b < bucketCount - 1) { %>,<% } %><% } %>],
+      backgroundColor: '<%= agentColorsBg[idx % agentColorsBg.length] %>',
+      borderColor: '<%= agentColors[idx % agentColors.length] %>',
+      borderWidth: 1,
+      borderRadius: 3,
+    },
+    <% }) %>
+  ];
+  new Chart(ctx, {
+    type: 'bar',
+    data: { labels, datasets },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      interaction: { mode: 'index', intersect: false },
+      plugins: {
+        legend: {
+          position: 'bottom',
+          labels: { color: '#8b95a5', usePointStyle: true, pointStyle: 'rectRounded', padding: 16, font: { size: 11 } }
+        },
+        tooltip: {
+          backgroundColor: '#1e2230',
+          titleColor: '#e1e4ea',
+          bodyColor: '#8b95a5',
+          borderColor: '#2d3348',
+          borderWidth: 1,
+          callbacks: {
+            label: function(ctx) { return ctx.dataset.label + ': ' + ctx.parsed.y.toLocaleString() + ' tokens'; }
+          }
+        }
+      },
+      scales: {
+        x: {
+          stacked: true,
+          grid: { color: 'rgba(45,51,72,0.5)', drawBorder: false },
+          ticks: { color: '#8b95a5', font: { size: 10 }, maxRotation: 0 }
+        },
+        y: {
+          stacked: true,
+          grid: { color: 'rgba(45,51,72,0.5)', drawBorder: false },
+          ticks: {
+            color: '#8b95a5',
+            font: { size: 10 },
+            callback: function(v) { return v >= 1000 ? (v/1000).toFixed(0) + 'k' : v; }
+          }
+        }
+      }
+    }
+  });
+})();
+</script>
+<% } %>
+
+<div class="card mb-4">
+  <div class="card-header">
+    <h3>Registered Agents</h3>
+    <span class="htmx-indicator"><span class="spinner"></span></span>
+  </div>
+  <div hx-get="/partial/agents" hx-trigger="every 10s" hx-indicator="closest .card" hx-swap="innerHTML">
+    <%- include('partials/agents-table', { agents }) %>
+  </div>
+</div>
+
+<!-- Tasks -->
+<div class="card">
+  <div class="card-header">
+    <h3>Tasks</h3>
+    <span class="text-muted text-sm"><%= tasks.length %> items</span>
+  </div>
+  <% if (tasks.length === 0) { %>
+    <div class="empty-state">
+      <div class="icon">◈</div>
+      <p>No tasks created yet</p>
+    </div>
+  <% } else { %>
+  <div class="table-wrap">
+    <table>
+      <thead>
+        <tr>
+          <th>Title</th>
+          <th>Status</th>
+          <th>Quadrant</th>
+          <th>Priority</th>
+          <th>Project</th>
+          <th>Tags</th>
+          <th>Due</th>
+          <th>Created</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% tasks.forEach(t => { %>
+        <tr>
+          <td style="max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;"><%= t.title || '—' %></td>
+          <td><span class="badge badge-<%= t.status === 'done' ? 'green' : t.status === 'in-progress' ? 'yellow' : 'muted' %>"><%= t.status || '—' %></span></td>
+          <td class="text-sm mono"><%= t.quadrant || '—' %></td>
+          <td class="text-sm mono"><%= t.priority ?? '—' %></td>
+          <td class="text-sm mono"><%= t.project || '—' %></td>
+          <td class="text-sm"><%= (t.tags || []).join(', ') || '—' %></td>
+          <td class="text-sm mono" style="white-space:nowrap;"><%= t.due_date ? new Date(t.due_date).toLocaleDateString() : '—' %></td>
+          <td class="text-sm mono" style="white-space:nowrap;"><%= t.created_at ? new Date(t.created_at).toLocaleString() : '—' %></td>
+        </tr>
+        <% }) %>
+      </tbody>
+    </table>
+  </div>
+  <% } %>
+</div>

package/views/browser-detail.ejs

@@ -0,0 +1,373 @@
+<% if (!session) { %>
+<div class="page-header">
+  <h2>Browser Session</h2>
+  <p>Session not found</p>
+</div>
+<div class="empty-state">
+  <div class="icon">⊞</div>
+  <p>This browser session does not exist or has been deleted.</p>
+</div>
+<% } else { %>
+
+<%
+  const started = new Date(session.started_at);
+  const ended = session.ended_at ? new Date(session.ended_at) : null;
+  const durationMs = ended ? ended - started : Date.now() - started;
+  const statusConfig = {
+    completed: { icon: '✓', class: 'badge-green', color: 'var(--green)' },
+    running: { icon: '⟳', class: 'badge-yellow', color: 'var(--yellow)' },
+    failed: { icon: '✕', class: 'badge-red', color: 'var(--red)' },
+  };
+  const sc = statusConfig[session.status] || statusConfig.failed;
+
+  function fmtDuration(ms) {
+    if (ms < 1000) return '<1s';
+    const sec = Math.round(ms / 1000);
+    if (sec < 60) return sec + 's';
+    const min = Math.floor(sec / 60);
+    const rem = sec % 60;
+    return min + 'm ' + rem + 's';
+  }
+
+  function fmtTime(date) {
+    return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
+  }
+
+  function fmtDate(date) {
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) + ' ' + fmtTime(date);
+  }
+
+  const actionConfig = {
+    goto: { icon: '→', label: 'Navigate', class: 'step-goto' },
+    act: { icon: '⚡', label: 'Action', class: 'step-act' },
+    extract: { icon: '◎', label: 'Extract', class: 'step-extract' },
+    observe: { icon: '◉', label: 'Observe', class: 'step-observe' },
+    agent: { icon: '⬡', label: 'Agent', class: 'step-agent' },
+  };
+
+  // Build list of URLs visited (from goto steps)
+  const urlsVisited = steps
+    ? steps.filter(s => s.action_type === 'goto').map(s => s.instruction)
+    : [];
+
+  // Collect screenshot step indices for the player
+  const screenshotSteps = steps
+    ? steps.filter(s => s.screenshot_path).map(s => s.step_index)
+    : [];
+
+  // Helper: try to parse a URL from instruction
+  function isUrl(str) {
+    try { new URL(str); return true; } catch { return false; }
+  }
+
+  // Helper: format extracted data nicely
+  function formatExtracted(data, depth) {
+    depth = depth || 0;
+    if (depth > 3) return JSON.stringify(data);
+    if (data === null || data === undefined) return '';
+    if (typeof data === 'string') return data;
+    if (typeof data === 'number' || typeof data === 'boolean') return String(data);
+    if (Array.isArray(data)) {
+      return data.map(function(item) { return formatExtracted(item, depth + 1); }).join(', ');
+    }
+    if (typeof data === 'object') {
+      return Object.entries(data).map(function(pair) {
+        return '<span class="bsd-kv-key">' + pair[0] + ':</span> ' + formatExtracted(pair[1], depth + 1);
+      }).join('<br/>');
+    }
+    return String(data);
+  }
+%>
+
+<div class="page-header" style="margin-bottom: 16px;">
+  <a href="/browser" class="bsd-back">← Browser Sessions</a>
+  <h2>Session Detail</h2>
+</div>
+
+<!-- Session header card -->
+<div class="bsd-header" style="border-left-color: <%= sc.color %>;">
+  <div class="bsd-header-top">
+    <div class="bsd-header-left">
+      <span class="badge <%= sc.class %>" style="font-size: 12px; padding: 3px 10px;"><%= sc.icon %> <%= session.status %></span>
+      <% if (session.platform) { %>
+      <span class="bsd-platform-tag"><%= session.platform %></span>
+      <% } %>
+      <span class="bsd-agent-tag"><%= session.agent_id %></span>
+    </div>
+    <span class="bsd-id mono"><%= session.id %></span>
+  </div>
+  <p class="bsd-goal"><%= session.goal %></p>
+
+  <% if (urlsVisited.length > 0) { %>
+  <div class="bsd-urls">
+    <span class="bsd-urls-label">URLs visited:</span>
+    <% urlsVisited.forEach(function(url) { %>
+    <a href="<%= url %>" target="_blank" rel="noopener noreferrer" class="bsd-url-chip mono"><%= url %></a>
+    <% }); %>
+  </div>
+  <% } %>
+
+  <div class="bsd-stats">
+    <div class="bsd-stat">
+      <span class="bsd-stat-label">Started</span>
+      <span class="bsd-stat-value"><%= fmtDate(started) %></span>
+    </div>
+    <% if (ended) { %>
+    <div class="bsd-stat">
+      <span class="bsd-stat-label">Ended</span>
+      <span class="bsd-stat-value"><%= fmtDate(ended) %></span>
+    </div>
+    <% } %>
+    <div class="bsd-stat">
+      <span class="bsd-stat-label">Duration</span>
+      <span class="bsd-stat-value mono"><%= fmtDuration(durationMs) %></span>
+    </div>
+    <div class="bsd-stat">
+      <span class="bsd-stat-label">Steps</span>
+      <span class="bsd-stat-value mono"><%= session.step_count %></span>
+    </div>
+  </div>
+</div>
+
+<!-- Screenshot player (replay) -->
+<% if (screenshotSteps.length > 1) { %>
+<div class="bsd-player" id="bsd-player">
+  <div class="bsd-player-header">
+    <span class="bsd-player-title">Session Recording</span>
+    <div class="bsd-player-controls">
+      <button class="bsd-player-btn" id="player-prev" title="Previous step">◀</button>
+      <button class="bsd-player-btn" id="player-play" title="Play / Pause">▶</button>
+      <button class="bsd-player-btn" id="player-next" title="Next step">▶</button>
+      <span class="bsd-player-counter mono" id="player-counter">1 / <%= screenshotSteps.length %></span>
+      <select class="bsd-player-speed" id="player-speed" title="Playback speed">
+        <option value="2000">0.5×</option>
+        <option value="1000" selected>1×</option>
+        <option value="500">2×</option>
+        <option value="250">4×</option>
+      </select>
+    </div>
+  </div>
+  <div class="bsd-player-viewport">
+    <img id="player-img" src="/browser/<%= session.id %>/screenshots/<%= screenshotSteps[0] %>" alt="Recording frame" />
+    <div class="bsd-player-caption" id="player-caption"></div>
+  </div>
+  <div class="bsd-player-progress">
+    <div class="bsd-player-bar" id="player-bar" style="width: 0%"></div>
+  </div>
+</div>
+<% } %>
+
+<!-- Steps timeline -->
+<% if (!steps || steps.length === 0) { %>
+<div class="card mt-4" style="padding: 24px;">
+  <p class="text-muted" style="text-align: center;">No steps recorded for this session.</p>
+</div>
+<% } else { %>
+<div class="bsd-timeline">
+  <% steps.forEach((step, i) => {
+    const ac = actionConfig[step.action_type] || actionConfig.agent;
+    const isSuccess = step.result && (step.result.success === true || step.result.extracted);
+    const isFailed = step.result && step.result.success === false;
+  %>
+  <div class="bsd-step <%= ac.class %> <%= isFailed ? 'bsd-step-failed' : '' %>" id="step-<%= step.step_index %>">
+    <div class="bsd-step-connector">
+      <div class="bsd-step-dot"></div>
+      <% if (i < steps.length - 1) { %><div class="bsd-step-line"></div><% } %>
+    </div>
+    <div class="bsd-step-content">
+      <div class="bsd-step-header">
+        <div class="bsd-step-title">
+          <span class="bsd-step-icon"><%= ac.icon %></span>
+          <span class="bsd-step-type"><%= ac.label %></span>
+          <span class="bsd-step-num">Step <%= step.step_index %></span>
+        </div>
+        <span class="bsd-step-duration mono"><%= step.duration_ms >= 1000 ? (step.duration_ms / 1000).toFixed(1) + 's' : step.duration_ms + 'ms' %></span>
+      </div>
+
+      <% if (step.action_type === 'goto' && isUrl(step.instruction)) { %>
+      <div class="bsd-step-url">
+        <a href="<%= step.instruction %>" target="_blank" rel="noopener noreferrer" class="bsd-url-link mono"><%= step.instruction %></a>
+      </div>
+      <% } else { %>
+      <p class="bsd-step-instruction"><%= step.instruction %></p>
+      <% } %>
+
+      <% if (step.result && Object.keys(step.result).length > 0) { %>
+      <div class="bsd-step-result">
+        <% if (step.action_type === 'extract' && step.result.extracted) { %>
+        <div class="bsd-extract-result">
+          <div class="bsd-extract-label">Extracted data</div>
+          <div class="bsd-extract-data"><%- formatExtracted(step.result.extracted) %></div>
+        </div>
+        <% } else if (step.action_type === 'observe' && step.result.action_count !== undefined) { %>
+        <div class="bsd-step-message">
+          Found <strong><%= step.result.action_count %></strong> available action<%= step.result.action_count !== 1 ? 's' : '' %> on page
+        </div>
+        <% } else if (step.action_type === 'agent') { %>
+        <div class="bsd-step-message <%= isFailed ? 'bsd-step-message-error' : '' %>">
+          <% if (step.result.completed) { %>✓ Completed<% } else if (isFailed) { %>✕ Failed<% } else { %>⟳ Partial<% } %>
+          <% if (step.result.message) { %> — <%= step.result.message %><% } %>
+        </div>
+        <% } else if (step.result.message) { %>
+        <div class="bsd-step-message <%= isFailed ? 'bsd-step-message-error' : '' %>">
+          <% if (isFailed) { %>✕<% } else if (isSuccess) { %>✓<% } %>
+          <%= step.result.message %>
+        </div>
+        <% } %>
+        <details class="bsd-step-details">
+          <summary>Raw JSON</summary>
+          <pre><%= JSON.stringify(step.result, null, 2) %></pre>
+        </details>
+      </div>
+      <% } %>
+
+      <% if (step.screenshot_path) { %>
+      <div class="bsd-step-screenshot">
+        <img
+          src="/browser/<%= session.id %>/screenshots/<%= step.step_index %>"
+          alt="Screenshot after step <%= step.step_index %>"
+          loading="lazy"
+          onclick="openLightbox(this.src, <%= step.step_index %>)"
+        />
+      </div>
+      <% } %>
+    </div>
+  </div>
+  <% }); %>
+</div>
+<% } %>
+
+<!-- Lightbox with navigation -->
+<div class="bsd-lightbox" id="lightbox" onclick="closeLightbox(event)">
+  <div class="bsd-lightbox-close" onclick="closeLightbox(event)">✕</div>
+  <button class="bsd-lightbox-nav bsd-lightbox-prev" id="lb-prev" onclick="lightboxNav(-1, event)">‹</button>
+  <img id="lightbox-img" src="" alt="Screenshot" />
+  <button class="bsd-lightbox-nav bsd-lightbox-next" id="lb-next" onclick="lightboxNav(1, event)">›</button>
+  <div class="bsd-lightbox-info" id="lb-info"></div>
+</div>
+
+<script>
+(function() {
+  // Screenshot steps data for lightbox navigation
+  var screenshotSteps = <%= JSON.stringify(screenshotSteps) %>;
+  var sessionId = '<%= session.id %>';
+  var stepsData = <%- JSON.stringify((steps || []).map(function(s) { return { step_index: s.step_index, action_type: s.action_type, instruction: s.instruction }; })) %>;
+  var currentLbIndex = 0;
+
+  function getStepInfo(stepIndex) {
+    var s = stepsData.find(function(x) { return x.step_index === stepIndex; });
+    if (!s) return '';
+    var labels = { goto: 'Navigate', act: 'Action', extract: 'Extract', observe: 'Observe', agent: 'Agent' };
+    return (labels[s.action_type] || s.action_type) + ': ' + s.instruction;
+  }
+
+  window.openLightbox = function(src, stepIndex) {
+    var lb = document.getElementById('lightbox');
+    document.getElementById('lightbox-img').src = src;
+    currentLbIndex = screenshotSteps.indexOf(stepIndex);
+    if (currentLbIndex < 0) currentLbIndex = 0;
+    document.getElementById('lb-info').textContent = 'Step ' + stepIndex + ' — ' + getStepInfo(stepIndex);
+    document.getElementById('lb-prev').style.display = currentLbIndex > 0 ? '' : 'none';
+    document.getElementById('lb-next').style.display = currentLbIndex < screenshotSteps.length - 1 ? '' : 'none';
+    lb.classList.add('active');
+    document.body.style.overflow = 'hidden';
+  };
+
+  window.closeLightbox = function(e) {
+    if (e && (e.target.classList.contains('bsd-lightbox-nav') || e.target === document.getElementById('lightbox-img'))) return;
+    document.getElementById('lightbox').classList.remove('active');
+    document.body.style.overflow = '';
+  };
+
+  window.lightboxNav = function(dir, e) {
+    if (e) { e.stopPropagation(); e.preventDefault(); }
+    currentLbIndex = Math.max(0, Math.min(screenshotSteps.length - 1, currentLbIndex + dir));
+    var step = screenshotSteps[currentLbIndex];
+    document.getElementById('lightbox-img').src = '/browser/' + sessionId + '/screenshots/' + step;
+    document.getElementById('lb-info').textContent = 'Step ' + step + ' — ' + getStepInfo(step);
+    document.getElementById('lb-prev').style.display = currentLbIndex > 0 ? '' : 'none';
+    document.getElementById('lb-next').style.display = currentLbIndex < screenshotSteps.length - 1 ? '' : 'none';
+  };
+
+  document.addEventListener('keydown', function(e) {
+    if (!document.getElementById('lightbox').classList.contains('active')) return;
+    if (e.key === 'Escape') { document.getElementById('lightbox').classList.remove('active'); document.body.style.overflow = ''; }
+    if (e.key === 'ArrowLeft') lightboxNav(-1, e);
+    if (e.key === 'ArrowRight') lightboxNav(1, e);
+  });
+
+  // --- Screenshot Player ---
+  var playerEl = document.getElementById('bsd-player');
+  if (playerEl && screenshotSteps.length > 1) {
+    var playerIdx = 0;
+    var playing = false;
+    var playTimer = null;
+    var img = document.getElementById('player-img');
+    var counter = document.getElementById('player-counter');
+    var bar = document.getElementById('player-bar');
+    var caption = document.getElementById('player-caption');
+    var speedSelect = document.getElementById('player-speed');
+
+    function updatePlayer() {
+      var step = screenshotSteps[playerIdx];
+      img.src = '/browser/' + sessionId + '/screenshots/' + step;
+      counter.textContent = (playerIdx + 1) + ' / ' + screenshotSteps.length;
+      bar.style.width = ((playerIdx + 1) / screenshotSteps.length * 100) + '%';
+      caption.textContent = 'Step ' + step + ' — ' + getStepInfo(step);
+      // Highlight corresponding timeline step
+      document.querySelectorAll('.bsd-step').forEach(function(el) { el.classList.remove('bsd-step-active'); });
+      var stepEl = document.getElementById('step-' + step);
+      if (stepEl) stepEl.classList.add('bsd-step-active');
+    }
+
+    function getSpeed() { return parseInt(speedSelect.value, 10); }
+
+    document.getElementById('player-prev').onclick = function() {
+      if (playerIdx > 0) { playerIdx--; updatePlayer(); }
+    };
+    document.getElementById('player-next').onclick = function() {
+      if (playerIdx < screenshotSteps.length - 1) { playerIdx++; updatePlayer(); }
+    };
+    document.getElementById('player-play').onclick = function() {
+      if (playing) {
+        playing = false;
+        clearInterval(playTimer);
+        this.textContent = '▶';
+      } else {
+        playing = true;
+        this.textContent = '⏸';
+        if (playerIdx >= screenshotSteps.length - 1) playerIdx = 0;
+        playTimer = setInterval(function() {
+          if (playerIdx < screenshotSteps.length - 1) {
+            playerIdx++;
+            updatePlayer();
+          } else {
+            playing = false;
+            clearInterval(playTimer);
+            document.getElementById('player-play').textContent = '▶';
+          }
+        }, getSpeed());
+      }
+    };
+    speedSelect.onchange = function() {
+      if (playing) {
+        clearInterval(playTimer);
+        playTimer = setInterval(function() {
+          if (playerIdx < screenshotSteps.length - 1) {
+            playerIdx++;
+            updatePlayer();
+          } else {
+            playing = false;
+            clearInterval(playTimer);
+            document.getElementById('player-play').textContent = '▶';
+          }
+        }, getSpeed());
+      }
+    };
+
+    updatePlayer();
+  }
+})();
+</script>
+
+<% } %>

package/views/browser.ejs

@@ -0,0 +1,57 @@
+<div class="page-header">
+  <h2>Browser Sessions</h2>
+  <p>AI-driven browser automation recordings</p>
+</div>
+
+<%
+  const running = sessions.filter(s => s.status === 'running').length;
+  const completed = sessions.filter(s => s.status === 'completed').length;
+  const failed = sessions.filter(s => s.status === 'failed').length;
+  const totalSteps = sessions.reduce((s, x) => s + (x.step_count || 0), 0);
+
+  function timeAgo(dateStr) {
+    const now = Date.now();
+    const then = new Date(dateStr).getTime();
+    const diffMs = now - then;
+    const mins = Math.floor(diffMs / 60000);
+    if (mins < 1) return 'just now';
+    if (mins < 60) return mins + 'm ago';
+    const hours = Math.floor(mins / 60);
+    if (hours < 24) return hours + 'h ago';
+    const days = Math.floor(hours / 24);
+    if (days < 7) return days + 'd ago';
+    return new Date(dateStr).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+  }
+
+  function formatDuration(ms) {
+    if (ms < 1000) return ms + 'ms';
+    const sec = Math.round(ms / 1000);
+    if (sec < 60) return sec + 's';
+    const min = Math.floor(sec / 60);
+    const rem = sec % 60;
+    return min + 'm ' + rem + 's';
+  }
+%>
+
+<div class="grid grid-4 mb-4">
+  <div class="stat-card">
+    <div class="label">Total Sessions</div>
+    <div class="value accent"><%= sessions.length %></div>
+  </div>
+  <div class="stat-card">
+    <div class="label">Running</div>
+    <div class="value yellow"><%= running %></div>
+  </div>
+  <div class="stat-card">
+    <div class="label">Completed</div>
+    <div class="value green"><%= completed %></div>
+  </div>
+  <div class="stat-card">
+    <div class="label">Failed</div>
+    <div class="value red"><%= failed %></div>
+  </div>
+</div>
+
+<div hx-get="/partial/browser" hx-trigger="every 10s" hx-swap="innerHTML">
+  <%- include('partials/browser-table', { sessions }) %>
+</div>