init: meeseeks bun docker space (server, ui, samples, receipts)

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+.DS_Store
+*.log

Dockerfile

@@ -0,0 +1,17 @@
+# Meeseeks HF Space — Bun runtime, port 7860 (HF default).
+FROM oven/bun:1.3-alpine
+
+WORKDIR /app
+
+COPY package.json bun.lock* ./
+RUN bun install --production --frozen-lockfile 2>/dev/null || bun install --production
+
+COPY src ./src
+COPY samples ./samples
+COPY receipts ./receipts
+COPY tsconfig.json ./
+
+ENV PORT=7860
+EXPOSE 7860
+
+CMD ["bun", "run", "src/server.ts"]

README.md

@@ -0,0 +1,31 @@
+---
+title: Meeseeks
+emoji: ⚖️
+colorFrom: indigo
+colorTo: blue
+sdk: docker
+app_port: 7860
+pinned: true
+license: mit
+short_description: Agent-agnostic skill workbench — capture, redact, run anywhere
+---
+
+# Meeseeks
+
+Meeseeks turns repeatable computer workflows into structured, **agent-agnostic** skills. The same JSON skill description drops into Claude, GPT, Gemini, or any local model that speaks the open Anthropic Agent Skills format — no translation layer.
+
+This Space is a live demo of the authoring + grounding pipeline:
+
+- **Author** — hand-edit a skill JSON, see the placeholder plan substitute live
+- **Bundle** — derive `SKILL.md`, `manifest.json`, and `actions.toon` (token-oriented action format) from one source of truth
+- **Receipts** — see the executor's screenshot trail when the skill walks through a real DOM (Playwright + accessibility-tree grounding)
+
+The full project (CLI, runtime, mock paralegal target, sample skills) lives at the root of the repo.
+
+## Why this matters
+
+Today, every agent platform reinvents skill capture: ChatGPT custom GPTs, Claude Skills, GLaDOS plugins, OpenAI Operator macros — all incompatible. Meeseeks is the smallest possible spec that keeps a skill portable across all of them while preserving the grounding metadata (bbox, accessibility role/name, success checks, fallbacks) that makes a skill safe to run.
+
+## Domain
+
+The current sample set is paralegal — discovery objections, meet-and-confer letters — because it's a high-value workflow domain where redacted templates + verified grounding genuinely save hours. The same shape applies to healthcare intake, financial back-office, and code-review workflows.

package.json

@@ -0,0 +1,14 @@
+{
+  "name": "meeseeks-hf-space",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "bun run src/server.ts",
+    "dev": "bun --watch run src/server.ts"
+  },
+  "dependencies": {
+    "yaml": "^2.5.0",
+    "zod": "^4.4.3"
+  }
+}

receipts/discovery-objection/receipt.json

@@ -0,0 +1,53 @@
+{
+  "skill_name": "draft-discovery-objection",
+  "url": "http://127.0.0.1:8787/",
+  "started_at": "2026-05-09T09:14:27.217Z",
+  "finished_at": "2026-05-09T09:14:30.351Z",
+  "total_ms": 3134,
+  "unbound_placeholders": [],
+  "steps": [
+    {
+      "id": "open-doc",
+      "action": "click",
+      "ok": true,
+      "resolved_via": "ax_role+ax_name",
+      "durationMs": 608,
+      "screenshot_before": "receipts/discovery-objection-demo/01-open-doc-before.png",
+      "screenshot_after": "receipts/discovery-objection-demo/01-open-doc-after.png"
+    },
+    {
+      "id": "type-caption",
+      "action": "type",
+      "ok": true,
+      "resolved_via": "ax_role+ax_name",
+      "durationMs": 72,
+      "screenshot_before": "receipts/discovery-objection-demo/02-type-caption-before.png",
+      "screenshot_after": "receipts/discovery-objection-demo/02-type-caption-after.png",
+      "notes": [
+        "would type: \"Type the case caption Doe v. Acme Corp., No. 24-cv-123 at the top of the document\""
+      ]
+    },
+    {
+      "id": "draft-objection",
+      "action": "type",
+      "ok": true,
+      "resolved_via": "ax_role+ax_name",
+      "durationMs": 63,
+      "screenshot_before": "receipts/discovery-objection-demo/03-draft-objection-before.png",
+      "screenshot_after": "receipts/discovery-objection-demo/03-draft-objection-after.png",
+      "notes": [
+        "would type: \"Draft an objection citing FRCP 26(b)(1) noting that request 7 is over-broad and unduly burdensome relative to the proportional needs of the case\""
+      ]
+    },
+    {
+      "id": "save-draft",
+      "action": "click",
+      "ok": true,
+      "resolved_via": "ax_role+ax_name",
+      "durationMs": 98,
+      "screenshot_before": "receipts/discovery-objection-demo/04-save-draft-before.png",
+      "screenshot_after": "receipts/discovery-objection-demo/04-save-draft-after.png"
+    }
+  ],
+  "ok": true
+}

receipts/meet-and-confer/receipt.json

@@ -0,0 +1,77 @@
+{
+  "skill_name": "draft-meet-and-confer-letter",
+  "url": "http://127.0.0.1:8787/",
+  "started_at": "2026-05-09T09:14:53.006Z",
+  "finished_at": "2026-05-09T09:14:54.532Z",
+  "total_ms": 1526,
+  "unbound_placeholders": [],
+  "steps": [
+    {
+      "id": "open-letter-template",
+      "action": "click",
+      "ok": true,
+      "resolved_via": "ax_role+ax_name",
+      "durationMs": 272,
+      "screenshot_before": "receipts/meet-and-confer-demo/01-open-letter-template-before.png",
+      "screenshot_after": "receipts/meet-and-confer-demo/01-open-letter-template-after.png"
+    },
+    {
+      "id": "fill-caption",
+      "action": "type",
+      "ok": true,
+      "resolved_via": "ax_role",
+      "durationMs": 71,
+      "screenshot_before": "receipts/meet-and-confer-demo/02-fill-caption-before.png",
+      "screenshot_after": "receipts/meet-and-confer-demo/02-fill-caption-after.png",
+      "notes": [
+        "would type: \"Insert the case caption Doe v. Acme Corp., No. 24-cv-123 into the letter header\""
+      ]
+    },
+    {
+      "id": "fill-recipient",
+      "action": "type",
+      "ok": true,
+      "resolved_via": "ax_role",
+      "durationMs": 65,
+      "screenshot_before": "receipts/meet-and-confer-demo/03-fill-recipient-before.png",
+      "screenshot_after": "receipts/meet-and-confer-demo/03-fill-recipient-after.png",
+      "notes": [
+        "would type: \"Address the letter to Jane Smith at jsmith@opposing.law\""
+      ]
+    },
+    {
+      "id": "summarize-dispute",
+      "action": "type",
+      "ok": true,
+      "resolved_via": "ax_role",
+      "durationMs": 77,
+      "screenshot_before": "receipts/meet-and-confer-demo/04-summarize-dispute-before.png",
+      "screenshot_after": "receipts/meet-and-confer-demo/04-summarize-dispute-after.png",
+      "notes": [
+        "would type: \"Type a one-paragraph statement of the discovery dispute citing Local Rule 37-1 and reference the specific request numbers in Defendant's responses to Requests 1-7 were uniformly evasive and non-responsive\""
+      ]
+    },
+    {
+      "id": "propose-dates",
+      "action": "type",
+      "ok": true,
+      "resolved_via": "ax_role",
+      "durationMs": 81,
+      "screenshot_before": "receipts/meet-and-confer-demo/05-propose-dates-before.png",
+      "screenshot_after": "receipts/meet-and-confer-demo/05-propose-dates-after.png",
+      "notes": [
+        "would type: \"Propose three meet-and-confer dates from May 14, May 16, May 19 in the closing paragraph and request a confirmation by reply\""
+      ]
+    },
+    {
+      "id": "save-and-route",
+      "action": "click",
+      "ok": true,
+      "resolved_via": "ax_role+ax_name",
+      "durationMs": 104,
+      "screenshot_before": "receipts/meet-and-confer-demo/06-save-and-route-before.png",
+      "screenshot_after": "receipts/meet-and-confer-demo/06-save-and-route-after.png"
+    }
+  ],
+  "ok": true
+}

samples/draft-discovery-objection.json

@@ -0,0 +1,68 @@
+{
+  "schemaVersion": "0.1",
+  "name": "draft-discovery-objection",
+  "intent": "Draft an objection to an over-broad discovery request citing FRCP 26(b)(1)",
+  "inputs": ["request_text", "case_caption", "request_num"],
+  "preconditions": [
+    "User has the discovery request text loaded",
+    "User has the case caption with court and case number"
+  ],
+  "steps": [
+    {
+      "id": "open-doc",
+      "instruction": "Click 'New Document' in the case management toolbar to start the objection",
+      "action": "click",
+      "target": {
+        "description": "New Document button in the case management toolbar",
+        "bbox": [120, 80, 240, 110],
+        "ax_role": "button",
+        "ax_name": "New Document"
+      },
+      "successCheck": "An empty document editor pane is visible and focused",
+      "fallback": "If the toolbar button is hidden, open File menu and select New Document"
+    },
+    {
+      "id": "type-caption",
+      "instruction": "Type the case caption {{CASE_CAPTION}} at the top of the document",
+      "action": "type",
+      "target": {
+        "description": "Document body — caption area at top of page 1",
+        "ax_role": "textbox",
+        "ax_name": "Document body"
+      },
+      "successCheck": "The caption {{CASE_CAPTION}} is rendered at top of document",
+      "fallback": "Use the firm's saved caption template if one exists for this court"
+    },
+    {
+      "id": "draft-objection",
+      "instruction": "Draft an objection citing FRCP 26(b)(1) noting that request {{REQUEST_NUM}} is over-broad and unduly burdensome relative to the proportional needs of the case",
+      "action": "type",
+      "target": {
+        "description": "Document body — objection paragraph area",
+        "bbox": [40, 280, 760, 600],
+        "ax_role": "textbox",
+        "ax_name": "Document body"
+      },
+      "successCheck": "Objection paragraph references FRCP 26(b)(1) and request number {{REQUEST_NUM}}"
+    },
+    {
+      "id": "save-draft",
+      "instruction": "Save the draft objection to the case folder for attorney review",
+      "action": "click",
+      "target": {
+        "description": "Save button in the document toolbar",
+        "bbox": [620, 80, 700, 110],
+        "ax_role": "button",
+        "ax_name": "Save"
+      },
+      "successCheck": "Document is saved with a timestamp and appears in the case folder",
+      "fallback": "Use Cmd+S keyboard shortcut if the Save button is unresponsive"
+    }
+  ],
+  "meta": {
+    "domain": "paralegal",
+    "redacted": true,
+    "placeholders": ["{{CASE_CAPTION}}", "{{REQUEST_NUM}}"]
+  },
+  "extensions": {}
+}

samples/draft-meet-and-confer-letter.json

@@ -0,0 +1,98 @@
+{
+  "schemaVersion": "0.1",
+  "name": "draft-meet-and-confer-letter",
+  "intent": "Draft a Local Rule 37-1 meet-and-confer letter to opposing counsel proposing dates to resolve a discovery dispute before motion practice",
+  "inputs": ["case_caption", "opposing_counsel_name", "opposing_counsel_email", "dispute_summary", "proposed_dates"],
+  "preconditions": [
+    "User has the case caption with court and case number",
+    "User has identified opposing counsel for the disputed request",
+    "User has a one-paragraph summary of the dispute (which requests, the asserted deficiency)"
+  ],
+  "steps": [
+    {
+      "id": "open-letter-template",
+      "instruction": "Open the firm's meet-and-confer letter template from the templates pane",
+      "action": "click",
+      "target": {
+        "description": "Templates pane — Meet-and-Confer Letter entry",
+        "bbox": [60, 240, 280, 268],
+        "ax_role": "menuitem",
+        "ax_name": "Meet-and-Confer Letter"
+      },
+      "successCheck": "Letter template opens with a header block ready for caption insertion",
+      "fallback": "If the template pane is collapsed, expand the Templates sidebar from the View menu"
+    },
+    {
+      "id": "fill-caption",
+      "instruction": "Insert the case caption {{CASE_CAPTION}} into the letter header",
+      "action": "type",
+      "target": {
+        "description": "Letter header — caption insertion zone above the salutation",
+        "ax_role": "textbox",
+        "ax_name": "Letter header"
+      },
+      "successCheck": "Caption {{CASE_CAPTION}} appears in the header on page 1",
+      "fallback": "If autocomplete suggests an outdated caption, override by clicking 'Use as typed'"
+    },
+    {
+      "id": "fill-recipient",
+      "instruction": "Address the letter to {{OPPOSING_COUNSEL_NAME}} at {{OPPOSING_COUNSEL_EMAIL}}",
+      "action": "type",
+      "target": {
+        "description": "Recipient block — Counsel Name and Counsel Email fields",
+        "ax_role": "textbox",
+        "ax_name": "Recipient block"
+      },
+      "successCheck": "Recipient block shows {{OPPOSING_COUNSEL_NAME}} on the name line and {{OPPOSING_COUNSEL_EMAIL}} on the email line"
+    },
+    {
+      "id": "summarize-dispute",
+      "instruction": "Type a one-paragraph statement of the discovery dispute citing Local Rule 37-1 and reference the specific request numbers in {{DISPUTE_SUMMARY}}",
+      "action": "type",
+      "target": {
+        "description": "Letter body — first paragraph after the salutation",
+        "bbox": [80, 360, 720, 520],
+        "ax_role": "textbox",
+        "ax_name": "Letter body"
+      },
+      "successCheck": "Letter body paragraph references Local Rule 37-1 and the dispute summary text {{DISPUTE_SUMMARY}}",
+      "fallback": "If the firm uses a different local rule (e.g. Local Rule 26-7), substitute that citation per the case's venue"
+    },
+    {
+      "id": "propose-dates",
+      "instruction": "Propose three meet-and-confer dates from {{PROPOSED_DATES}} in the closing paragraph and request a confirmation by reply",
+      "action": "type",
+      "target": {
+        "description": "Letter body — closing paragraph above the signature block",
+        "ax_role": "textbox",
+        "ax_name": "Letter body"
+      },
+      "successCheck": "Closing paragraph lists three distinct dates from {{PROPOSED_DATES}} and asks for confirmation"
+    },
+    {
+      "id": "save-and-route",
+      "instruction": "Save the draft to the case folder and route it to the supervising attorney for review before sending",
+      "action": "click",
+      "target": {
+        "description": "Save and Route button in the document toolbar",
+        "bbox": [620, 80, 760, 110],
+        "ax_role": "button",
+        "ax_name": "Save and Route"
+      },
+      "successCheck": "Document is saved with a timestamp and the supervising attorney is added to the routing queue",
+      "fallback": "If Save and Route is unavailable, save with Cmd+S then add the attorney from the routing dropdown"
+    }
+  ],
+  "meta": {
+    "domain": "paralegal",
+    "redacted": true,
+    "placeholders": [
+      "{{CASE_CAPTION}}",
+      "{{OPPOSING_COUNSEL_NAME}}",
+      "{{OPPOSING_COUNSEL_EMAIL}}",
+      "{{DISPUTE_SUMMARY}}",
+      "{{PROPOSED_DATES}}"
+    ]
+  },
+  "extensions": {}
+}

src/lib/exporter.ts

@@ -0,0 +1,95 @@
+// Vendored from packages/exporter/src/exporter.ts.
+// Sole change: import Skill/Step from local ./skill.ts.
+
+import { stringify as yamlStringify } from "yaml";
+import type { Skill, Step } from "./skill.ts";
+
+export interface SkillBundle {
+  skill_md: string;
+  manifest_json: string;
+  actions_toon: string;
+}
+
+export const TOON_HEADER_ACTIONS = "@meeseeks/v0.1 actions";
+
+export function exportSkill(skill: Skill): SkillBundle {
+  return {
+    skill_md: renderSkillMd(skill),
+    manifest_json: renderManifestJson(skill),
+    actions_toon: renderActionsToon(skill),
+  };
+}
+
+function renderSkillMd(s: Skill): string {
+  const params = s.inputs.map((i) => `  - name: ${i}\n    required: true`).join("\n");
+  const preconds = s.preconditions.map((p) => `- ${p}`).join("\n");
+  const steps = s.steps.map((st, i) => `${i + 1}. ${st.instruction}`).join("\n");
+  const verify = s.steps.map((st) => `- ${st.successCheck}`).join("\n");
+  return [
+    "---",
+    `name: ${s.name}`,
+    `description: ${s.intent}`,
+    `domain: ${s.meta.domain}`,
+    `version: ${s.schemaVersion}`,
+    "parameters:",
+    params,
+    "---",
+    "",
+    "# When to use",
+    s.intent,
+    "",
+    "# Preconditions",
+    preconds,
+    "",
+    "# Steps",
+    steps,
+    "",
+    "# Verification",
+    verify,
+    "",
+  ].join("\n");
+}
+
+function renderManifestJson(s: Skill): string {
+  const grounding = s.steps.map((st) => ({
+    step_id: st.id,
+    description: st.target.description,
+    bbox: st.target.bbox ?? null,
+    ax_role: st.target.ax_role ?? null,
+    ax_name: st.target.ax_name ?? null,
+    success_check: st.successCheck,
+    fallback: st.fallback ?? null,
+  }));
+  const manifest = {
+    schema: "meeseeks/v0.1",
+    name: s.name,
+    description: s.intent,
+    domain: s.meta.domain,
+    parameters: s.inputs,
+    preconditions: s.preconditions,
+    redacted: s.meta.redacted,
+    placeholders: s.meta.placeholders,
+    meeseeks: { grounding },
+    extensions: s.extensions ?? {},
+  };
+  return JSON.stringify(manifest, null, 2);
+}
+
+function renderActionsToon(s: Skill): string {
+  const body = {
+    name: s.name,
+    intent: s.intent,
+    schema_version: s.schemaVersion,
+    steps: s.steps.map((st) => stepToToon(st)),
+  };
+  return TOON_HEADER_ACTIONS + "\n" + yamlStringify(body);
+}
+
+function stepToToon(st: Step) {
+  return {
+    id: st.id,
+    action: st.action,
+    instruction: st.instruction,
+    target_description: st.target.description,
+  };
+}

src/lib/plan.ts

@@ -0,0 +1,85 @@
+// Vendored from packages/runtime/src/plan.ts.
+// Sole change: import Skill/Action from local ./skill.ts instead of @meeseeks/schema.
+
+import type { Action, Skill } from "./skill.ts";
+import { findPlaceholders, substitute, substituteWithReport } from "./substitute.ts";
+
+export interface StepPlan {
+  id: string;
+  action: Action;
+  instruction: string;
+  target: {
+    description: string;
+    bbox?: [number, number, number, number];
+    ax_role?: string;
+    ax_name?: string;
+  };
+  successCheck: string;
+  fallback?: string;
+}
+
+export interface ExecutionPlan {
+  skill_name: string;
+  intent: string;
+  domain: string;
+  inputs: Record<string, string>;
+  steps: StepPlan[];
+  unbound_placeholders: string[];
+}
+
+export function planSkill(
+  skill: Skill,
+  inputs: Record<string, string> = {},
+): ExecutionPlan {
+  const unbound = new Set<string>();
+  const collect = (s: string) => {
+    for (const ph of findPlaceholders(s)) {
+      const key = ph.slice(2, -2);
+      if (inputs[key] === undefined && inputs[key.toLowerCase()] === undefined) {
+        unbound.add(ph);
+      }
+    }
+  };
+
+  for (const ph of skill.meta.placeholders) {
+    const key = ph.slice(2, -2);
+    if (inputs[key] === undefined && inputs[key.toLowerCase()] === undefined) {
+      unbound.add(ph);
+    }
+  }
+
+  const steps: StepPlan[] = skill.steps.map((s) => {
+    collect(s.instruction);
+    collect(s.target.description);
+    collect(s.successCheck);
+    if (s.fallback) collect(s.fallback);
+
+    const target: StepPlan["target"] = {
+      description: substitute(s.target.description, inputs),
+    };
+    if (s.target.bbox) target.bbox = s.target.bbox;
+    if (s.target.ax_role) target.ax_role = s.target.ax_role;
+    if (s.target.ax_name) target.ax_name = s.target.ax_name;
+
+    const step: StepPlan = {
+      id: s.id,
+      action: s.action,
+      instruction: substitute(s.instruction, inputs),
+      target,
+      successCheck: substitute(s.successCheck, inputs),
+    };
+    if (s.fallback) step.fallback = substitute(s.fallback, inputs);
+    return step;
+  });
+
+  return {
+    skill_name: skill.name,
+    intent: substitute(skill.intent, inputs),
+    domain: skill.meta.domain,
+    inputs,
+    steps,
+    unbound_placeholders: [...unbound].sort(),
+  };
+}
+
+export { substitute, substituteWithReport, findPlaceholders };

src/lib/skill.ts

@@ -0,0 +1,49 @@
+// Sarah-JSON authoring schema for Meeseeks skills.
+// Frozen at "SkillCore + extensions envelope" (plan v3 § 15.3 C1).
+// This is the canonical authoring shape; the export bundle (SKILL.md +
+// manifest.json + actions.toon) is derived from it.
+
+import { z } from "zod";
+
+export const SKILL_NAME_PATTERN = /^[a-z][a-z0-9-]*$/;
+
+export const ACTIONS = ["click", "type", "read", "wait", "verify"] as const;
+export type Action = (typeof ACTIONS)[number];
+
+export const SkillTarget = z.object({
+  description: z.string().min(1),
+  bbox: z.tuple([z.number(), z.number(), z.number(), z.number()]).optional(),
+  ax_role: z.string().optional(),
+  ax_name: z.string().optional(),
+});
+
+export const SkillStep = z.object({
+  id: z.string().min(1),
+  instruction: z.string().min(1),
+  action: z.enum(ACTIONS),
+  target: SkillTarget,
+  successCheck: z.string().min(1),
+  fallback: z.string().optional(),
+});
+
+export const SkillMeta = z.object({
+  domain: z.string().min(1),
+  redacted: z.literal(true),
+  placeholders: z.array(z.string()),
+});
+
+export const SkillCore = z.object({
+  schemaVersion: z.literal("0.1"),
+  name: z.string().regex(SKILL_NAME_PATTERN),
+  intent: z.string().min(1),
+  inputs: z.array(z.string()),
+  preconditions: z.array(z.string()),
+  steps: z.array(SkillStep).min(1),
+  meta: SkillMeta,
+  extensions: z.record(z.string(), z.unknown()).default({}),
+});
+
+export type Skill = z.infer<typeof SkillCore>;
+export type Step = z.infer<typeof SkillStep>;
+export type Target = z.infer<typeof SkillTarget>;
+export type Meta = z.infer<typeof SkillMeta>;

src/lib/substitute.ts

@@ -0,0 +1,50 @@
+// Placeholder substitution for skill text.
+// Convention: placeholders look like {{KEY}} (uppercase + underscores).
+// Inputs may be passed as either {KEY: value} or {key: value} — both resolve.
+
+export interface SubstituteResult {
+  text: string;
+  bound: string[];
+  unbound: string[];
+}
+
+const PLACEHOLDER_RE = /\{\{([A-Z][A-Z0-9_]*)\}\}/g;
+
+export function substitute(text: string, inputs: Record<string, string>): string {
+  return text.replace(PLACEHOLDER_RE, (match, key: string) => {
+    if (inputs[key] !== undefined) return inputs[key];
+    const lc = key.toLowerCase();
+    if (inputs[lc] !== undefined) return inputs[lc];
+    return match;
+  });
+}
+
+export function substituteWithReport(
+  text: string,
+  inputs: Record<string, string>,
+): SubstituteResult {
+  const bound = new Set<string>();
+  const unbound = new Set<string>();
+  const out = text.replace(PLACEHOLDER_RE, (match, key: string) => {
+    if (inputs[key] !== undefined) {
+      bound.add(`{{${key}}}`);
+      return inputs[key];
+    }
+    const lc = key.toLowerCase();
+    if (inputs[lc] !== undefined) {
+      bound.add(`{{${key}}}`);
+      return inputs[lc];
+    }
+    unbound.add(`{{${key}}}`);
+    return match;
+  });
+  return { text: out, bound: [...bound], unbound: [...unbound] };
+}
+
+export function findPlaceholders(text: string): string[] {
+  const found = new Set<string>();
+  for (const m of text.matchAll(PLACEHOLDER_RE)) {
+    found.add(`{{${m[1]}}}`);
+  }
+  return [...found];
+}

src/server.ts

@@ -0,0 +1,191 @@
+// Meeseeks HF Space — Bun.serve HTTP server.
+// Routes:
+//   GET  /                          → static index.html
+//   GET  /static/<file>             → static assets (css/js/images)
+//   GET  /samples                   → list sample skill names
+//   GET  /samples/<name>.json       → sample skill JSON
+//   POST /api/plan                  → {skill, inputs} → ExecutionPlan
+//   POST /api/export                → {skill} → SkillBundle
+//   POST /api/validate              → {skill} → {ok, issues}
+//   GET  /receipts/<demo>/          → list receipt files
+//   GET  /receipts/<demo>/<file>    → receipt assets
+//
+// HF Spaces convention: bind to port 7860.
+
+import { readdir } from "node:fs/promises";
+import { extname, join, normalize, resolve } from "node:path";
+import { SkillCore } from "./lib/skill.ts";
+import { planSkill } from "./lib/plan.ts";
+import { exportSkill } from "./lib/exporter.ts";
+
+const PORT = Number(process.env.PORT ?? 7860);
+const ROOT = resolve(import.meta.dir, "..");
+const STATIC_DIR = join(ROOT, "src/static");
+const SAMPLES_DIR = join(ROOT, "samples");
+const RECEIPTS_DIR = join(ROOT, "receipts");
+
+const MIME: Record<string, string> = {
+  ".html": "text/html; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".js": "application/javascript; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".png": "image/png",
+  ".svg": "image/svg+xml",
+  ".webp": "image/webp",
+  ".ico": "image/x-icon",
+};
+
+function mimeFor(path: string): string {
+  return MIME[extname(path).toLowerCase()] ?? "application/octet-stream";
+}
+
+function safeJoin(base: string, rel: string): string | null {
+  const target = normalize(join(base, rel));
+  if (!target.startsWith(base)) return null;
+  return target;
+}
+
+async function serveFile(absPath: string): Promise<Response> {
+  const file = Bun.file(absPath);
+  if (!(await file.exists())) {
+    return new Response("not found", { status: 404 });
+  }
+  return new Response(file, { headers: { "Content-Type": mimeFor(absPath) } });
+}
+
+async function readJsonBody(req: Request): Promise<any> {
+  const text = await req.text();
+  if (!text) return {};
+  try {
+    return JSON.parse(text);
+  } catch (e) {
+    throw new Response(JSON.stringify({ error: "invalid JSON body", detail: (e as Error).message }), {
+      status: 400,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+}
+
+function jsonResponse(data: unknown, init: ResponseInit = {}): Response {
+  return new Response(JSON.stringify(data, null, 2), {
+    ...init,
+    headers: { "Content-Type": "application/json", ...(init.headers ?? {}) },
+  });
+}
+
+async function listSamples(): Promise<{ name: string; bytes: number }[]> {
+  try {
+    const entries = await readdir(SAMPLES_DIR);
+    const out: { name: string; bytes: number }[] = [];
+    for (const e of entries.filter((x) => x.endsWith(".json")).sort()) {
+      const file = Bun.file(join(SAMPLES_DIR, e));
+      out.push({ name: e.replace(/\.json$/, ""), bytes: file.size });
+    }
+    return out;
+  } catch {
+    return [];
+  }
+}
+
+async function listReceiptFiles(demo: string): Promise<string[]> {
+  const dir = safeJoin(RECEIPTS_DIR, demo);
+  if (!dir) return [];
+  try {
+    const entries = await readdir(dir);
+    return entries.sort();
+  } catch {
+    return [];
+  }
+}
+
+const server = Bun.serve({
+  port: PORT,
+  hostname: "0.0.0.0",
+  async fetch(req) {
+    const url = new URL(req.url);
+    const path = url.pathname;
+    const method = req.method;
+
+    try {
+      if (method === "GET" && (path === "/" || path === "/index.html")) {
+        return serveFile(join(STATIC_DIR, "index.html"));
+      }
+
+      if (method === "GET" && path.startsWith("/static/")) {
+        const rel = path.slice("/static/".length);
+        const abs = safeJoin(STATIC_DIR, rel);
+        if (!abs) return new Response("forbidden", { status: 403 });
+        return serveFile(abs);
+      }
+
+      if (method === "GET" && path === "/samples") {
+        return jsonResponse(await listSamples());
+      }
+      if (method === "GET" && path.startsWith("/samples/")) {
+        const rel = path.slice("/samples/".length);
+        const abs = safeJoin(SAMPLES_DIR, rel);
+        if (!abs) return new Response("forbidden", { status: 403 });
+        return serveFile(abs);
+      }
+
+      if (method === "GET" && path === "/receipts") {
+        try {
+          const dirs = (await readdir(RECEIPTS_DIR)).sort();
+          const out: { name: string; files: string[] }[] = [];
+          for (const d of dirs) out.push({ name: d, files: await listReceiptFiles(d) });
+          return jsonResponse(out);
+        } catch {
+          return jsonResponse([]);
+        }
+      }
+      if (method === "GET" && path.startsWith("/receipts/")) {
+        const rel = path.slice("/receipts/".length);
+        const abs = safeJoin(RECEIPTS_DIR, rel);
+        if (!abs) return new Response("forbidden", { status: 403 });
+        return serveFile(abs);
+      }
+
+      if (method === "POST" && path === "/api/validate") {
+        const body = await readJsonBody(req);
+        const result = SkillCore.safeParse(body.skill ?? body);
+        if (result.success) {
+          return jsonResponse({
+            ok: true,
+            name: result.data.name,
+            steps: result.data.steps.length,
+            placeholders: result.data.meta.placeholders,
+          });
+        }
+        return jsonResponse(
+          { ok: false, issues: result.error.issues.slice(0, 20) },
+          { status: 400 },
+        );
+      }
+
+      if (method === "POST" && path === "/api/plan") {
+        const body = await readJsonBody(req);
+        const skill = SkillCore.parse(body.skill ?? body);
+        const inputs = (body.inputs ?? {}) as Record<string, string>;
+        return jsonResponse(planSkill(skill, inputs));
+      }
+
+      if (method === "POST" && path === "/api/export") {
+        const body = await readJsonBody(req);
+        const skill = SkillCore.parse(body.skill ?? body);
+        return jsonResponse(exportSkill(skill));
+      }
+
+      if (method === "GET" && path === "/api/health") {
+        return jsonResponse({ ok: true, port: PORT });
+      }
+
+      return new Response("not found", { status: 404 });
+    } catch (e) {
+      if (e instanceof Response) return e;
+      const msg = (e as Error).message ?? "unknown";
+      return jsonResponse({ error: msg.slice(0, 600) }, { status: 500 });
+    }
+  },
+});
+
+console.log(`meeseeks hf-space listening at http://${server.hostname}:${server.port}/`);

src/static/index.html

@@ -0,0 +1,530 @@
+<!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>

tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM"],
+    "types": ["bun-types"],
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "allowImportingTsExtensions": true
+  },
+  "include": ["src/**/*"]
+}