@lazyingart/agintiflow 0.8.9 → 0.8.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazyingart/agintiflow",
-  "version": "0.8.9",
+  "version": "0.8.10",
   "type": "module",
   "description": "AgInTiFlow is a resumable Playwright website-control agent with OpenAI-compatible tool calling.",
   "license": "Apache-2.0",

package/public/app.js

@@ -1014,6 +1014,201 @@ function escapeHtml(value) {
   );
 }
 
+function safeLinkHref(value) {
+  const raw = String(value || "").trim();
+  try {
+    const parsed = new URL(raw, window.location.origin);
+    return ["http:", "https:", "mailto:"].includes(parsed.protocol) ? parsed.href : "";
+  } catch {
+    return "";
+  }
+}
+
+function renderInlineMarkdown(value) {
+  const placeholders = [];
+  const protect = (html) => {
+    const index = placeholders.push(html) - 1;
+    return `\u0000${index}\u0000`;
+  };
+
+  let text = String(value || "");
+  text = text.replace(/`([^`\n]+)`/g, (_match, code) => protect(`<code>${escapeHtml(code)}</code>`));
+  text = text.replace(/\[([^\]\n]+)]\(([^)\s]+)\)/g, (_match, label, href) => {
+    const safeHref = safeLinkHref(href);
+    if (!safeHref) return escapeHtml(label);
+    return protect(
+      `<a href="${escapeHtml(safeHref)}" target="_blank" rel="noopener noreferrer">${escapeHtml(label)}</a>`
+    );
+  });
+
+  let html = escapeHtml(text);
+  html = html
+    .replace(/\*\*([^*\n]+)\*\*/g, "<strong>$1</strong>")
+    .replace(/__([^_\n]+)__/g, "<strong>$1</strong>")
+    .replace(/\*([^*\n]+)\*/g, "<em>$1</em>")
+    .replace(/~~([^~\n]+)~~/g, "<del>$1</del>");
+
+  return html.replace(/\u0000(\d+)\u0000/g, (_match, index) => placeholders[Number(index)] || "");
+}
+
+function splitTableRow(line) {
+  return String(line || "")
+    .trim()
+    .replace(/^\|/, "")
+    .replace(/\|$/, "")
+    .split("|")
+    .map((cell) => cell.trim());
+}
+
+function isMarkdownTableSeparator(line) {
+  return /^\s*\|?\s*:?-{3,}:?\s*(\|\s*:?-{3,}:?\s*)+\|?\s*$/.test(String(line || ""));
+}
+
+function renderMarkdownTable(headerLine, rows) {
+  const headers = splitTableRow(headerLine);
+  const bodyRows = rows.map(splitTableRow);
+  return `
+    <div class="markdown-table-wrap">
+      <table>
+        <thead>
+          <tr>${headers.map((cell) => `<th>${renderInlineMarkdown(cell)}</th>`).join("")}</tr>
+        </thead>
+        <tbody>
+          ${bodyRows
+            .map((row) => `<tr>${headers.map((_header, index) => `<td>${renderInlineMarkdown(row[index] || "")}</td>`).join("")}</tr>`)
+            .join("")}
+        </tbody>
+      </table>
+    </div>
+  `;
+}
+
+function isMarkdownBlockStart(line, nextLine = "") {
+  const trimmed = String(line || "").trim();
+  return (
+    /^```/.test(trimmed) ||
+    /^#{1,6}\s+/.test(trimmed) ||
+    /^[-*_]{3,}$/.test(trimmed) ||
+    /^>\s?/.test(trimmed) ||
+    /^[-*+]\s+/.test(trimmed) ||
+    /^\d+\.\s+/.test(trimmed) ||
+    (trimmed.includes("|") && isMarkdownTableSeparator(nextLine))
+  );
+}
+
+function renderMarkdown(value) {
+  const lines = String(value || "").replace(/\r\n?/g, "\n").split("\n");
+  const html = [];
+  let paragraph = [];
+  let listType = "";
+  let listItems = [];
+
+  const flushParagraph = () => {
+    if (!paragraph.length) return;
+    html.push(`<p>${renderInlineMarkdown(paragraph.join(" ").trim())}</p>`);
+    paragraph = [];
+  };
+
+  const flushList = () => {
+    if (!listItems.length) return;
+    const tag = listType === "ol" ? "ol" : "ul";
+    html.push(`<${tag}>${listItems.map((item) => `<li>${renderInlineMarkdown(item)}</li>`).join("")}</${tag}>`);
+    listType = "";
+    listItems = [];
+  };
+
+  for (let index = 0; index < lines.length; index += 1) {
+    const line = lines[index];
+    const trimmed = line.trim();
+
+    if (!trimmed) {
+      flushParagraph();
+      flushList();
+      continue;
+    }
+
+    const fence = trimmed.match(/^```([A-Za-z0-9_-]+)?\s*$/);
+    if (fence) {
+      flushParagraph();
+      flushList();
+      const language = fence[1] || "";
+      const code = [];
+      index += 1;
+      while (index < lines.length && !/^```\s*$/.test(lines[index].trim())) {
+        code.push(lines[index]);
+        index += 1;
+      }
+      html.push(
+        `<pre class="markdown-code"><code data-language="${escapeHtml(language)}">${escapeHtml(code.join("\n"))}</code></pre>`
+      );
+      continue;
+    }
+
+    const heading = trimmed.match(/^(#{1,6})\s+(.+?)\s*#*$/);
+    if (heading) {
+      flushParagraph();
+      flushList();
+      const level = heading[1].length;
+      html.push(`<h${level}>${renderInlineMarkdown(heading[2])}</h${level}>`);
+      continue;
+    }
+
+    if (/^[-*_]{3,}$/.test(trimmed)) {
+      flushParagraph();
+      flushList();
+      html.push("<hr>");
+      continue;
+    }
+
+    if (trimmed.includes("|") && isMarkdownTableSeparator(lines[index + 1])) {
+      flushParagraph();
+      flushList();
+      const header = line;
+      const rows = [];
+      index += 2;
+      while (index < lines.length && lines[index].trim().includes("|")) {
+        rows.push(lines[index]);
+        index += 1;
+      }
+      index -= 1;
+      html.push(renderMarkdownTable(header, rows));
+      continue;
+    }
+
+    if (/^>\s?/.test(trimmed)) {
+      flushParagraph();
+      flushList();
+      const quote = [];
+      while (index < lines.length && /^>\s?/.test(lines[index].trim())) {
+        quote.push(lines[index].trim().replace(/^>\s?/, ""));
+        index += 1;
+      }
+      index -= 1;
+      html.push(`<blockquote>${renderMarkdown(quote.join("\n"))}</blockquote>`);
+      continue;
+    }
+
+    const unordered = trimmed.match(/^[-*+]\s+(.+)$/);
+    const ordered = trimmed.match(/^\d+\.\s+(.+)$/);
+    if (unordered || ordered) {
+      flushParagraph();
+      const nextType = ordered ? "ol" : "ul";
+      if (listType && listType !== nextType) flushList();
+      listType = nextType;
+      listItems.push((unordered || ordered)[1]);
+      continue;
+    }
+
+    if (listItems.length) flushList();
+    paragraph.push(trimmed);
+    if (index + 1 >= lines.length || isMarkdownBlockStart(lines[index + 1], lines[index + 2])) flushParagraph();
+  }
+
+  flushParagraph();
+  flushList();
+  return html.join("");
+}
+
 function renderChat(chatEntries) {
   lastChatEntries = chatEntries || [];
 
@@ -1026,7 +1221,10 @@ function renderChat(chatEntries) {
     .map((entry) => {
       const role = entry.role === "assistant" ? "assistant" : "user";
       const label = role === "assistant" ? t("assistantLabel") : t("youLabel");
-      const content = escapeHtml(entry.content).replace(/\n/g, "<br>");
+      const content =
+        role === "assistant"
+          ? `<div class="markdown-body">${renderMarkdown(entry.content)}</div>`
+          : escapeHtml(entry.content).replace(/\n/g, "<br>");
       return `
         <article class="chat-item ${role}">
           <div class="chat-meta">${label}${entry.at ? ` · ${new Date(entry.at).toLocaleString()}` : ""}</div>
@@ -1200,6 +1398,11 @@ function renderArtifactContent(content) {
   }
 
   const text = typeof content.text === "string" ? content.text : "";
+  if (content.kind === "markdown" || /markdown/i.test(content.mime || "")) {
+    artifactViewerBodyEl.innerHTML = `<div class="artifact-markdown markdown-body">${renderMarkdown(text)}</div>`;
+    return;
+  }
+
   artifactViewerBodyEl.innerHTML = `
     <textarea class="artifact-editor" readonly spellcheck="false">${escapeHtml(text)}</textarea>
   `;

package/public/styles.css

@@ -587,6 +587,139 @@ button.danger {
   overflow-wrap: anywhere;
 }
 
+.markdown-body {
+  line-height: 1.58;
+}
+
+.markdown-body > :first-child {
+  margin-top: 0;
+}
+
+.markdown-body > :last-child {
+  margin-bottom: 0;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin: 0.92em 0 0.42em;
+  color: var(--ink);
+  line-height: 1.15;
+}
+
+.markdown-body h1 {
+  font-size: 1.38rem;
+}
+
+.markdown-body h2 {
+  font-size: 1.22rem;
+}
+
+.markdown-body h3 {
+  font-size: 1.08rem;
+}
+
+.markdown-body p,
+.markdown-body ul,
+.markdown-body ol,
+.markdown-body blockquote,
+.markdown-body pre,
+.markdown-table-wrap {
+  margin: 0 0 0.82em;
+}
+
+.markdown-body ul,
+.markdown-body ol {
+  padding-left: 1.35rem;
+}
+
+.markdown-body li + li {
+  margin-top: 0.28em;
+}
+
+.markdown-body a {
+  color: #0f766e;
+  font-weight: 800;
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.16em;
+}
+
+.markdown-body code {
+  padding: 0.12em 0.36em;
+  border: 1px solid rgba(15, 118, 110, 0.16);
+  border-radius: 7px;
+  background: rgba(15, 23, 42, 0.06);
+  color: #0f172a;
+  font-size: 0.92em;
+}
+
+.markdown-body pre {
+  max-width: 100%;
+  padding: 12px;
+  border: 1px solid rgba(15, 118, 110, 0.18);
+  border-radius: 14px;
+  background: #111827;
+  color: #f8fafc;
+  overflow: auto;
+  white-space: pre;
+}
+
+.markdown-body pre code {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+}
+
+.markdown-body blockquote {
+  padding: 0.2rem 0 0.2rem 0.9rem;
+  border-left: 4px solid rgba(15, 118, 110, 0.32);
+  color: var(--muted);
+}
+
+.markdown-body hr {
+  height: 1px;
+  margin: 1rem 0;
+  border: 0;
+  background: var(--line);
+}
+
+.markdown-table-wrap {
+  max-width: 100%;
+  overflow: auto;
+}
+
+.markdown-body table {
+  width: 100%;
+  min-width: 420px;
+  border-collapse: collapse;
+  font-size: 0.92rem;
+}
+
+.markdown-body th,
+.markdown-body td {
+  padding: 8px 10px;
+  border: 1px solid rgba(15, 118, 110, 0.16);
+  text-align: left;
+  vertical-align: top;
+}
+
+.markdown-body th {
+  background: rgba(15, 118, 110, 0.08);
+}
+
+.artifact-markdown {
+  min-height: 100%;
+  padding: 14px;
+  border: 1px solid rgba(15, 118, 110, 0.14);
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.72);
+  overflow: auto;
+}
+
 .chat-form {
   display: grid;
   gap: 8px;