@jaimevalasek/aioson 1.6.0 → 1.7.0

package/src/mcp/apps/squad-dashboard/app.js

@@ -0,0 +1,163 @@
+'use strict';
+
+/**
+ * Squad Dashboard App Logic — Plan 81, Phase 4.1
+ *
+ * Provides data fetching and rendering logic for the MCP App dashboard.
+ * Can run standalone (via HTTP API) or embedded in MCP App context.
+ */
+
+const fs = require('node:fs/promises');
+const path = require('node:path');
+
+const SQUADS_DIR = path.join('.aioson', 'squads');
+
+// ─── State readers ───────────────────────────────────────────────────────────
+
+async function readSquadState(projectDir, squadSlug) {
+  const statePath = path.join(projectDir, SQUADS_DIR, squadSlug, 'STATE.md');
+  try {
+    const content = await fs.readFile(statePath, 'utf8');
+    // Parse frontmatter
+    const match = content.match(/^---\n([\s\S]*?)\n---/);
+    if (!match) return { raw: content };
+
+    const meta = {};
+    for (const line of match[1].split('\n')) {
+      const kv = line.match(/^(\w[\w_]*):\s*(.+)$/);
+      if (kv) {
+        const val = kv[2].trim();
+        if (/^\d+(\.\d+)?$/.test(val)) meta[kv[1]] = Number(val);
+        else meta[kv[1]] = val.replace(/^["']|["']$/g, '');
+      }
+    }
+
+    return { ...meta, raw: content };
+  } catch {
+    return null;
+  }
+}
+
+async function readBusState(projectDir, squadSlug) {
+  // Find the most recent session
+  const sessionsDir = path.join(projectDir, SQUADS_DIR, squadSlug, 'sessions');
+  try {
+    const entries = await fs.readdir(sessionsDir, { withFileTypes: true });
+    const sessions = entries.filter((e) => e.isDirectory()).map((e) => e.name).sort().reverse();
+
+    if (sessions.length === 0) return { messages: [], total: 0 };
+
+    const latestSession = sessions[0];
+    const busPath = path.join(sessionsDir, latestSession, 'bus.jsonl');
+    const raw = await fs.readFile(busPath, 'utf8');
+    const messages = raw.split('\n')
+      .filter(Boolean)
+      .map((line) => { try { return JSON.parse(line); } catch { return null; } })
+      .filter(Boolean);
+
+    // Classify
+    const blocks = messages.filter((m) => m.type === 'block');
+    const results = messages.filter((m) => m.type === 'result');
+    const byType = {};
+    const byExecutor = {};
+    for (const m of messages) {
+      byType[m.type] = (byType[m.type] || 0) + 1;
+      byExecutor[m.from] = (byExecutor[m.from] || 0) + 1;
+    }
+
+    return {
+      sessionId: latestSession,
+      total: messages.length,
+      blocks: blocks.length,
+      results: results.length,
+      byType,
+      byExecutor,
+      lastMessages: messages.slice(-20)
+    };
+  } catch {
+    return { messages: [], total: 0 };
+  }
+}
+
+async function readBudgetState(projectDir, squadSlug) {
+  const manifestPath = path.join(projectDir, SQUADS_DIR, squadSlug, 'squad.manifest.json');
+  try {
+    const manifest = JSON.parse(await fs.readFile(manifestPath, 'utf8'));
+    return manifest.budget || { max_tokens_per_session: null, max_tokens_per_task: null };
+  } catch {
+    return {};
+  }
+}
+
+async function readWavesState(projectDir, squadSlug) {
+  const sessionsDir = path.join(projectDir, SQUADS_DIR, squadSlug, 'sessions');
+  try {
+    const entries = await fs.readdir(sessionsDir, { withFileTypes: true });
+    const sessions = entries.filter((e) => e.isDirectory()).map((e) => e.name).sort().reverse();
+
+    if (sessions.length === 0) return { waves: [] };
+
+    const planPath = path.join(sessionsDir, sessions[0], 'plan.json');
+    const plan = JSON.parse(await fs.readFile(planPath, 'utf8'));
+
+    const waves = [];
+    const groups = plan.parallel_groups || {};
+
+    for (const [groupNum, taskIds] of Object.entries(groups)) {
+      const waveTasks = taskIds.map((id) => {
+        const task = plan.tasks.find((t) => t.id === id);
+        return task ? {
+          id: task.id,
+          title: task.title,
+          executor: task.executor,
+          status: task.status || 'pending'
+        } : { id, status: 'unknown' };
+      });
+
+      const allDone = waveTasks.every((t) => t.status === 'completed');
+      const anyRunning = waveTasks.some((t) => t.status === 'in_progress');
+      const anyBlocked = waveTasks.some((t) => t.status === 'escalated' || t.status === 'failed');
+
+      waves.push({
+        wave: Number(groupNum),
+        status: allDone ? 'DONE' : anyRunning ? 'RUNNING' : anyBlocked ? 'BLOCKED' : 'PENDING',
+        tasks: waveTasks
+      });
+    }
+
+    return { sessionId: sessions[0], waves, goal: plan.goal };
+  } catch {
+    return { waves: [] };
+  }
+}
+
+// ─── Composite dashboard data ────────────────────────────────────────────────
+
+/**
+ * Get complete dashboard data for a squad.
+ */
+async function getDashboardData(projectDir, squadSlug) {
+  const [state, busState, budget, wavesState] = await Promise.all([
+    readSquadState(projectDir, squadSlug),
+    readBusState(projectDir, squadSlug),
+    readBudgetState(projectDir, squadSlug),
+    readWavesState(projectDir, squadSlug)
+  ]);
+
+  return {
+    squad: squadSlug,
+    timestamp: new Date().toISOString(),
+    state,
+    bus: busState,
+    budget,
+    waves: wavesState
+  };
+}
+
+module.exports = {
+  getDashboardData,
+  readSquadState,
+  readBusState,
+  readBudgetState,
+  readWavesState
+};

package/src/mcp/apps/squad-dashboard/index.html

@@ -0,0 +1,261 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Squad Dashboard — AIOSON</title>
+  <style>
+    :root {
+      --bg: #1a1a2e;
+      --surface: #16213e;
+      --border: #0f3460;
+      --text: #e0e0e0;
+      --muted: #888;
+      --green: #4ade80;
+      --yellow: #fbbf24;
+      --red: #f87171;
+      --blue: #60a5fa;
+    }
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: 'SF Mono', 'Fira Code', monospace;
+      background: var(--bg);
+      color: var(--text);
+      font-size: 13px;
+      padding: 12px;
+    }
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px 12px;
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      margin-bottom: 12px;
+    }
+    .header .squad-name { font-size: 15px; font-weight: 600; }
+    .header .session { color: var(--muted); font-size: 11px; }
+    .status-dot {
+      display: inline-block;
+      width: 8px; height: 8px;
+      border-radius: 50%;
+      margin-right: 6px;
+    }
+    .status-dot.active { background: var(--green); }
+    .status-dot.warning { background: var(--yellow); }
+    .status-dot.error { background: var(--red); }
+    .waves-container {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 12px;
+      overflow-x: auto;
+    }
+    .wave {
+      flex: 1;
+      min-width: 120px;
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      padding: 8px;
+    }
+    .wave-header {
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 6px;
+      padding-bottom: 4px;
+      border-bottom: 1px solid var(--border);
+    }
+    .wave-header.done { color: var(--green); }
+    .wave-header.running { color: var(--blue); }
+    .wave-header.blocked { color: var(--red); }
+    .wave-header.pending { color: var(--muted); }
+    .task {
+      font-size: 12px;
+      padding: 2px 0;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+    .task-icon { font-size: 10px; }
+    .task-icon.completed { color: var(--green); }
+    .task-icon.in_progress { color: var(--blue); }
+    .task-icon.failed { color: var(--red); }
+    .task-icon.pending { color: var(--muted); }
+    .stats-bar {
+      display: flex;
+      gap: 8px;
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      padding: 8px 12px;
+      margin-bottom: 12px;
+    }
+    .stat {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+    .stat-label { color: var(--muted); font-size: 11px; }
+    .stat-value { font-weight: 600; }
+    .stat-divider {
+      width: 1px;
+      background: var(--border);
+      align-self: stretch;
+    }
+    .bus-feed {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      padding: 8px;
+      max-height: 120px;
+      overflow-y: auto;
+    }
+    .bus-msg {
+      font-size: 11px;
+      padding: 2px 0;
+      border-bottom: 1px solid rgba(255,255,255,0.05);
+    }
+    .bus-msg .from { color: var(--blue); }
+    .bus-msg .type { color: var(--muted); }
+    .bus-msg .type.block { color: var(--red); }
+    .bus-msg .type.result { color: var(--green); }
+    #loading { text-align: center; padding: 40px; color: var(--muted); }
+  </style>
+</head>
+<body>
+  <div id="loading">Loading dashboard data...</div>
+  <div id="dashboard" style="display:none">
+    <div class="header">
+      <div>
+        <span class="status-dot active" id="status-dot"></span>
+        <span class="squad-name" id="squad-name">—</span>
+      </div>
+      <div class="session" id="session-info">—</div>
+    </div>
+
+    <div class="waves-container" id="waves"></div>
+
+    <div class="stats-bar">
+      <div class="stat">
+        <span class="stat-label">Bus:</span>
+        <span class="stat-value" id="bus-total">0</span>
+        <span class="stat-label">msgs</span>
+      </div>
+      <div class="stat-divider"></div>
+      <div class="stat">
+        <span class="stat-label">Blocks:</span>
+        <span class="stat-value" id="bus-blocks">0</span>
+      </div>
+      <div class="stat-divider"></div>
+      <div class="stat">
+        <span class="stat-label">Budget:</span>
+        <span class="stat-value" id="budget-info">—</span>
+      </div>
+      <div class="stat-divider"></div>
+      <div class="stat">
+        <span class="stat-label">Sessions:</span>
+        <span class="stat-value" id="sessions-count">0</span>
+      </div>
+    </div>
+
+    <div class="bus-feed" id="bus-feed"></div>
+  </div>
+
+  <script>
+    const TASK_ICONS = {
+      completed: '\u2713',
+      in_progress: '\u25B6',
+      failed: '\u2717',
+      escalated: '\u26A0',
+      pending: '\u25CB',
+      skipped: '\u2013'
+    };
+
+    function renderWaves(wavesData) {
+      const container = document.getElementById('waves');
+      container.innerHTML = '';
+
+      for (const wave of (wavesData.waves || [])) {
+        const el = document.createElement('div');
+        el.className = 'wave';
+        const statusClass = wave.status.toLowerCase();
+
+        el.innerHTML = `
+          <div class="wave-header ${statusClass}">Wave ${wave.wave} [${wave.status}]</div>
+          ${wave.tasks.map(t => `
+            <div class="task">
+              <span class="task-icon ${t.status}">${TASK_ICONS[t.status] || '?'}</span>
+              <span>${t.executor || t.title || t.id}</span>
+            </div>
+          `).join('')}
+        `;
+        container.appendChild(el);
+      }
+    }
+
+    function renderBusFeed(busData) {
+      const feed = document.getElementById('bus-feed');
+      const messages = busData.lastMessages || [];
+      feed.innerHTML = messages.slice(-10).reverse().map(m => `
+        <div class="bus-msg">
+          <span class="from">${m.from}</span>
+          <span class="type ${m.type}">[${m.type}]</span>
+          ${m.content ? m.content.slice(0, 80) : ''}
+        </div>
+      `).join('');
+    }
+
+    function renderDashboard(data) {
+      document.getElementById('loading').style.display = 'none';
+      document.getElementById('dashboard').style.display = 'block';
+
+      document.getElementById('squad-name').textContent = `Squad: ${data.squad}`;
+      document.getElementById('session-info').textContent =
+        data.waves.sessionId ? `Session: ${data.waves.sessionId.slice(0, 8)}` : '';
+
+      if (data.state) {
+        document.getElementById('sessions-count').textContent =
+          data.state.sessions_completed || 0;
+      }
+
+      document.getElementById('bus-total').textContent = data.bus.total || 0;
+      document.getElementById('bus-blocks').textContent = data.bus.blocks || 0;
+
+      if (data.budget && data.budget.max_tokens_per_session) {
+        document.getElementById('budget-info').textContent =
+          `${(data.budget.max_tokens_per_session / 1000).toFixed(0)}k`;
+      }
+
+      const dot = document.getElementById('status-dot');
+      if (data.bus.blocks > 0) {
+        dot.className = 'status-dot warning';
+      } else {
+        dot.className = 'status-dot active';
+      }
+
+      renderWaves(data.waves);
+      renderBusFeed(data.bus);
+    }
+
+    // MCP App data injection point
+    if (window.__MCP_DATA__) {
+      renderDashboard(window.__MCP_DATA__);
+    }
+
+    // Polling fallback for standalone mode
+    if (window.__DASHBOARD_API__) {
+      async function poll() {
+        try {
+          const res = await fetch(window.__DASHBOARD_API__);
+          const data = await res.json();
+          renderDashboard(data);
+        } catch { /* retry */ }
+        setTimeout(poll, 3000);
+      }
+      poll();
+    }
+  </script>
+</body>
+</html>

package/src/mcp/apps/squad-dashboard/mcp-manifest.json

@@ -0,0 +1,23 @@
+{
+  "name": "aioson-squad-dashboard",
+  "version": "1.0.0",
+  "description": "Real-time squad execution dashboard for AIOSON",
+  "type": "mcp-app",
+  "display": {
+    "title": "Squad Dashboard",
+    "icon": "grid",
+    "width": 600,
+    "height": 400
+  },
+  "entry": "index.html",
+  "resources": [
+    "aioson://squad/{slug}/state",
+    "aioson://squad/{slug}/bus",
+    "aioson://squad/{slug}/budget",
+    "aioson://squad/{slug}/waves"
+  ],
+  "permissions": [
+    "read:squad-state",
+    "read:squad-bus"
+  ]
+}

package/src/mcp/resources/squad-state.js

@@ -0,0 +1,130 @@
+'use strict';
+
+/**
+ * MCP Resources: Squad State — Plan 81, Phase 4.2
+ *
+ * Exposes squad execution state as MCP resources that can be consumed
+ * by MCP Apps (dashboard) and MCP clients.
+ *
+ * Resources:
+ *   aioson://squad/{slug}/state   → STATE.md parsed as JSON
+ *   aioson://squad/{slug}/bus     → last 20 bus messages
+ *   aioson://squad/{slug}/budget  → token budget status
+ *   aioson://squad/{slug}/waves   → execution wave status
+ */
+
+const { readState } = require('../../squad/state-manager');
+const {
+  getDashboardData,
+  readBusState,
+  readBudgetState,
+  readWavesState
+} = require('../apps/squad-dashboard/app');
+
+/**
+ * MCP resource URI pattern.
+ */
+const RESOURCE_PATTERNS = [
+  { pattern: /^aioson:\/\/squad\/([a-z0-9-]+)\/state$/, handler: 'state' },
+  { pattern: /^aioson:\/\/squad\/([a-z0-9-]+)\/bus$/, handler: 'bus' },
+  { pattern: /^aioson:\/\/squad\/([a-z0-9-]+)\/budget$/, handler: 'budget' },
+  { pattern: /^aioson:\/\/squad\/([a-z0-9-]+)\/waves$/, handler: 'waves' },
+  { pattern: /^aioson:\/\/squad\/([a-z0-9-]+)\/dashboard$/, handler: 'dashboard' }
+];
+
+/**
+ * Resolve an MCP resource URI to its data.
+ *
+ * @param {string} uri  — MCP resource URI
+ * @param {string} projectDir  — Project root
+ * @returns {Promise<object|null>}  — Resource data or null if not found
+ */
+async function resolveResource(uri, projectDir) {
+  for (const { pattern, handler } of RESOURCE_PATTERNS) {
+    const match = uri.match(pattern);
+    if (!match) continue;
+
+    const squadSlug = match[1];
+
+    switch (handler) {
+      case 'state':
+        return readState(projectDir, squadSlug);
+
+      case 'bus':
+        return readBusState(projectDir, squadSlug);
+
+      case 'budget':
+        return readBudgetState(projectDir, squadSlug);
+
+      case 'waves':
+        return readWavesState(projectDir, squadSlug);
+
+      case 'dashboard':
+        return getDashboardData(projectDir, squadSlug);
+    }
+  }
+
+  return null;
+}
+
+/**
+ * List available MCP resources for a project.
+ *
+ * @param {string} projectDir
+ * @returns {Promise<object[]>}  — Array of { uri, name, description, mimeType }
+ */
+async function listResources(projectDir) {
+  const fs = require('node:fs/promises');
+  const path = require('node:path');
+  const squadsDir = path.join(projectDir, '.aioson', 'squads');
+  const resources = [];
+
+  try {
+    const entries = await fs.readdir(squadsDir, { withFileTypes: true });
+    for (const entry of entries) {
+      if (!entry.isDirectory()) continue;
+      const slug = entry.name;
+
+      resources.push(
+        {
+          uri: `aioson://squad/${slug}/state`,
+          name: `Squad ${slug} — State`,
+          description: `Cross-session state for squad "${slug}"`,
+          mimeType: 'application/json'
+        },
+        {
+          uri: `aioson://squad/${slug}/bus`,
+          name: `Squad ${slug} — Bus`,
+          description: `Recent intra-squad bus messages for "${slug}"`,
+          mimeType: 'application/json'
+        },
+        {
+          uri: `aioson://squad/${slug}/budget`,
+          name: `Squad ${slug} — Budget`,
+          description: `Token budget status for "${slug}"`,
+          mimeType: 'application/json'
+        },
+        {
+          uri: `aioson://squad/${slug}/waves`,
+          name: `Squad ${slug} — Waves`,
+          description: `Execution wave status for "${slug}"`,
+          mimeType: 'application/json'
+        },
+        {
+          uri: `aioson://squad/${slug}/dashboard`,
+          name: `Squad ${slug} — Dashboard`,
+          description: `Complete dashboard data for "${slug}"`,
+          mimeType: 'application/json'
+        }
+      );
+    }
+  } catch { /* no squads dir */ }
+
+  return resources;
+}
+
+module.exports = {
+  resolveResource,
+  listResources,
+  RESOURCE_PATTERNS
+};