@archznn/crewloop-skills 0.3.0 → 0.4.1

package/servers/dashboard/public/app.js

@@ -0,0 +1,447 @@
+(() => {
+  'use strict';
+
+  // ---- Config ----
+  const WS_URL = `ws://${location.host}/ws`;
+  const MAX_EVENTS = 100;
+  const SKILL_ICONS = {
+    orchestrator: 'ph-target',
+    architect: 'ph-blueprint',
+    designer: 'ph-palette',
+    engineer: 'ph-wrench',
+    reviewer: 'ph-magnifying-glass',
+    shipper: 'ph-rocket-launch',
+    'docs-writer': 'ph-article',
+    tester: 'ph-flask',
+    'product-manager': 'ph-chart-bar',
+    maintainer: 'ph-toolbox',
+    researcher: 'ph-microscope',
+    'security-guard': 'ph-shield',
+    'accessibility-auditor': 'ph-person',
+    'obsidian-second-brain': 'ph-brain',
+    'project-mapper': 'ph-tree-structure',
+    default: 'ph-circle',
+  };
+
+  // ---- State ----
+  const state = {
+    sessions: new Map(),
+    activeSessionId: null,
+    selectedSessionId: null,
+    theme: localStorage.getItem('crewloop-theme') || 'system',
+    connection: 'connecting',
+    lastPong: 0,
+    eventCountWindow: [],
+    ws: null,
+    reconnectTimer: null,
+    pingTimer: null,
+  };
+
+  // ---- DOM refs ----
+  const $ = (id) => document.getElementById(id);
+  const themeToggle = $('theme-toggle');
+  const connectionDot = $('connection-dot');
+  const sessionTrigger = $('session-trigger');
+  const sessionLabel = $('session-label');
+  const sessionList = $('session-list');
+  const activeStrip = $('active-strip');
+  const activeSkillIcon = $('active-skill-icon');
+  const activeSkillName = $('active-skill-name');
+  const statusBadge = $('status-badge');
+  const statusDot = $('status-dot');
+  const statusText = $('status-text');
+  const confidenceBadge = $('confidence-badge');
+  const activeSkillSource = $('active-skill-source');
+  const toolCount = $('tool-count');
+  const durationEl = $('duration');
+  const eventRate = $('event-rate');
+  const timeline = $('timeline');
+  const activityGraph = $('activity-graph');
+
+  // ---- Utils ----
+  function formatDuration(ms) {
+    const totalSeconds = Math.floor(ms / 1000);
+    const minutes = Math.floor(totalSeconds / 60).toString().padStart(2, '0');
+    const seconds = (totalSeconds % 60).toString().padStart(2, '0');
+    if (totalSeconds < 3600) return `${minutes}:${seconds}`;
+    const hours = Math.floor(totalSeconds / 3600);
+    return `${hours}:${minutes}:${seconds}`;
+  }
+
+  function formatTime(ts) {
+    const d = new Date(ts);
+    return d.toLocaleTimeString(undefined, { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
+  }
+
+  function updateEventRate() {
+    const now = Date.now();
+    const windowStart = now - 60000;
+    state.eventCountWindow = state.eventCountWindow.filter((t) => t > windowStart);
+    eventRate.textContent = state.eventCountWindow.length.toString();
+  }
+
+  function skillIcon(skillName) {
+    const key = skillName?.toLowerCase().replace(/\s+/g, '-');
+    return SKILL_ICONS[key] || SKILL_ICONS.default;
+  }
+
+  function prefersReducedMotion() {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  }
+
+  // ---- Theme ----
+  function applyTheme(theme) {
+    const root = document.documentElement;
+    let resolved = theme;
+    if (theme === 'system') {
+      resolved = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+    }
+    root.setAttribute('data-theme', resolved);
+    const icon = themeToggle.querySelector('i');
+    if (resolved === 'light') {
+      icon.className = 'ph ph-sun';
+    } else {
+      icon.className = 'ph ph-moon';
+    }
+  }
+
+  function cycleTheme() {
+    const order = ['system', 'light', 'dark'];
+    const idx = order.indexOf(state.theme);
+    state.theme = order[(idx + 1) % order.length];
+    localStorage.setItem('crewloop-theme', state.theme);
+    applyTheme(state.theme);
+  }
+
+  // ---- WebSocket ----
+  function setConnection(status) {
+    state.connection = status;
+    connectionDot.className = 'connection-dot ' + status;
+  }
+
+  function connect() {
+    setConnection('connecting');
+    const ws = new WebSocket(WS_URL);
+    state.ws = ws;
+
+    ws.addEventListener('open', () => {
+      setConnection('connected');
+      state.lastPong = Date.now();
+      startPing();
+    });
+
+    ws.addEventListener('message', (event) => {
+      let msg;
+      try {
+        msg = JSON.parse(event.data);
+      } catch {
+        return;
+      }
+      handleMessage(msg);
+    });
+
+    ws.addEventListener('close', () => {
+      setConnection('disconnected');
+      stopPing();
+      scheduleReconnect();
+    });
+
+    ws.addEventListener('error', () => {
+      ws.close();
+    });
+  }
+
+  function scheduleReconnect() {
+    if (state.reconnectTimer) return;
+    state.reconnectTimer = setTimeout(() => {
+      state.reconnectTimer = null;
+      connect();
+    }, 3000);
+  }
+
+  function startPing() {
+    stopPing();
+    state.pingTimer = setInterval(() => {
+      if (!state.ws || state.ws.readyState !== WebSocket.OPEN) return;
+      state.ws.send(JSON.stringify({ type: 'ping' }));
+      if (Date.now() - state.lastPong > 35000) {
+        state.ws.close();
+      }
+    }, 15000);
+  }
+
+  function stopPing() {
+    if (state.pingTimer) {
+      clearInterval(state.pingTimer);
+      state.pingTimer = null;
+    }
+  }
+
+  function handleMessage(msg) {
+    if (msg.type === 'pong') {
+      state.lastPong = Date.now();
+      return;
+    }
+    if (msg.type === 'snapshot') {
+      state.sessions.clear();
+      (msg.sessions || []).forEach((s) => state.sessions.set(s.id, s));
+      if (!state.selectedSessionId) {
+        state.selectedSessionId = state.activeSessionId || state.sessions.keys().next().value || null;
+      }
+      renderSessionSelector();
+      renderAll();
+      return;
+    }
+    if (msg.type === 'update') {
+      const session = msg.session;
+      if (!session) return;
+      state.sessions.set(session.id, session);
+      if (msg.isActive) {
+        state.activeSessionId = session.id;
+        if (!state.selectedSessionId) state.selectedSessionId = session.id;
+      }
+      state.eventCountWindow.push(Date.now());
+      renderSessionSelector();
+      renderAll();
+    }
+  }
+
+  // ---- Rendering ----
+  function getSession() {
+    return state.sessions.get(state.selectedSessionId) || null;
+  }
+
+  function renderAll() {
+    const session = getSession();
+    renderActiveSkill(session);
+    renderTelemetry(session);
+    renderTimeline(session);
+    renderActivityGraph(session);
+  }
+
+  function renderActiveSkill(session) {
+    if (!session) {
+      activeSkillName.textContent = 'IDLE';
+      activeSkillIcon.className = 'ph ph-circle';
+      activeStrip.className = 'panel-accent-strip';
+      statusDot.className = 'status-dot';
+      statusText.textContent = 'IDLE';
+      confidenceBadge.textContent = 'unknown';
+      activeSkillSource.innerHTML = '<i class="ph ph-monitor"></i><span>waiting for events</span>';
+      return;
+    }
+
+    const skill = session.activeSkill || { name: 'UNKNOWN', confidence: 'low' };
+    const iconClass = skillIcon(skill.name);
+    activeSkillName.textContent = skill.name.toUpperCase();
+    activeSkillIcon.className = 'ph ' + iconClass;
+
+    const running = session.status === 'running';
+    activeStrip.className = 'panel-accent-strip' + (running ? ' running' : '');
+    statusDot.className = 'status-dot ' + (running ? 'running' : session.status || '');
+    statusText.textContent = running ? 'RUNNING' : (session.status ? session.status.toUpperCase() : 'IDLE');
+    confidenceBadge.textContent = skill.confidence || 'low';
+
+    activeSkillSource.innerHTML = `<i class="ph ph-${sourceIcon(session.source)}"></i><span>${session.source || 'unknown'}</span>`;
+  }
+
+  function sourceIcon(source) {
+    switch (source) {
+      case 'kimi': return 'chat-teardrop-text';
+      case 'codex': return 'terminal';
+      case 'opencode': return 'code-block';
+      case 'log-watcher': return 'file-text';
+      default: return 'monitor';
+    }
+  }
+
+  function renderTelemetry(session) {
+    if (!session) {
+      toolCount.textContent = '0';
+      durationEl.textContent = '00:00';
+      updateEventRate();
+      return;
+    }
+    const events = session.events || [];
+    const toolEvents = events.filter((e) => e.event_type === 'tool_start' || e.event_type === 'tool_end');
+    toolCount.textContent = String(Math.ceil(toolEvents.length / 2));
+    const dur = session.lastActivity && session.startTime ? session.lastActivity - session.startTime : 0;
+    durationEl.textContent = formatDuration(dur);
+    updateEventRate();
+  }
+
+  function renderTimeline(session) {
+    timeline.innerHTML = '';
+    if (!session) return;
+    const events = (session.events || []).slice(-MAX_EVENTS).reverse();
+    const fragment = document.createDocumentFragment();
+    events.forEach((ev) => {
+      const li = document.createElement('li');
+      li.className = 'timeline-item';
+      const outcome = ev.status || (ev.event_type.endsWith('_end') ? 'success' : '');
+      li.innerHTML = `
+        <span class="timeline-time">${formatTime(ev.timestamp)}</span>
+        <span class="timeline-dot ${outcome}"></span>
+        <div class="timeline-main">
+          <span class="timeline-tool">${ev.tool || ev.event_type}</span>
+          <span class="timeline-detail">${escapeHtml(ev.detail || ev.skill || '')}</span>
+        </div>
+        <span class="timeline-outcome">${outcome}</span>
+      `;
+      fragment.appendChild(li);
+    });
+    timeline.appendChild(fragment);
+  }
+
+  function escapeHtml(str) {
+    return String(str)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+  }
+
+  function renderActivityGraph(session) {
+    activityGraph.innerHTML = '';
+    if (!session || !session.events || session.events.length === 0) {
+      activityGraph.innerHTML = '<div class="activity-empty">Waiting for agent activity...</div>';
+      return;
+    }
+
+    const events = session.events;
+    const now = Date.now();
+    const span = Math.max(60000, now - Math.min(...events.map((e) => e.timestamp)));
+    const buckets = 40;
+    const bucketMs = span / buckets;
+    const counts = new Array(buckets).fill(0);
+
+    events.forEach((e) => {
+      const idx = Math.min(buckets - 1, Math.floor((now - e.timestamp) / bucketMs));
+      const safeIdx = buckets - 1 - idx;
+      counts[safeIdx]++;
+    });
+
+    const max = Math.max(1, ...counts);
+    const canvas = document.createElement('canvas');
+    canvas.className = 'activity-canvas';
+    const rect = activityGraph.getBoundingClientRect();
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = Math.max(1, Math.floor(rect.width * dpr));
+    canvas.height = Math.max(1, Math.floor(rect.height * dpr));
+    const ctx = canvas.getContext('2d');
+    ctx.scale(dpr, dpr);
+    const width = rect.width;
+    const height = rect.height;
+    const pad = 4;
+    const barW = (width - pad * 2) / buckets;
+
+    const style = getComputedStyle(document.documentElement);
+    const accent = style.getPropertyValue('--accent').trim() || '#22d3ee';
+    const muted = style.getPropertyValue('--bg-inset').trim() || '#1c1c1f';
+
+    // background grid
+    ctx.fillStyle = muted;
+    ctx.fillRect(0, 0, width, height);
+
+    counts.forEach((count, i) => {
+      const barH = (count / max) * (height - pad * 2);
+      const x = pad + i * barW;
+      const y = height - pad - barH;
+      ctx.fillStyle = accent;
+      ctx.fillRect(x + 1, y, Math.max(1, barW - 2), Math.max(1, barH));
+    });
+
+    activityGraph.appendChild(canvas);
+  }
+
+  function renderSessionSelector() {
+    sessionList.innerHTML = '';
+    if (state.sessions.size === 0) {
+      sessionLabel.textContent = 'No session';
+      return;
+    }
+
+    const sessions = Array.from(state.sessions.values()).sort((a, b) => (b.lastActivity || 0) - (a.lastActivity || 0));
+    if (!state.selectedSessionId || !state.sessions.has(state.selectedSessionId)) {
+      state.selectedSessionId = sessions[0].id;
+    }
+
+    const activeSession = state.sessions.get(state.activeSessionId);
+    let label = 'No session';
+    const current = state.sessions.get(state.selectedSessionId);
+    if (current) {
+      label = current.skill ? current.skill.toUpperCase() : truncate(current.id, 12);
+      if (current.id === state.activeSessionId && activeSession) {
+        label = '● ' + label;
+      }
+    }
+    sessionLabel.textContent = label;
+
+    sessions.forEach((s) => {
+      const li = document.createElement('li');
+      li.className = 'session-item' + (s.id === state.selectedSessionId ? ' active' : '');
+      li.setAttribute('role', 'option');
+      li.setAttribute('aria-selected', String(s.id === state.selectedSessionId));
+      li.innerHTML = `
+        <span class="session-item-id">${truncate(s.id, 16)}</span>
+        <span class="session-item-source">${s.source || 'unknown'}</span>
+      `;
+      li.addEventListener('click', () => {
+        state.selectedSessionId = s.id;
+        closeSessionList();
+        renderAll();
+      });
+      sessionList.appendChild(li);
+    });
+  }
+
+  function truncate(str, n) {
+    if (!str) return '';
+    return str.length > n ? str.slice(0, n - 1) + '…' : str;
+  }
+
+  function toggleSessionList() {
+    const open = sessionList.classList.toggle('open');
+    sessionTrigger.setAttribute('aria-expanded', String(open));
+  }
+
+  function closeSessionList() {
+    sessionList.classList.remove('open');
+    sessionTrigger.setAttribute('aria-expanded', 'false');
+  }
+
+  // ---- Event listeners ----
+  themeToggle.addEventListener('click', cycleTheme);
+
+  sessionTrigger.addEventListener('click', (e) => {
+    e.stopPropagation();
+    toggleSessionList();
+  });
+
+  document.addEventListener('click', (e) => {
+    if (!sessionTrigger.contains(e.target) && !sessionList.contains(e.target)) {
+      closeSessionList();
+    }
+  });
+
+  window.addEventListener('resize', () => {
+    if (prefersReducedMotion()) {
+      renderActivityGraph(getSession());
+    } else {
+      window.requestAnimationFrame(() => renderActivityGraph(getSession()));
+    }
+  });
+
+  // Keep duration ticking
+  setInterval(() => {
+    const session = getSession();
+    if (session && session.status === 'running') {
+      renderTelemetry(session);
+    }
+  }, 1000);
+
+  // Init
+  applyTheme(state.theme);
+  connect();
+})();

package/servers/dashboard/public/index.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>CrewLoop Dashboard</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <script src="https://unpkg.com/@phosphor-icons/web@2.1.1"></script>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+  <div class="app">
+    <header class="header">
+      <div class="brand">
+        <span class="brand-name">CREWLOOP</span>
+        <span class="brand-separator">·</span>
+        <span class="brand-label">DASHBOARD</span>
+      </div>
+      <div class="header-actions">
+        <button id="theme-toggle" class="icon-button" aria-label="Toggle theme">
+          <i class="ph ph-moon"></i>
+        </button>
+        <div class="session-selector">
+          <button id="session-trigger" class="session-trigger" aria-haspopup="listbox" aria-expanded="false">
+            <span class="connection-dot" id="connection-dot"></span>
+            <span id="session-label">No session</span>
+            <i class="ph ph-caret-down"></i>
+          </button>
+          <ul id="session-list" class="session-list" role="listbox" aria-label="Sessions"></ul>
+        </div>
+      </div>
+    </header>
+
+    <main class="main">
+      <aside class="sidebar">
+        <section class="panel active-skill-panel" aria-live="polite" aria-atomic="true">
+          <div class="panel-accent-strip" id="active-strip"></div>
+          <div class="active-skill-content">
+            <div class="active-skill-icon-wrap">
+              <i class="ph ph-circle" id="active-skill-icon"></i>
+            </div>
+            <h1 class="active-skill-name" id="active-skill-name">IDLE</h1>
+            <div class="active-skill-meta">
+              <span class="status-badge" id="status-badge">
+                <span class="status-dot" id="status-dot"></span>
+                <span id="status-text">IDLE</span>
+              </span>
+              <span class="confidence-badge" id="confidence-badge">unknown</span>
+            </div>
+            <div class="active-skill-source" id="active-skill-source">
+              <i class="ph ph-monitor"></i>
+              <span>waiting for events</span>
+            </div>
+          </div>
+        </section>
+
+        <section class="panel telemetry-panel">
+          <h2 class="panel-title">Telemetry</h2>
+          <div class="telemetry-grid">
+            <div class="telemetry-card">
+              <span class="telemetry-value" id="tool-count">0</span>
+              <span class="telemetry-label">TOOLS</span>
+            </div>
+            <div class="telemetry-card">
+              <span class="telemetry-value" id="duration">00:00</span>
+              <span class="telemetry-label">DURATION</span>
+            </div>
+            <div class="telemetry-card">
+              <span class="telemetry-value" id="event-rate">0</span>
+              <span class="telemetry-label">RATE/M</span>
+            </div>
+          </div>
+        </section>
+      </aside>
+
+      <div class="content">
+        <section class="panel activity-panel">
+          <h2 class="panel-title">Skill Activity</h2>
+          <div class="activity-graph" id="activity-graph">
+            <div class="activity-empty">Waiting for agent activity...</div>
+          </div>
+        </section>
+
+        <section class="panel timeline-panel">
+          <h2 class="panel-title">Event Timeline</h2>
+          <ul class="timeline" id="timeline" aria-label="Event timeline"></ul>
+        </section>
+      </div>
+    </main>
+  </div>
+
+  <script src="app.js"></script>
+</body>
+</html>