pmx-canvas 0.1.0

package/src/server/canvas-validation.ts

@@ -0,0 +1,114 @@
+import type { CanvasLayout, CanvasNodeState } from './canvas-state.js';
+import { getCanvasNodeTitle } from './canvas-serialization.js';
+
+export interface CanvasValidationPair {
+  aId: string;
+  aTitle: string | null;
+  bId: string;
+  bTitle: string | null;
+}
+
+export interface CanvasContainmentIssue {
+  groupId: string;
+  groupTitle: string | null;
+  childId: string;
+  childTitle: string | null;
+}
+
+export interface CanvasValidationResult {
+  ok: boolean;
+  collisions: CanvasValidationPair[];
+  containments: CanvasContainmentIssue[];
+  containmentViolations: CanvasContainmentIssue[];
+  missingEdgeEndpoints: Array<{ edgeId: string; from: string; to: string }>;
+  summary: {
+    nodes: number;
+    edges: number;
+    collisions: number;
+    containments: number;
+    containmentViolations: number;
+    missingEdgeEndpoints: number;
+  };
+}
+
+function overlaps(a: CanvasNodeState, b: CanvasNodeState): boolean {
+  return (
+    a.position.x < b.position.x + b.size.width &&
+    a.position.x + a.size.width > b.position.x &&
+    a.position.y < b.position.y + b.size.height &&
+    a.position.y + a.size.height > b.position.y
+  );
+}
+
+function fullyContains(group: CanvasNodeState, child: CanvasNodeState): boolean {
+  return (
+    child.position.x >= group.position.x &&
+    child.position.y >= group.position.y &&
+    child.position.x + child.size.width <= group.position.x + group.size.width &&
+    child.position.y + child.size.height <= group.position.y + group.size.height
+  );
+}
+
+function pair(a: CanvasNodeState, b: CanvasNodeState): CanvasValidationPair {
+  return {
+    aId: a.id,
+    aTitle: getCanvasNodeTitle(a),
+    bId: b.id,
+    bTitle: getCanvasNodeTitle(b),
+  };
+}
+
+function containment(group: CanvasNodeState, child: CanvasNodeState): CanvasContainmentIssue {
+  return {
+    groupId: group.id,
+    groupTitle: getCanvasNodeTitle(group),
+    childId: child.id,
+    childTitle: getCanvasNodeTitle(child),
+  };
+}
+
+export function validateCanvasLayout(layout: CanvasLayout): CanvasValidationResult {
+  const collisions: CanvasValidationPair[] = [];
+  const containments: CanvasContainmentIssue[] = [];
+  const containmentViolations: CanvasContainmentIssue[] = [];
+
+  for (let i = 0; i < layout.nodes.length; i++) {
+    const a = layout.nodes[i]!;
+    for (let j = i + 1; j < layout.nodes.length; j++) {
+      const b = layout.nodes[j]!;
+      if (!overlaps(a, b)) continue;
+
+      if (a.type === 'group' && b.data.parentGroup === a.id) {
+        (fullyContains(a, b) ? containments : containmentViolations).push(containment(a, b));
+        continue;
+      }
+      if (b.type === 'group' && a.data.parentGroup === b.id) {
+        (fullyContains(b, a) ? containments : containmentViolations).push(containment(b, a));
+        continue;
+      }
+
+      collisions.push(pair(a, b));
+    }
+  }
+
+  const nodeIds = new Set(layout.nodes.map((node) => node.id));
+  const missingEdgeEndpoints = layout.edges
+    .filter((edge) => !nodeIds.has(edge.from) || !nodeIds.has(edge.to))
+    .map((edge) => ({ edgeId: edge.id, from: edge.from, to: edge.to }));
+
+  return {
+    ok: collisions.length === 0 && containmentViolations.length === 0 && missingEdgeEndpoints.length === 0,
+    collisions,
+    containments,
+    containmentViolations,
+    missingEdgeEndpoints,
+    summary: {
+      nodes: layout.nodes.length,
+      edges: layout.edges.length,
+      collisions: collisions.length,
+      containments: containments.length,
+      containmentViolations: containmentViolations.length,
+      missingEdgeEndpoints: missingEdgeEndpoints.length,
+    },
+  };
+}

package/src/server/chart-template.ts

@@ -0,0 +1,449 @@
+/**
+ * Chart HTML template generator — produces self-contained ext-app HTML
+ * documents that render interactive Chart.js charts inside the canvas
+ * ExtAppFrame iframe.
+ *
+ * The generated HTML:
+ * 1. Renders immediately from inline data (no bridge needed)
+ * 2. Connects to host AppBridge via the embedded ext-app App SDK runtime
+ * 3. Accepts updated data via toolInput for re-rendering
+ */
+
+import { readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+const extAppsPackageDir = dirname(require.resolve('@modelcontextprotocol/ext-apps/package.json'));
+const extAppsRuntimeSource = readFileSync(
+  join(extAppsPackageDir, 'dist', 'src', 'app-with-deps.js'),
+  'utf-8',
+);
+const appBindingMatch = extAppsRuntimeSource.match(/([A-Za-z_$][\w$]*) as App/);
+const transportBindingMatch = extAppsRuntimeSource.match(/([A-Za-z_$][\w$]*) as PostMessageTransport/);
+
+if (!appBindingMatch || !transportBindingMatch) {
+  throw new Error('Failed to locate App or PostMessageTransport export bindings in @modelcontextprotocol/ext-apps runtime');
+}
+
+const extAppsBootstrapSource = `${extAppsRuntimeSource}
+const App = ${appBindingMatch[1]};
+const PostMessageTransport = ${transportBindingMatch[1]};`;
+
+export interface ChartDataset {
+  label: string;
+  values: number[];
+  color?: string;
+}
+
+export interface ChartConfig {
+  title: string;
+  chartType: 'bar' | 'line' | 'pie' | 'scatter' | 'doughnut' | 'radar';
+  labels: string[];
+  datasets: ChartDataset[];
+  xAxisLabel?: string;
+  yAxisLabel?: string;
+  stacked?: boolean;
+}
+
+const PALETTE = ['#46b6ff', '#2fd07f', '#f4c542', '#ff6a7f', '#e896ff', '#ff9f40', '#a7b2c8'];
+
+/**
+ * Map our simplified config to a Chart.js configuration object.
+ */
+function buildChartJsConfig(config: ChartConfig): Record<string, unknown> {
+  const type = config.chartType === 'radar' ? 'radar' : config.chartType;
+  const isPolar = type === 'pie' || type === 'doughnut' || type === 'radar';
+
+  const datasets = config.datasets.map((ds, i) => {
+    const color = ds.color || PALETTE[i % PALETTE.length];
+    const base: Record<string, unknown> = {
+      label: ds.label,
+      data: ds.values,
+    };
+
+    if (isPolar) {
+      // Pie/doughnut/radar: per-segment colors
+      base.backgroundColor = config.labels.map((_, j) => `${PALETTE[j % PALETTE.length]}cc`);
+      base.borderColor = config.labels.map((_, j) => PALETTE[j % PALETTE.length]);
+      base.borderWidth = 1;
+    } else {
+      base.backgroundColor = `${color}99`;
+      base.borderColor = color;
+      base.borderWidth = 2;
+      if (type === 'line') {
+        base.tension = 0.3;
+        base.fill = false;
+        base.pointRadius = 4;
+        base.pointHoverRadius = 6;
+      }
+    }
+
+    return base;
+  });
+
+  const scales: Record<string, unknown> = {};
+  if (!isPolar) {
+    scales.x = {
+      grid: { color: 'rgba(255,255,255,0.06)' },
+      ticks: { color: '#7b8da8', font: { size: 11 } },
+      ...(config.xAxisLabel && {
+        title: { display: true, text: config.xAxisLabel, color: '#a7b2c8', font: { size: 12 } },
+      }),
+      ...(config.stacked && { stacked: true }),
+    };
+    scales.y = {
+      grid: { color: 'rgba(255,255,255,0.06)' },
+      ticks: { color: '#7b8da8', font: { size: 11 } },
+      ...(config.yAxisLabel && {
+        title: { display: true, text: config.yAxisLabel, color: '#a7b2c8', font: { size: 12 } },
+      }),
+      ...(config.stacked && { stacked: true }),
+    };
+  }
+
+  return {
+    type,
+    data: { labels: config.labels, datasets },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 400 },
+      plugins: {
+        legend: {
+          display: datasets.length > 1 || isPolar,
+          labels: { color: '#a7b2c8', font: { size: 11 }, padding: 12 },
+        },
+        tooltip: {
+          backgroundColor: 'rgba(26,29,35,0.95)',
+          titleColor: '#e0e4ec',
+          bodyColor: '#a7b2c8',
+          borderColor: 'rgba(255,255,255,0.1)',
+          borderWidth: 1,
+          padding: 10,
+          cornerRadius: 6,
+        },
+      },
+      ...(!isPolar && { scales }),
+    },
+  };
+}
+
+/**
+ * Generate a self-contained HTML document that renders a Chart.js chart
+ * and optionally connects to the host via the ext-app App SDK.
+ */
+export function generateChartHtml(config: ChartConfig): string {
+  const chartJsConfig = buildChartJsConfig(config);
+  const configJson = JSON.stringify(chartJsConfig);
+  const chartConfigJson = JSON.stringify(config);
+  const titleEscaped = escapeHtml(config.title);
+
+  // Chart type buttons — highlight the active one
+  const chartTypes: Array<{ key: string; label: string }> = [
+    { key: 'bar', label: 'Bar' },
+    { key: 'line', label: 'Line' },
+    { key: 'pie', label: 'Pie' },
+    { key: 'scatter', label: 'Scatter' },
+    { key: 'doughnut', label: 'Donut' },
+    { key: 'radar', label: 'Radar' },
+  ];
+  const typeButtons = chartTypes
+    .map(
+      (t) =>
+        `<button class="type-btn${t.key === config.chartType ? ' active' : ''}" data-type="${t.key}">${t.label}</button>`,
+    )
+    .join('\n      ');
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    html {
+      width: 100%;
+      height: 100%;
+    }
+    body {
+      background: #1a1d23;
+      color: #e0e4ec;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+      overflow: hidden;
+      width: 100%;
+      height: 100%;
+    }
+    #container {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      min-height: 0;
+    }
+    .toolbar {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 8px 12px;
+      background: rgba(255,255,255,0.03);
+      border-bottom: 1px solid rgba(255,255,255,0.06);
+      flex-shrink: 0;
+    }
+    .chart-title {
+      font-size: 13px;
+      font-weight: 600;
+      color: #e0e4ec;
+      margin-right: auto;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .type-btn {
+      padding: 3px 8px;
+      border: 1px solid rgba(255,255,255,0.1);
+      border-radius: 4px;
+      background: transparent;
+      color: #7b8da8;
+      font-size: 11px;
+      cursor: pointer;
+      transition: all 0.15s;
+      white-space: nowrap;
+    }
+    .type-btn:hover { background: rgba(255,255,255,0.05); color: #e0e4ec; }
+    .type-btn.active {
+      background: rgba(70,182,255,0.15);
+      border-color: rgba(70,182,255,0.3);
+      color: #46b6ff;
+    }
+    .chart-area {
+      flex: 1;
+      padding: 12px;
+      position: relative;
+      min-width: 0;
+      min-height: 0;
+    }
+    #chart {
+      display: block;
+      width: 100% !important;
+      height: 100% !important;
+    }
+    .empty-state {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      color: #7b8da8;
+      font-size: 13px;
+    }
+  </style>
+</head>
+<body>
+  <div id="container">
+    <div class="toolbar">
+      <span class="chart-title">${titleEscaped}</span>
+      ${typeButtons}
+    </div>
+    <div class="chart-area">
+      <canvas id="chart"></canvas>
+    </div>
+  </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
+  <script>
+    // Inline chart configuration — renders immediately without bridge
+    var CHART_CONFIG = ${configJson};
+    var CHART_META = ${chartConfigJson};
+    var chartInstance = null;
+    var chartResizeObserver = null;
+    var chartResizeRaf = null;
+
+    function getChartArea() {
+      return document.querySelector('.chart-area');
+    }
+
+    function getChartSize() {
+      var area = getChartArea();
+      if (!area) return null;
+      var rect = area.getBoundingClientRect();
+      if (!rect || rect.width < 24 || rect.height < 24) return null;
+      return rect;
+    }
+
+    function scheduleChartResize() {
+      if (chartResizeRaf) cancelAnimationFrame(chartResizeRaf);
+      chartResizeRaf = requestAnimationFrame(function() {
+        chartResizeRaf = null;
+        if (chartInstance) chartInstance.resize();
+      });
+    }
+
+    function ensureChartResizeTracking() {
+      var area = getChartArea();
+      if (!area || chartResizeObserver || typeof ResizeObserver !== 'function') return;
+      chartResizeObserver = new ResizeObserver(function() {
+        if (chartInstance) {
+          scheduleChartResize();
+          return;
+        }
+        if (getChartSize()) {
+          renderChart(CHART_CONFIG);
+        }
+      });
+      chartResizeObserver.observe(area);
+      window.addEventListener('resize', scheduleChartResize);
+    }
+
+    function renderChart(cfg) {
+      var size = getChartSize();
+      if (!size) return false;
+      if (chartInstance) { chartInstance.destroy(); chartInstance = null; }
+      var canvas = document.getElementById('chart');
+      if (!canvas) return;
+      canvas.width = Math.max(1, Math.floor(size.width));
+      canvas.height = Math.max(1, Math.floor(size.height));
+      chartInstance = new Chart(canvas.getContext('2d'), JSON.parse(JSON.stringify(cfg)));
+      scheduleChartResize();
+      return true;
+    }
+
+    function renderWhenReady(cfg, attempt) {
+      if (renderChart(cfg)) return;
+      if ((attempt || 0) >= 20) return;
+      requestAnimationFrame(function() {
+        renderWhenReady(cfg, (attempt || 0) + 1);
+      });
+    }
+
+    function switchType(newType) {
+      // Rebuild config for the new chart type using stored metadata
+      var meta = JSON.parse(JSON.stringify(CHART_META));
+      meta.chartType = newType;
+      CHART_META = meta;
+
+      // Update button states
+      document.querySelectorAll('.type-btn').forEach(function(btn) {
+        btn.classList.toggle('active', btn.dataset.type === newType);
+      });
+
+      // Post message to request new config from parent (or rebuild locally)
+      var isPolar = (newType === 'pie' || newType === 'doughnut' || newType === 'radar');
+      var palette = ${JSON.stringify(PALETTE)};
+
+      var datasets = meta.datasets.map(function(ds, i) {
+        var color = ds.color || palette[i % palette.length];
+        var base = { label: ds.label, data: ds.values };
+        if (isPolar) {
+          base.backgroundColor = meta.labels.map(function(_, j) { return palette[j % palette.length] + 'cc'; });
+          base.borderColor = meta.labels.map(function(_, j) { return palette[j % palette.length]; });
+          base.borderWidth = 1;
+        } else {
+          base.backgroundColor = color + '99';
+          base.borderColor = color;
+          base.borderWidth = 2;
+          if (newType === 'line') { base.tension = 0.3; base.fill = false; base.pointRadius = 4; }
+        }
+        return base;
+      });
+
+      var scales = {};
+      if (!isPolar) {
+        scales.x = {
+          grid: { color: 'rgba(255,255,255,0.06)' },
+          ticks: { color: '#7b8da8', font: { size: 11 } },
+          stacked: !!meta.stacked
+        };
+        scales.y = {
+          grid: { color: 'rgba(255,255,255,0.06)' },
+          ticks: { color: '#7b8da8', font: { size: 11 } },
+          stacked: !!meta.stacked
+        };
+        if (meta.xAxisLabel) scales.x.title = { display: true, text: meta.xAxisLabel, color: '#a7b2c8' };
+        if (meta.yAxisLabel) scales.y.title = { display: true, text: meta.yAxisLabel, color: '#a7b2c8' };
+      }
+
+      var newCfg = {
+        type: newType,
+        data: { labels: meta.labels, datasets: datasets },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          animation: { duration: 300 },
+          plugins: {
+            legend: {
+              display: datasets.length > 1 || isPolar,
+              labels: { color: '#a7b2c8', font: { size: 11 }, padding: 12 }
+            },
+            tooltip: {
+              backgroundColor: 'rgba(26,29,35,0.95)',
+              titleColor: '#e0e4ec',
+              bodyColor: '#a7b2c8',
+              borderColor: 'rgba(255,255,255,0.1)',
+              borderWidth: 1, padding: 10, cornerRadius: 6
+            }
+          },
+          scales: isPolar ? undefined : scales
+        }
+      };
+      CHART_CONFIG = newCfg;
+      renderWhenReady(newCfg, 0);
+    }
+
+    window.__PMX_CHART_BRIDGE__ = {
+      updateChartMeta: function(nextMeta) {
+        if (!nextMeta || typeof nextMeta !== 'object') return;
+        CHART_META = nextMeta;
+        switchType(CHART_META.chartType || 'bar');
+      }
+    };
+
+    // Toolbar click handler
+    document.querySelector('.toolbar').addEventListener('click', function(e) {
+      var btn = e.target.closest('.type-btn');
+      if (btn && btn.dataset.type) switchType(btn.dataset.type);
+    });
+
+    // Initial render
+    window.addEventListener('load', function() {
+      ensureChartResizeTracking();
+      if (CHART_META.datasets.length === 0 || CHART_META.labels.length === 0) {
+        document.querySelector('.chart-area').innerHTML =
+          '<div class="empty-state">No data to display</div>';
+        return;
+      }
+      renderWhenReady(CHART_CONFIG, 0);
+    });
+  </script>
+  <script type="module">
+    ${extAppsBootstrapSource}
+
+    try {
+      if (!App) {
+        throw new Error('AppBridge SDK unavailable');
+      }
+
+      const bridge = window.__PMX_CHART_BRIDGE__;
+      const app = new App({ name: 'PMX Chart', version: '1.0.0' }, {});
+      app.ontoolinput = function(params) {
+        bridge?.updateChartMeta?.(params?.arguments);
+      };
+      await app.connect(new PostMessageTransport(window.parent, window.parent));
+    } catch (error) {
+      // Bridge connection optional — chart already rendered from inline data
+      const message = error instanceof Error ? error.message : String(error);
+      console.debug('[pmx-chart] AppBridge not available:', message);
+    }
+  </script>
+</body>
+</html>`;
+}
+
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#x27;');
+}