@abuswami1996/agent-md 0.1.4 → 0.1.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.1.6
+
+- Added `agent-md convert --file_name <file.agent.md> --html` for writing static HTML files.
+- Embedded resolved Agent Markdown documents and self-contained viewer assets in generated HTML.
+- Added CLI integration coverage and README guidance for static HTML conversion.
+
+## 0.1.5
+
+- Added controlled local artifact preview support to the bundled browser viewer.
+- Added content types for text, JSON, CSV, images, PDFs, and videos served through the local artifact endpoint.
+- Bundled the updated Agent Markdown Preview extension for richer embed cards and theme-visible chart colors.
+
 ## 0.1.4
 
 - Added release workflow support for npm trusted publishing with provenance.

package/dist/index.js

@@ -329,6 +329,7 @@ Rules:
 - Prefer named data blocks or local files.
 - Add frontmatter with format: agent-md and version: 0.1.
 - Run agent-md validate before considering a document complete.
+- When the user wants a shareable rendered artifact, run agent-md convert --file_name <file.agent.md> --html after validation.
 
 Supporting files in this skill directory:
 - agent-md.config.json: default runtime configuration.
@@ -343,6 +344,11 @@ Supported MVP primitives:
 - ::callout for notes, warnings, decisions, risks, and tips.
 - ::tabs for grouped alternative views.
 - ::diagram, ::timeline, ::query, ::embed, ::form, ::map, and ::component are supported with conservative validation and graceful fallbacks.
+
+Useful commands:
+- agent-md validate --file <file.agent.md>
+- agent-md convert --file_name <file.agent.md> --html
+- agent-md convert --file_name <file.agent.md> --html --output <output.html>
 `;
 var exampleAgentMarkdown = `---
 format: agent-md
@@ -627,7 +633,7 @@ function columnType(source, column) {
 // src/index.ts
 var program = new Command();
 var cliDir = path2.dirname(fileURLToPath(import.meta.url));
-var cliVersion = "0.1.2";
+var cliVersion = "0.1.6";
 var extensionId = "AbhinavSwaminathan.agent-md-preview";
 var viewerDistCandidates = [
   path2.resolve(cliDir, "../viewer-dist"),
@@ -703,6 +709,24 @@ program.command("export").argument("file").option("--format <format>", "html | j
   else if (options.format === "markdown-fallback") console.log(renderFallback(document));
   else console.log(renderStaticHtml(document));
 });
+program.command("convert").description("Convert an Agent Markdown document to another format").option("--file_name <file>", "Agent Markdown file to convert").option("--file-name <file>", "Agent Markdown file to convert").option("--html", "write a static HTML file").option("--output <file>", "output file path").option("--root <root>", "project root", ".").option("--config <config>", "config path", "agent-md.config.json").action(async (options, command) => {
+  const root = path2.resolve(options.root);
+  const file = options.file_name ?? options.fileName;
+  if (!file) command.error("error: required option '--file_name <file>' not specified");
+  if (!options.html) command.error("error: convert currently requires '--html'");
+  if (path2.extname(file) !== ".md" || !file.endsWith(".agent.md")) command.error("error: --file_name must point to a .agent.md file");
+  const config = await loadConfig(root, options.config);
+  const inputFile = path2.resolve(root, file);
+  const document = await parseAndResolve(inputFile, root, config);
+  const source = await fs2.readFile(document.sourcePath, "utf8");
+  const outputFile = path2.resolve(root, options.output ?? defaultHtmlOutputPath(file));
+  const html = await buildStaticHtml(document, source);
+  await fs2.mkdir(path2.dirname(outputFile), { recursive: true });
+  await fs2.writeFile(outputFile, html);
+  console.log(pc.green(`Wrote ${path2.relative(root, outputFile)}`));
+  printDiagnostics([document]);
+  process.exitCode = document.diagnostics.some((diagnostic) => diagnostic.severity === "error") ? 1 : 0;
+});
 program.command("vscode-extension").description("Print or run local VSCode/Cursor extension install instructions").option("--editor <editor>", "editor CLI to use: cursor or code", "cursor").option("--install", "install the bundled VSIX with the editor CLI").option("--force", "force reinstall when using --install", true).action(async (options) => {
   const vsix = await findVsix();
   if (!vsix) {
@@ -932,6 +956,65 @@ async function findViewerDistDir() {
   }
   return void 0;
 }
+function defaultHtmlOutputPath(file) {
+  if (file.endsWith(".agent.md")) return `${file.slice(0, -".agent.md".length)}.html`;
+  return `${file.slice(0, -path2.extname(file).length)}.html`;
+}
+async function buildStaticHtml(document, source) {
+  const viewerDistDir = await findViewerDistDir();
+  const payload = { document, source };
+  if (!viewerDistDir) return renderStaticHtml(document, source);
+  const indexPath = path2.join(viewerDistDir, "index.html");
+  let html = await fs2.readFile(indexPath, "utf8");
+  html = stripModulePreloadLinks(html);
+  html = await inlineCssAssets(html, viewerDistDir);
+  html = await inlineScriptAssets(html, viewerDistDir);
+  return html.replace("</head>", `${staticPayloadScript(payload)}</head>`);
+}
+function stripModulePreloadLinks(html) {
+  return html.replace(/<link\b[^>]*\brel="modulepreload"[^>]*>/g, "");
+}
+async function inlineCssAssets(html, viewerDistDir) {
+  const cssLinkPattern = /<link\b([^>]*?)href="([^"]+\.css)"([^>]*)>/g;
+  return replaceAsync(html, cssLinkPattern, async (_match, before, href, after) => {
+    const css = await readViewerAsset(viewerDistDir, href);
+    return `<style data-agent-md-asset="${escapeHtmlAttribute(href)}"${before.includes("media=") || after.includes("media=") ? `${before}${after}`.match(/\smedia="[^"]+"/)?.[0] ?? "" : ""}>
+${css}
+</style>`;
+  });
+}
+async function inlineScriptAssets(html, viewerDistDir) {
+  const scriptPattern = /<script\b([^>]*?)src="([^"]+\.js)"([^>]*)><\/script>/g;
+  return replaceAsync(html, scriptPattern, async (_match, before, src, after) => {
+    const js = await readViewerAsset(viewerDistDir, src);
+    const isModule = `${before}${after}`.includes('type="module"');
+    const dataUrl = `data:text/javascript;base64,${Buffer.from(js).toString("base64")}`;
+    return `<script${isModule ? ' type="module"' : ""} data-agent-md-asset="${escapeHtmlAttribute(src)}" src="${dataUrl}"></script>`;
+  });
+}
+async function readViewerAsset(viewerDistDir, assetPath) {
+  const relative = decodeURIComponent(assetPath.replace(/^\/+/, ""));
+  const absolute = path2.resolve(viewerDistDir, relative);
+  const insideViewer = !path2.relative(viewerDistDir, absolute).startsWith("..") && !path2.isAbsolute(path2.relative(viewerDistDir, absolute));
+  if (!insideViewer) throw new Error(`Viewer asset escapes dist directory: ${assetPath}`);
+  return fs2.readFile(absolute, "utf8");
+}
+async function replaceAsync(source, pattern, replacer) {
+  const matches = [...source.matchAll(pattern)];
+  const replacements = await Promise.all(matches.map((match) => replacer(...match.map((value) => value ?? ""))));
+  let result = source;
+  for (let index = matches.length - 1; index >= 0; index--) {
+    const match = matches[index];
+    result = `${result.slice(0, match.index)}${replacements[index]}${result.slice((match.index ?? 0) + match[0].length)}`;
+  }
+  return result;
+}
+function staticPayloadScript(payload) {
+  return `<script>window.__AGENT_MD_STATIC__=${jsonForScript(payload)};</script>`;
+}
+function jsonForScript(value) {
+  return JSON.stringify(value).replace(/[<>&\u2028\u2029]/g, (char) => `\\u${char.charCodeAt(0).toString(16).padStart(4, "0")}`);
+}
 function contentType(file) {
   const ext = path2.extname(file);
   if (ext === ".html") return "text/html; charset=utf8";
@@ -939,17 +1022,42 @@ function contentType(file) {
   if (ext === ".css") return "text/css; charset=utf8";
   if (ext === ".svg") return "image/svg+xml";
   if (ext === ".json") return "application/json";
+  if (ext === ".md" || ext === ".mmd" || ext === ".mermaid" || ext === ".txt") return "text/plain; charset=utf8";
+  if (ext === ".csv") return "text/csv; charset=utf8";
+  if (ext === ".tsv") return "text/tab-separated-values; charset=utf8";
+  if (ext === ".png") return "image/png";
+  if (ext === ".jpg" || ext === ".jpeg") return "image/jpeg";
+  if (ext === ".gif") return "image/gif";
+  if (ext === ".pdf") return "application/pdf";
+  if (ext === ".mp4") return "video/mp4";
+  if (ext === ".webm") return "video/webm";
   return "application/octet-stream";
 }
 function renderFallback(document) {
   return document.nodes.map((node) => node.type === "markdown" ? node.value : `[${node.type}]`).join("\n\n");
 }
-function renderStaticHtml(document) {
-  return `<!doctype html><meta charset="utf8"><title>Agent Markdown</title><pre>${escapeHtml(JSON.stringify(document, null, 2))}</pre>`;
+function renderStaticHtml(document, source) {
+  return `<!doctype html>
+<html><head><meta charset="utf8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Agent Markdown</title>
+${staticPayloadScript({ document, source: source ?? "" })}
+<style>:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#0f172a;background:#f8fafc}body{margin:0;padding:24px}.agent-md-card{border:1px solid #e2e8f0;border-radius:10px;background:white;padding:16px;margin:12px 0}pre{white-space:pre-wrap;background:#0f172a;color:#e2e8f0;padding:16px;border-radius:10px;overflow:auto}table{border-collapse:collapse;width:100%}th,td{border:1px solid #e2e8f0;padding:8px;text-align:left}th{background:#f1f5f9}</style></head>
+<body><main><h1>Agent Markdown</h1>${document.nodes.map(renderStaticNode).join("\n")}</main></body></html>`;
 }
 function escapeHtml(value) {
   return value.replace(/[&<>"]/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[char]);
 }
+function escapeHtmlAttribute(value) {
+  return escapeHtml(value);
+}
+function renderStaticNode(node) {
+  if (node.type === "markdown") return `<section>${escapeHtml(node.value).replace(/\n/g, "<br>")}</section>`;
+  if (node.type === "metric") return `<section class="agent-md-card"><strong>${escapeHtml(node.label)}</strong><h2>${escapeHtml(String(node.value ?? ""))}</h2></section>`;
+  if (node.type === "table" || node.type === "query") return `<section class="agent-md-card"><strong>${escapeHtml(node.type)}</strong><pre>${escapeHtml(JSON.stringify(node, null, 2))}</pre></section>`;
+  if (node.type === "callout") return `<section class="agent-md-card"><strong>${escapeHtml(node.title ?? node.calloutType)}</strong><p>${escapeHtml(node.body ?? "")}</p></section>`;
+  if (node.type === "tabs") return `<section class="agent-md-card"><strong>Tabs</strong>${node.tabs.map((tab) => `<h3>${escapeHtml(tab.label)}</h3>${tab.children.map(renderStaticNode).join("")}`).join("")}</section>`;
+  if (node.type === "error") return `<section class="agent-md-card"><strong>${escapeHtml(node.message)}</strong></section>`;
+  return `<section class="agent-md-card"><strong>${escapeHtml(node.type)}</strong><pre>${escapeHtml(JSON.stringify(node, null, 2))}</pre></section>`;
+}
 async function openBrowser(url) {
   await import("child_process").then(({ execFile }) => execFile(process.platform === "darwin" ? "open" : "xdg-open", [url]));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abuswami1996/agent-md",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Local-first Agent Markdown runtime, validator, browser viewer, and agent skill installer.",
   "license": "MIT",
   "author": "Abhinav Swaminathan",

package/viewer-dist/assets/index-B7MTTuRJ.css

@@ -0,0 +1 @@
+:root{--background:#f8fafc;--card:#fff;--muted:#f1f5f9;--muted-foreground:#64748b;--foreground:#0f172a;--border:#e2e8f0;--primary:#2563eb;--danger:#dc2626;--warning:#d97706;--agent-md-chart-1:#2563eb;--agent-md-chart-2:#16a34a;--agent-md-chart-3:#f59e0b;color:var(--foreground);background:var(--background);font-family:Inter,ui-sans-serif,system-ui,sans-serif}body{margin:0}.app-frame{background:var(--background);min-height:100vh;padding:16px}.browser-shell{border:1px solid var(--border);background:var(--card);border-radius:10px;min-height:min(75vh,680px);display:flex;overflow:hidden}.browser-shell.static-shell{min-height:auto}.file-sidebar{border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);background:var(--card);width:100%}.sidebar-strip{background:color-mix(in srgb,var(--muted) 40%,transparent);border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);color:var(--muted-foreground);padding:9px 12px;font-size:12px;font-weight:500}.file-tree{overscroll-behavior:contain;max-height:min(40vh,320px);overflow:auto}.folder-group{border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent)}.folder-group:last-child{border-bottom:0}.folder-row{background:color-mix(in srgb,var(--muted) 25%,transparent);align-items:flex-start;gap:8px;padding:8px 12px;display:flex}.folder-name{letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground);font-size:11px;font-weight:700}.folder-count{color:color-mix(in srgb,var(--muted-foreground) 80%,transparent);font-size:10px}ul{margin:0;padding:4px 0;list-style:none}.file-row{text-align:left;width:100%;color:var(--muted-foreground);cursor:pointer;background:0 0;border:0;align-items:flex-start;gap:8px;padding:7px 12px;font-size:12px;line-height:1.25;transition:background-color .12s,color .12s;display:flex}.file-row span:nth-child(2){overflow-wrap:anywhere;min-width:0}.file-row:hover{background:color-mix(in srgb,var(--muted) 80%,transparent);color:var(--foreground)}.file-row.active{background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--foreground);font-weight:500}.tree-icon{flex:none;width:14px;height:14px}.folder-icon{color:var(--muted-foreground)}.file-icon{opacity:.7;margin-top:2px}.status{border-radius:999px;flex:none;width:7px;height:7px;margin-top:4px;margin-left:auto}.ok-dot{background:#16a34a}.warning-dot{background:var(--warning)}.error-dot{background:var(--danger)}.preview-pane{flex-direction:column;flex:1;min-width:0;display:flex;overflow:auto}.preview-header{border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);background:var(--card);justify-content:space-between;align-items:flex-start;gap:16px;padding:14px 16px;display:flex}.preview-header h3{overflow-wrap:anywhere;margin:0;font-size:13px;font-weight:600;line-height:1.35}.preview-header p{color:var(--muted-foreground);margin:3px 0 0;font-size:11px}.mode-button{border:1px solid var(--border);background:var(--card);color:var(--muted-foreground);cursor:pointer;border-radius:6px;padding:5px 8px;font-size:11px}.mode-button:hover{background:var(--muted);color:var(--foreground)}.preview-body{min-width:0;padding:16px;overflow:auto}.diagnostics-panel{border-top:1px solid color-mix(in srgb,var(--border) 60%,transparent);background:color-mix(in srgb,var(--muted) 30%,transparent);padding:8px 12px}.diagnostics-panel p{color:var(--muted-foreground);margin:4px 0;font-size:11px}.empty-state{color:var(--muted-foreground);font-size:13px}.agent-md-document{font-size:13px;line-height:1.55}.agent-md-document h1{margin:0 0 14px;font-size:24px}.agent-md-document h2{margin:18px 0 10px;font-size:18px}.agent-md-document h3{margin:0 0 10px;font-size:13px}.agent-md-card{border:1px solid color-mix(in srgb,var(--border) 75%,transparent);background:var(--card);box-shadow:none;border-radius:8px;margin:10px 0;padding:12px}.agent-md-embed-header{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.agent-md-embed-header h3{margin-bottom:2px}.agent-md-embed-header small,.agent-md-embed-caption,.agent-md-embed-loading{color:var(--muted-foreground);font-size:11px}.agent-md-embed-header a{color:var(--primary);font-size:12px;text-decoration:none}.agent-md-embed-header a:hover{text-decoration:underline}.agent-md-embed-image,.agent-md-embed-media{border:1px solid var(--border);border-radius:8px;max-width:100%;display:block}.agent-md-embed-markdown{border-top:1px solid var(--border);margin-top:10px;padding-top:10px}.agent-md-embed-text{max-height:360px}.agent-md-metric strong{margin-top:6px;font-size:22px;display:block}.agent-md-error,.error{border-color:color-mix(in srgb,var(--danger) 35%,var(--border));background:color-mix(in srgb,var(--danger) 6%,var(--card))}.warning{border-color:color-mix(in srgb,var(--warning) 35%,var(--border));background:color-mix(in srgb,var(--warning) 6%,var(--card))}.agent-md-tabs>div:first-child{border-bottom:1px solid var(--border);gap:4px;margin-bottom:10px;display:flex}.agent-md-tabs button{color:var(--muted-foreground);cursor:pointer;background:0 0;border:0;padding:6px 8px;font-size:12px}.agent-md-tabs button:hover{background:var(--muted);color:var(--foreground)}table{border-collapse:collapse;width:100%;font-size:12px}th,td{border:1px solid color-mix(in srgb,var(--border) 70%,transparent);text-align:left;padding:6px 8px}th{background:color-mix(in srgb,var(--muted) 45%,transparent);cursor:pointer;color:var(--muted-foreground);font-size:11px}input{border:1px solid var(--border);border-radius:6px;padding:6px 8px;font-size:12px}pre{color:#e2e8f0;background:#0f172a;border-radius:8px;padding:12px;font-size:12px;overflow:auto}@media (width>=1024px){.browser-shell{flex-direction:row}.file-sidebar{border-bottom:0;border-right:1px solid color-mix(in srgb,var(--border) 60%,transparent);width:min(100%,280px)}.file-tree{max-height:min(75vh,720px)}.preview-body{padding:18px 22px}}@media (width>=1280px){.file-sidebar{width:320px}}