app/src/content/embeds/task-flow-matrix.html

<div class="task-flow-matrix" style="width:100%;margin:14px 0;"></div>
<style>
  .task-flow-matrix {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-bg);
    overflow: hidden;
    color: var(--text-color);
  }
  .task-flow-matrix__head {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in oklab, var(--muted-color) 4%, transparent);
    flex-wrap: wrap;
  }
  .task-flow-matrix__title {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted-color);
    margin-right: auto;
  }
  .tfm-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 999px;
    white-space: nowrap;
  }
  .tfm-pill.byo {
    color: var(--muted-color);
    border: 1px dashed color-mix(in oklab, var(--muted-color) 50%, transparent);
    background: transparent;
  }
  .tfm-pill.bundled {
    background: color-mix(in oklab, #22c55e 14%, transparent);
    color: #16a34a;
    border: 1px solid color-mix(in oklab, #22c55e 35%, transparent);
  }
  .tfm-pill.server {
    background: color-mix(in oklab, #a855f7 12%, transparent);
    color: #7c3aed;
    border: 1px solid color-mix(in oklab, #a855f7 35%, transparent);
  }
  .tfm-pill.file {
    background: color-mix(in oklab, #3b82f6 12%, transparent);
    color: #1d4ed8;
    border: 1px solid color-mix(in oklab, #3b82f6 35%, transparent);
  }

  .task-flow-matrix__wrap { overflow-x: auto; }
  .task-flow-matrix table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    min-width: 760px;
  }
  .task-flow-matrix table thead th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--muted-color);
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in oklab, var(--muted-color) 3%, transparent);
    white-space: nowrap;
  }
  .task-flow-matrix table thead th .swatch {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--c, var(--muted-color));
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
  }
  .task-flow-matrix table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid color-mix(in oklab, var(--border-color) 60%, transparent);
    vertical-align: middle;
    color: var(--text-color);
    font-size: 11.5px;
    line-height: 1.5;
  }
  .task-flow-matrix table tbody tr:last-child td { border-bottom: 0; }
  .task-flow-matrix table tbody tr:hover td {
    background: color-mix(in oklab, var(--muted-color) 3%, transparent);
  }
  .task-flow-matrix table tbody td.row-name {
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
  }
  .task-flow-matrix code {
    background: color-mix(in oklab, var(--muted-color) 10%, transparent);
    border-radius: 3px;
    padding: 0 5px;
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
</style>
<script>
(() => {
  const bootstrap = () => {
    const scriptEl = document.currentScript;
    let container = scriptEl ? scriptEl.previousElementSibling : null;
    if (!(container && container.classList && container.classList.contains('task-flow-matrix'))) {
      const cands = Array.from(document.querySelectorAll('.task-flow-matrix'))
        .filter(el => !(el.dataset && el.dataset.mounted === 'true'));
      container = cands[cands.length - 1] || null;
    }
    if (!container || (container.dataset && container.dataset.mounted === 'true')) return;
    container.dataset.mounted = 'true';

    const FRAMEWORKS = [
      { key: 'openenv', name: 'OpenEnv',   color: '#3b82f6' },
      { key: 'ors',     name: 'ORS',       color: '#a855f7' },
      { key: 'nemo',    name: 'NeMo Gym',  color: '#22c55e' },
      { key: 'verifs',  name: 'Verifiers', color: '#ec4899' },
      { key: 'skyrl',   name: 'SkyRL Gym', color: '#f59e0b' },
      { key: 'gem',     name: 'GEM',       color: '#14b8a6' },
    ];

    const byo      = '<span class="tfm-pill byo">BYO</span>';
    const bundled  = '<span class="tfm-pill bundled">Bundled</span>';
    const server   = '<span class="tfm-pill server">Server-side</span>';
    const file     = '<span class="tfm-pill file">File-based</span>';

    const ROWS = [
      { name: 'Source', cells: {
        openenv: byo,
        ors:     server + ' task DB',
        nemo:    file + ' JSONL',
        verifs:  bundled + ' HF <code>Dataset</code>',
        skyrl:   byo + ' (JSONL or generator)',
        gem:     bundled + ' 24+ built-in envs',
      }},
      { name: 'Loader', cells: {
        openenv: 'Trainer loop · feeds <code>reset()</code>',
        ors:     '<code>list_tasks(split)</code> at runtime',
        nemo:    '<code>ng_prepare_data</code> CLI',
        verifs:  '<code>vf.ToolEnv(dataset=…)</code>',
        skyrl:   '<code>BaseTextEnv.init(prompt)</code>',
        gem:     '<code>gem.make("Env-v0")</code>',
      }},
      { name: 'Prompt template', cells: {
        openenv: 'BYO',
        ors:     '<code>get_prompt()</code> from server',
        nemo:    'In JSONL · <code>responses_create_params</code>',
        verifs:  '<code>system_prompt</code> param',
        skyrl:   'BYO',
        gem:     'Per-env instructions',
      }},
      { name: 'Splits', cells: {
        openenv: '—',
        ors:     'Yes · <code>list_splits()</code>',
        nemo:    'Yes · per file',
        verifs:  'Yes · HF splits',
        skyrl:   '—',
        gem:     'Per-env',
      }},
      { name: 'Versioning', cells: {
        openenv: 'Up to you',
        ors:     'Server-versioned',
        nemo:    'Filename / commit',
        verifs:  'HF dataset commit',
        skyrl:   'Up to you',
        gem:     'Env id (e.g. <code>-v0</code>)',
      }},
    ];

    const headerCells = FRAMEWORKS.map(f =>
      `<th><span class="swatch" style="--c:${f.color};"></span>${f.name}</th>`
    ).join('');

    const bodyHtml = ROWS.map(r => {
      const cells = FRAMEWORKS.map(f => `<td>${r.cells[f.key]}</td>`).join('');
      return `<tr><td class="row-name">${r.name}</td>${cells}</tr>`;
    }).join('');

    container.innerHTML = `
      <div class="task-flow-matrix__head">
        <span class="task-flow-matrix__title">Tasks & datasets · 6 frameworks</span>
      </div>
      <div class="task-flow-matrix__wrap">
        <table>
          <thead>
            <tr><th>Capability</th>${headerCells}</tr>
          </thead>
          <tbody>${bodyHtml}</tbody>
        </table>
      </div>
    `;
  };

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
  } else {
    bootstrap();
  }
})();
</script>