@lazyingart/agintiflow 0.8.9 → 0.8.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazyingart/agintiflow",
-  "version": "0.8.9",
+  "version": "0.8.11",
   "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;

package/src/interactive-cli.js

@@ -60,7 +60,7 @@ function label(name, bgCode) {
 }
 
 function userPrompt() {
-  return `\n${label("user>", ansi.userBg)} `;
+  return `\n${label("user>", ansi.userBg)} ${color("|", ansi.userBg)} `;
 }
 
 function commandCompleter(line = "") {
@@ -70,6 +70,21 @@ function commandCompleter(line = "") {
   return [hits.length > 0 ? hits : SLASH_COMMANDS, trimmed];
 }
 
+function stripAnsi(value) {
+  return String(value || "").replace(/\x1b\[[0-9;?]*[ -/]*[@-~]/g, "");
+}
+
+function promptGutter() {
+  const visible = stripAnsi(userPrompt()).replace(/^\n/, "").length;
+  return " ".repeat(Math.max(visible - 2, 0)) + `${color("|", ansi.userBg)} `;
+}
+
+function commandSuggestions(line = "") {
+  const trimmed = String(line || "");
+  if (!trimmed.startsWith("/") || /\s/.test(trimmed)) return [];
+  return SLASH_COMMANDS.filter((command) => command.startsWith(trimmed)).slice(0, 8);
+}
+
 function stripMarkdown(text) {
   const lines = String(text || "").split(/\r?\n/);
   let inFence = false;
@@ -79,16 +94,26 @@ function stripMarkdown(text) {
     let line = rawLine;
     if (/^\s*```/.test(line)) {
       inFence = !inFence;
-      if (inFence) rendered.push(color("code", ansi.dim));
+      if (inFence) {
+        const language = line.replace(/^\s*```/, "").trim();
+        rendered.push(color(language ? `code ${language}` : "code", ansi.dim));
+      }
       continue;
     }
 
     if (!inFence) {
       if (/^\s*[-*_]{3,}\s*$/.test(line)) {
-        rendered.push("");
+        rendered.push(color("-".repeat(42), ansi.dim));
+        continue;
+      }
+      const heading = line.match(/^\s{0,3}(#{1,6})\s+(.+)$/);
+      if (heading) {
+        rendered.push(color(heading[2].replace(/\s+#*$/, ""), ansi.bold, ansi.cyan));
+        continue;
+      }
+      if (/^\s*\|?\s*:?-{3,}:?\s*(\|\s*:?-{3,}:?\s*)+\|?\s*$/.test(line)) {
         continue;
       }
-      line = line.replace(/^\s{0,3}#{1,6}\s+/, "");
       line = line.replace(/\[([^\]]+)\]\(([^)]+)\)/g, "$1 ($2)");
       line = line.replace(/\*\*([^*]+)\*\*/g, (_, value) => color(value, ansi.bold));
       line = line.replace(/__([^_]+)__/g, (_, value) => color(value, ansi.bold));
@@ -96,7 +121,9 @@ function stripMarkdown(text) {
       line = line.replace(/(^|[^\w])_([^_\n]+)_/g, "$1$2");
       line = line.replace(/`([^`]+)`/g, (_, value) => color(value, ansi.yellow));
       line = line.replace(/^(\s*)[-*+]\s+/, "$1- ");
-      line = line.replace(/^\s*>\s?/, "  ");
+      line = line.replace(/^\s*>\s?(.+)$/, (_, value) => color(`| ${value}`, ansi.dim));
+    } else {
+      line = color(`  ${line}`, ansi.yellow);
     }
 
     rendered.push(line);
@@ -105,10 +132,15 @@ function stripMarkdown(text) {
   return rendered.join("\n").replace(/\n{3,}/g, "\n\n").trimEnd();
 }
 
-function printWrapped(prefix, text) {
+function rolePrefix(name, bgCode) {
+  return `${label(name, bgCode)} ${color("|", bgCode)} `;
+}
+
+function printWrapped(prefix, text, { stripCode = "" } = {}) {
   const rendered = stripMarkdown(text);
   const lines = rendered.split("\n");
-  const gutter = " ".repeat(useColor ? 9 : prefix.length);
+  const visible = stripAnsi(prefix).length;
+  const gutter = `${" ".repeat(Math.max(visible - 2, 0))}${stripCode ? color("|", stripCode) : "|"} `;
   console.log(`${prefix}${lines[0] || ""}`);
   for (const line of lines.slice(1)) {
     console.log(`${gutter}${line}`);
@@ -116,7 +148,7 @@ function printWrapped(prefix, text) {
 }
 
 function printAgentMessage(text) {
-  printWrapped(`${label("aginti>", ansi.agentBg)} `, text);
+  printWrapped(rolePrefix("aginti>", ansi.agentBg), text, { stripCode: ansi.agentBg });
 }
 
 function printSystemLine(text) {
@@ -197,6 +229,113 @@ function printHelp() {
   );
 }
 
+function renderPromptBuffer(buffer, previousLineCount = 0) {
+  for (let index = 0; index < previousLineCount; index += 1) {
+    output.write(`\r${ansi.clearLine}`);
+    if (index < previousLineCount - 1) output.write("\x1b[1A");
+  }
+
+  const lines = String(buffer || "").split("\n");
+  const suggestions = commandSuggestions(lines[0] || "");
+  const rendered = [];
+  rendered.push(`${userPrompt().replace(/^\n/, "")}${lines[0] || ""}`);
+  for (const line of lines.slice(1)) {
+    rendered.push(`${promptGutter()}${line}`);
+  }
+  if (suggestions.length > 0) {
+    rendered.push(`${promptGutter()}${color(`suggest: ${suggestions.join("  ")}`, ansi.dim)}`);
+  }
+  output.write(rendered.join("\n"));
+  return rendered.length;
+}
+
+function createAbortError(message = "Aborted with Ctrl+C") {
+  const error = new Error(message);
+  error.code = "ABORT_ERR";
+  error.name = "AbortError";
+  return error;
+}
+
+function readTtyPrompt() {
+  return new Promise((resolve, reject) => {
+    emitKeypressEvents(input);
+    const wasRaw = Boolean(input.isRaw);
+    let buffer = "";
+    let renderedLines = 0;
+
+    const cleanup = () => {
+      input.off("keypress", handler);
+      if (typeof input.setRawMode === "function") input.setRawMode(wasRaw);
+      input.pause();
+      output.write(ansi.cursorShow);
+    };
+
+    const redraw = () => {
+      renderedLines = renderPromptBuffer(buffer, renderedLines);
+    };
+
+    const submit = () => {
+      cleanup();
+      output.write("\n");
+      resolve(buffer);
+    };
+
+    const handler = (str = "", key = {}) => {
+      if (key.ctrl && key.name === "c") {
+        cleanup();
+        output.write("\n");
+        reject(createAbortError());
+        return;
+      }
+      if ((key.ctrl && key.name === "j") || (key.sequence === "\n" && key.name !== "return" && key.name !== "enter")) {
+        buffer += "\n";
+        redraw();
+        return;
+      }
+      if (key.name === "return" || key.name === "enter" || key.sequence === "\r" || str === "\r") {
+        submit();
+        return;
+      }
+      if (key.name === "backspace") {
+        buffer = buffer.slice(0, -1);
+        redraw();
+        return;
+      }
+      if (key.name === "tab") {
+        const suggestions = commandSuggestions(buffer.split("\n")[0] || "");
+        if (suggestions.length === 1) {
+          buffer = suggestions[0];
+        }
+        redraw();
+        return;
+      }
+      if (key.name === "escape") {
+        buffer = "";
+        redraw();
+        return;
+      }
+      if (key.ctrl || key.meta) return;
+      if (str && !key.sequence?.startsWith("\x1b")) {
+        buffer += str;
+        redraw();
+      }
+    };
+
+    input.resume();
+    input.setRawMode(true);
+    output.write(ansi.cursorHide);
+    input.on("keypress", handler);
+    redraw();
+  });
+}
+
+async function readPromptAnswer(rl) {
+  if (input.isTTY && output.isTTY && typeof input.setRawMode === "function") {
+    return readTtyPrompt();
+  }
+  return rl.question(userPrompt());
+}
+
 function printStatus(state) {
   printSystemLine(`project=${process.cwd()}`);
   printSystemLine(`cwd=${state.commandCwd || process.cwd()}`);
@@ -237,6 +376,7 @@ function attachRunInterrupts(controller) {
 
   emitKeypressEvents(input);
   const wasRaw = Boolean(input.isRaw);
+  input.resume();
   input.setRawMode(true);
   const handler = (_str, key = {}) => {
     const isEscape = key.name === "escape";
@@ -564,12 +704,15 @@ async function runPrompt(prompt, state, packageDir) {
 
 export async function startInteractiveCli(args = {}, { packageDir, packageVersion } = {}) {
   const state = createState(args);
-  const rl = readline.createInterface({
-    input,
-    output,
-    terminal: Boolean(input.isTTY && output.isTTY),
-    completer: commandCompleter,
-  });
+  const rl =
+    input.isTTY && output.isTTY
+      ? null
+      : readline.createInterface({
+          input,
+          output,
+          terminal: false,
+          completer: commandCompleter,
+        });
 
   await renderLaunchHeader(packageVersion);
   printSystemLine(`Project: ${process.cwd()}`);
@@ -581,7 +724,7 @@ export async function startInteractiveCli(args = {}, { packageDir, packageVersio
     while (true) {
       let answer = "";
       try {
-        answer = await rl.question(userPrompt());
+        answer = await readPromptAnswer(rl);
       } catch (error) {
         if (error?.code === "ERR_USE_AFTER_CLOSE") break;
         if (isAbortError(error)) {
@@ -609,6 +752,6 @@ export async function startInteractiveCli(args = {}, { packageDir, packageVersio
       }
     }
   } finally {
-    rl.close();
+    rl?.close();
   }
 }