Blame for src/static/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Meeseeks — Agent-Agnostic Skill Workbench</title>
<style>
  :root {
    --bg: #0b1020;
    --panel: #131a30;
    --panel-soft: #1c2444;
    --line: #2a3358;
    --text: #e6e9f5;
    --muted: #8a93b6;
    --accent: #7c8bff;
    --accent-soft: #5566ff33;
    --good: #3ddc84;
    --warn: #ffb547;
    --bad: #ff6b6b;
    --code-bg: #0a0e20;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
  }
  .wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
  header {
    border-bottom: 1px solid var(--line);
    padding: 18px 0;
  }
  header .row {
    display: flex; align-items: center; gap: 14px;
  }
  header .badge {
    width: 36px; height: 36px; border-radius: 8px;
    background: linear-gradient(135deg, #7c8bff, #5b6eff);
    display: grid; place-items: center; font-size: 20px;
  }
  header h1 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: 0.02em; }
  header .sub { color: var(--muted); font-size: 13px; }
  nav.tabs { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
  nav.tabs button {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
  }
  nav.tabs button.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
  }
  main { padding: 28px 0 60px; }
  section.pane { display: none; }
  section.pane.active { display: block; }
  h2 { font-size: 22px; margin: 0 0 8px; }
  h3 { font-size: 14px; margin: 18px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
  p, li { color: var(--text); }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  @media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
  .card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px 18px;
  }
  .card.soft { background: var(--panel-soft); }
  textarea, input[type="text"], select {
    width: 100%;
    background: var(--code-bg);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px 12px;
    font: inherit;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12.5px;
  }
  textarea { min-height: 320px; resize: vertical; }
  pre.code {
    background: var(--code-bg);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px 12px;
    overflow: auto;
    margin: 0;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12.5px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 560px;
  }
  button.primary {
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
  }
  button.primary:hover { filter: brightness(1.1); }
  button.ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
  }
  .toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .row-stack { display: flex; flex-direction: column; gap: 10px; }
  .pill {
    display: inline-block;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11.5px;
    color: var(--muted);
    margin-right: 6px;
  }
  .pill.good { color: var(--good); border-color: var(--good); }
  .pill.warn { color: var(--warn); border-color: var(--warn); }
  .pill.bad  { color: var(--bad);  border-color: var(--bad); }
  .placeholder-input {
    display: grid; grid-template-columns: 200px 1fr; gap: 8px; margin-bottom: 6px; align-items: center;
  }
  .placeholder-input label { font-size: 12px; color: var(--muted); font-family: ui-monospace, monospace; }
  .placeholder-input input { font-family: ui-sans-serif, system-ui, sans-serif; }
  .step {
    border-left: 3px solid var(--accent);
    padding: 6px 12px 6px 14px;
    margin-bottom: 10px;
    background: var(--panel-soft);
    border-radius: 0 6px 6px 0;
  }
  .step .head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 2px; }
  .step .id { font-family: ui-monospace, monospace; font-size: 13px; color: var(--accent); }
  .step .action {
    font-size: 11px; padding: 1px 7px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em;
  }
  .step .body { color: var(--muted); font-size: 13px; }
  .step .body strong { color: var(--text); font-weight: 500; }
  .receipt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
  }
  .receipt-grid .frame {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
  }
  .receipt-grid .frame img { width: 100%; display: block; }
  .receipt-grid .frame .cap { padding: 8px 10px; font-size: 11.5px; color: var(--muted); font-family: ui-monospace, monospace; }
  .err { color: var(--bad); }
  .ok  { color: var(--good); }
  .small { font-size: 12px; color: var(--muted); }
  .muted { color: var(--muted); }
  .kvtable { width: 100%; font-size: 13px; }
  .kvtable td { padding: 4px 8px; border-bottom: 1px solid var(--line); }
  .kvtable td:first-child { color: var(--muted); width: 30%; }
  .bundle-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
  .bundle-tabs button { font-size: 12px; padding: 4px 10px; }
  .footer {
    border-top: 1px solid var(--line);
    padding: 18px 0;
    color: var(--muted);
    font-size: 12px;
  }
  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; }
</style>
</head>
<body>
<header>
  <div class="wrap">
    <div class="row">
      <div class="badge">⚖️</div>
      <div>
        <h1>Meeseeks</h1>
        <div class="sub">Agent-agnostic skill workbench — author once, run on Claude / GPT / Gemini / local</div>
      </div>
    </div>
    <nav class="tabs">
      <button data-tab="home" class="active">🏠 Home</button>
      <button data-tab="author">✏️ Author</button>
      <button data-tab="bundle">📦 Bundle</button>
      <button data-tab="receipts">🧾 Receipts</button>
    </nav>
  </div>
</header>

<main class="wrap">

<section class="pane active" id="pane-home">
  <h2>What this is</h2>
  <p class="muted">
    Meeseeks turns repeatable computer workflows into structured skills any agent can run. The same JSON drops into Claude (Agent Skills format), GPT (system prompt + tool calls), Gemini, or a local model — no translation layer, no per-agent rewrite.
  </p>

  <div class="grid-2" style="margin-top: 16px;">
    <div class="card">
      <h3>The pipeline</h3>
      <ol class="muted" style="margin: 0; padding-left: 20px;">
        <li><strong style="color:var(--text)">Author</strong> a skill in a small Zod-validated JSON shape with bbox / accessibility-tree / success-check grounding.</li>
        <li><strong style="color:var(--text)">Bundle</strong> it: derive <code>SKILL.md</code> (Anthropic Agent Skills frontmatter), <code>manifest.json</code> (grounding metadata), and <code>actions.toon</code> (token-oriented action list).</li>
        <li><strong style="color:var(--text)">Run</strong> through the Playwright executor — accessibility-first resolution, screenshots per step, JSON receipt.</li>
      </ol>
    </div>
    <div class="card">
      <h3>Why it matters</h3>
      <p class="muted" style="margin: 0;">
        Today, every agent platform reinvents skill capture: ChatGPT custom GPTs, Claude Skills, Operator macros — all incompatible.
        Meeseeks is the smallest spec that keeps a skill portable while preserving the grounding metadata that makes execution safe.
      </p>
    </div>
  </div>

  <h3 style="margin-top: 28px;">Try it</h3>
  <p class="muted" style="margin-top: 0;">
    Click <strong>✏️ Author</strong> to paste a skill JSON (or pick a sample), see the plan with placeholders substituted, then <strong>📦 Bundle</strong> to see the three derived artifacts. <strong>🧾 Receipts</strong> shows real screenshots from the executor walking through these skills on a mock paralegal app.
  </p>
</section>

<section class="pane" id="pane-author">
  <div class="grid-2">
    <div>
      <h3>Skill JSON <span class="small">— paste or pick a sample</span></h3>
      <div class="toolbar" style="margin-bottom: 8px;">
        <select id="sample-picker"><option value="">— pick a sample —</option></select>
        <button class="ghost" id="format-btn">Format</button>
      </div>
      <textarea id="skill-input" spellcheck="false" placeholder="Paste a Sarah-JSON skill here…"></textarea>

      <div id="placeholders" style="margin-top: 14px;"></div>

      <div class="toolbar" style="margin-top: 14px;">
        <button class="primary" id="plan-btn">Generate plan</button>
        <button class="ghost" id="validate-btn">Validate only</button>
      </div>
    </div>

    <div>
      <h3>Plan output</h3>
      <div id="plan-summary" class="card soft" style="margin-bottom: 10px;">
        <div class="muted small">Plan results appear here after you click <em>Generate plan</em>.</div>
      </div>
      <div id="plan-steps"></div>
    </div>
  </div>
</section>

<section class="pane" id="pane-bundle">
  <div class="toolbar" style="margin-bottom: 12px;">
    <select id="bundle-picker"><option value="">— pick a sample —</option></select>
    <button class="primary" id="export-btn">Export bundle</button>
    <span class="small muted">Generates <code>SKILL.md</code>, <code>manifest.json</code>, and <code>actions.toon</code> from the picked sample.</span>
  </div>
  <div class="bundle-tabs">
    <button class="ghost active" data-bundle-tab="skill_md">SKILL.md</button>
    <button class="ghost" data-bundle-tab="manifest_json">manifest.json</button>
    <button class="ghost" data-bundle-tab="actions_toon">actions.toon</button>
  </div>
  <pre class="code" id="bundle-output">Pick a sample and click Export bundle.</pre>
</section>

<section class="pane" id="pane-receipts">
  <p class="muted">Real screenshots from the Playwright executor running these skills against the local mock paralegal app. Each pair is the page state before and after the step's action. Resolved via accessibility role + name (the gold-standard grounding path) — no bbox or text fallback needed.</p>
  <div id="receipts-list"></div>
</section>

</main>

<div class="footer wrap">
  <div>Built for the AMD/lablab hackathon · Meeseeks v0.1 · <a href="https://huggingface.co/spaces/AryaYT/meeseeks">Space source</a></div>
</div>

<script>
const $ = (s, root = document) => root.querySelector(s);
const $$ = (s, root = document) => Array.from(root.querySelectorAll(s));

// Tabs
$$("nav.tabs button").forEach((b) => {
  b.addEventListener("click", () => {
    $$("nav.tabs button").forEach((x) => x.classList.remove("active"));
    b.classList.add("active");
    const tab = b.dataset.tab;
    $$(".pane").forEach((p) => p.classList.toggle("active", p.id === `pane-${tab}`));
  });
});

// Bundle inner tabs
let currentBundle = null;
let currentBundleTab = "skill_md";
$$(".bundle-tabs button").forEach((b) => {
  b.addEventListener("click", () => {
    $$(".bundle-tabs button").forEach((x) => x.classList.remove("active"));
    b.classList.add("active");
    currentBundleTab = b.dataset.bundleTab;
    renderBundle();
  });
});

function renderBundle() {
  if (!currentBundle) return;
  $("#bundle-output").textContent = currentBundle[currentBundleTab] ?? "(empty)";
}

// Sample picker
async function loadSamples() {
  const res = await fetch("/samples");
  const samples = await res.json();
  for (const picker of [$("#sample-picker"), $("#bundle-picker")]) {
    for (const s of samples) {
      const opt = document.createElement("option");
      opt.value = s.name;
      opt.textContent = `${s.name} (${s.bytes}b)`;
      picker.appendChild(opt);
    }
  }
}

$("#sample-picker").addEventListener("change", async (e) => {
  const name = e.target.value;
  if (!name) return;
  const res = await fetch(`/samples/${name}.json`);
  const text = await res.text();
  $("#skill-input").value = text;
  rebuildPlaceholderInputs();
});

$("#format-btn").addEventListener("click", () => {
  try {
    const v = JSON.parse($("#skill-input").value);
    $("#skill-input").value = JSON.stringify(v, null, 2);
    rebuildPlaceholderInputs();
  } catch (e) {
    alert("Invalid JSON: " + e.message);
  }
});

$("#skill-input").addEventListener("input", rebuildPlaceholderInputs);

function getCurrentSkill() {
  try { return JSON.parse($("#skill-input").value); } catch { return null; }
}

function rebuildPlaceholderInputs() {
  const skill = getCurrentSkill();
  const host = $("#placeholders");
  host.innerHTML = "";
  if (!skill || !Array.isArray(skill.meta?.placeholders)) return;
  if (skill.meta.placeholders.length === 0) return;
  const wrap = document.createElement("div");
  wrap.className = "card soft";
  wrap.innerHTML = `<h3 style="margin-top: 0;">Inputs <span class="small">— bind these placeholders</span></h3>`;
  for (const ph of skill.meta.placeholders) {
    const key = ph.replace(/^\{\{|\}\}$/g, "");
    const row = document.createElement("div");
    row.className = "placeholder-input";
    row.innerHTML = `<label>${ph}</label><input type="text" data-key="${key}" placeholder="value for ${key.toLowerCase()}" />`;
    wrap.appendChild(row);
  }
  host.appendChild(wrap);
}

function collectInputs() {
  const inputs = {};
  $$("#placeholders input[data-key]").forEach((i) => {
    if (i.value.trim()) inputs[i.dataset.key] = i.value;
  });
  return inputs;
}

function fmtAction(a) {
  return `<span class="action">${a}</span>`;
}

function renderStep(s, i) {
  const groundingBits = [];
  if (s.target.bbox)    groundingBits.push(`bbox=[${s.target.bbox.join(",")}]`);
  if (s.target.ax_role) groundingBits.push(`role=${s.target.ax_role}`);
  if (s.target.ax_name) groundingBits.push(`name="${s.target.ax_name}"`);
  const grounding = groundingBits.length ? `<span class="small muted"> · ${groundingBits.join(" ")}</span>` : "";
  const fb = s.fallback ? `<div class="body"><strong>else:</strong> ${escapeHtml(s.fallback)}</div>` : "";
  return `<div class="step">
    <div class="head">
      <span class="id">${i + 1}. ${escapeHtml(s.id)}</span> ${fmtAction(s.action)}
    </div>
    <div class="body"><strong>target:</strong> ${escapeHtml(s.target.description)}${grounding}</div>
    <div class="body"><strong>do:</strong> ${escapeHtml(s.instruction)}</div>
    <div class="body"><strong>check:</strong> ${escapeHtml(s.successCheck)}</div>
    ${fb}
  </div>`;
}

function escapeHtml(s) {
  return String(s ?? "")
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;");
}

$("#validate-btn").addEventListener("click", async () => {
  const skill = getCurrentSkill();
  if (!skill) return alert("Skill JSON is invalid.");
  const res = await fetch("/api/validate", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ skill }),
  });
  const data = await res.json();
  const sum = $("#plan-summary");
  if (data.ok) {
    sum.innerHTML = `<div class="ok">✓ Valid skill</div>
      <table class="kvtable">
        <tr><td>name</td><td><code>${data.name}</code></td></tr>
        <tr><td>steps</td><td>${data.steps}</td></tr>
        <tr><td>placeholders</td><td>${data.placeholders.join(", ") || "(none)"}</td></tr>
      </table>`;
    $("#plan-steps").innerHTML = "";
  } else {
    sum.innerHTML = `<div class="err">✗ Invalid skill</div><pre class="code">${escapeHtml(JSON.stringify(data.issues, null, 2))}</pre>`;
  }
});

$("#plan-btn").addEventListener("click", async () => {
  const skill = getCurrentSkill();
  if (!skill) return alert("Skill JSON is invalid.");
  const inputs = collectInputs();
  const res = await fetch("/api/plan", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ skill, inputs }),
  });
  if (!res.ok) {
    const err = await res.json();
    $("#plan-summary").innerHTML = `<div class="err">${escapeHtml(err.error ?? "error")}</div>`;
    $("#plan-steps").innerHTML = "";
    return;
  }
  const plan = await res.json();
  const sum = $("#plan-summary");
  const unboundPill = plan.unbound_placeholders.length
    ? `<span class="pill warn">⚠ ${plan.unbound_placeholders.length} unbound</span>`
    : `<span class="pill good">✓ all placeholders bound</span>`;
  sum.innerHTML = `<div><strong>${escapeHtml(plan.skill_name)}</strong> ${unboundPill}
    <span class="pill">${plan.steps.length} steps</span>
    <span class="pill">domain: ${escapeHtml(plan.domain)}</span></div>
    <div class="muted small" style="margin-top:6px;">${escapeHtml(plan.intent)}</div>
    ${plan.unbound_placeholders.length ? `<div class="small" style="margin-top:6px;">Unbound: <code>${plan.unbound_placeholders.join(", ")}</code></div>` : ""}`;
  $("#plan-steps").innerHTML = plan.steps.map(renderStep).join("");
});

// Bundle pane
$("#export-btn").addEventListener("click", async () => {
  const name = $("#bundle-picker").value;
  if (!name) return alert("Pick a sample first.");
  const skillRes = await fetch(`/samples/${name}.json`);
  const skill = await skillRes.json();
  const res = await fetch("/api/export", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ skill }),
  });
  if (!res.ok) {
    $("#bundle-output").textContent = "Error: " + (await res.text());
    return;
  }
  currentBundle = await res.json();
  renderBundle();
});

// Receipts
async function loadReceipts() {
  const res = await fetch("/receipts");
  const list = await res.json();
  const host = $("#receipts-list");
  host.innerHTML = "";
  for (const r of list) {
    const section = document.createElement("div");
    section.style.marginBottom = "32px";
    const png = r.files.filter((f) => f.endsWith(".png"));
    const json = r.files.find((f) => f.endsWith(".json"));
    section.innerHTML = `<h3 style="margin-top:0;">${r.name} <span class="small muted">— ${png.length} frames${json ? ", receipt JSON" : ""}</span></h3>`;
    if (json) {
      const link = document.createElement("a");
      link.href = `/receipts/${r.name}/${json}`;
      link.target = "_blank";
      link.textContent = json;
      link.className = "small";
      const lineWrap = document.createElement("div");
      lineWrap.style.marginBottom = "8px";
      lineWrap.append("Receipt: ", link);
      section.appendChild(lineWrap);
    }
    const grid = document.createElement("div");
    grid.className = "receipt-grid";
    for (const f of png) {
      const tile = document.createElement("div");
      tile.className = "frame";
      tile.innerHTML = `<img loading="lazy" src="/receipts/${r.name}/${f}" alt="${f}" /><div class="cap">${f}</div>`;
      grid.appendChild(tile);
    }
    section.appendChild(grid);
    host.appendChild(section);
  }
}

loadSamples().catch(console.error);
loadReceipts().catch(console.error);
</script>
</body>
</html>