@krmxd/onegpt 0.2.1-beta → 0.2.2-beta

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krmxd/onegpt",
-  "version": "0.2.1-beta",
+  "version": "0.2.2-beta",
   "description": "OGPT - AI coding assistant for the terminal with a built-in local engine",
   "main": "src/index.js",
   "bin": {

package/src/agent.js

@@ -473,11 +473,14 @@ function diffLines(oldStr, newStr) {
 }
 
 function codeMarkdown(ev) {
+  // The fence info carries the file so renderers can show a titled,
+  // macOS-style code box: ```lang path=folder/file.ext
+  const rel = String(ev.path || "").replace(/^\/+/, "");
   if (ev.action === "EDITED" && ev.old_content !== undefined) {
-    return "```diff\n" + diffLines(ev.old_content, ev.content).join("\n") + "\n```";
+    return "```diff path=" + rel + "\n" + diffLines(ev.old_content, ev.content).join("\n") + "\n```";
   }
   const lang = detectLang(ev.path);
-  return "```" + lang + "\n" + ev.content + "\n```";
+  return "```" + lang + " path=" + rel + "\n" + ev.content + "\n```";
 }
 
 class Agent {

package/src/render.js

@@ -1,11 +1,14 @@
 "use strict";
 
 // Terminal chat renderer, opencode-style:
-//  - live-updating output (SmoothPrinter repaints in place instead of
-//    spilling raw tokens, which is what made streaming feel choppy)
-//  - fenced code blocks drawn as rounded boxes with a language label
+//  - live-updating output (SmoothPrinter repaints in place; every line is
+//    hard-truncated with WIDE-CHAR-AWARE measuring so the terminal never
+//    soft-wraps behind our back - that desync used to duplicate text)
+//  - fenced code blocks drawn as rounded boxes with macOS-style
+//    traffic-light circles and the FILE TITLE when known
 //  - light inline styling: bold/italic, `inline code`, headings, links
-// Everything degrades to plain passthrough when stdout is not a TTY.
+// Everything degrades gracefully: non-TTY or a mid-stream resize falls
+// back to plain passthrough instead of ever duplicating output.
 
 const ESC = "\x1b";
 const C = {
@@ -16,23 +19,48 @@ const C = {
 
 function stripAnsi(s) { return s.replace(/\x1b\[[0-9;]*m/g, ""); }
 
+const WIDE_RANGES = [
+  [0x1100, 0x115f], [0x2e80, 0x303e], [0x3041, 0x33ff],
+  [0x3400, 0x4dbf], [0x4e00, 0x9fff], [0xa000, 0xa4cf],
+  [0xac00, 0xd7a3], [0xf900, 0xfaff], [0xfe30, 0xfe6f],
+  [0xff00, 0xff60], [0xffe0, 0xffe6], [0x1f300, 0x1f64f],
+  [0x1f900, 0x1f9ff], [0x20000, 0x3fffd],
+];
+
+function charWidth(cp) {
+  if (cp === 0) return 0;
+  for (const [lo, hi] of WIDE_RANGES) {
+    if (cp >= lo && cp <= hi) return 2;
+  }
+  return cp > 0xffff ? 2 : 1;
+}
+
+// Display width of a string as the terminal will draw it (ANSI skipped).
+function visibleWidth(s) {
+  let w = 0;
+  const plain = stripAnsi(s);
+  for (const ch of plain) w += charWidth(ch.codePointAt(0));
+  return w;
+}
+
 function truncateVisible(s, max) {
   if (visibleWidth(s) <= max) return s;
   let out = "", w = 0;
   for (let i = 0; i < s.length; i++) {
     if (s[i] === ESC && s[i + 1] === "[") {
-      const m = /\x1b\[[0-9;]*m/.exec(s.slice(i));
+      const m = /^\x1b\[[0-9;]*m/.exec(s.slice(i));
       if (m) { out += m[0]; i += m[0].length - 1; continue; }
     }
-    w += s.codePointAt(i) > 0xffff ? 2 : 1;
-    if (w > max - 1) return out + C.dim + "…" + C.reset;
-    out += s[i];
+    const cp = s.codePointAt(i);
+    const cw = charWidth(cp);
+    if (w + cw > max - 1) return out + C.dim + "…" + C.reset;
+    w += cw;
+    out += String.fromCodePoint(cp);
+    if (cp > 0xffff) i++;
   }
   return out;
 }
 
-function visibleWidth(s) { return stripAnsi(s).length; }
-
 const KEYWORDS = new Set(("const let var function return if else for while class import " +
   "from export default async await new try catch throw switch case break continue " +
   "def lambda elif None True False self public private static void int float str " +
@@ -63,15 +91,64 @@ function padVisible(s, width) {
   return s + " ".repeat(Math.max(0, pad));
 }
 
-function renderCodeBox(lang, lines, width) {
+const EXT_LANG = {
+  html: "html", htm: "html", css: "css", js: "javascript", mjs: "javascript",
+  cjs: "javascript", jsx: "jsx", ts: "typescript", tsx: "tsx", py: "python",
+  json: "json", md: "markdown", sh: "bash", bash: "bash", yml: "yaml",
+  yaml: "yaml", txt: "text", csv: "text", go: "go", rs: "rust", java: "java",
+  c: "c", h: "c", cpp: "cpp", cs: "csharp", rb: "ruby", php: "php",
+  sql: "sql", kt: "kotlin", swift: "swift", dart: "dart", lua: "lua",
+};
+
+function langFromFilename(name) {
+  const ext = (/\.([a-z0-9]+)$/i.exec(name) || [])[1];
+  return ext ? (EXT_LANG[ext.toLowerCase()] || ext.toLowerCase()) : "";
+}
+
+/**
+ * Fence info strings may carry the file title:
+ *   ```js   |   ```js path=src/app.py   |   ```index.html
+ * Returns {lang, title}.
+ */
+function parseFenceInfo(info) {
+  const tokens = String(info || "").trim().split(/\s+/).filter(Boolean);
+  let lang = "", title = "";
+  for (const tok of tokens) {
+    const m = /^(?:path|file)=(.+)$/.exec(tok);
+    if (m) { title = m[1]; continue; }
+    if (!lang) lang = tok;
+  }
+  if (title) {
+    // A bare filename as the language slot also means title.
+    if (!lang && /\.[a-z0-9]+$/i.test(tokens[0] || "")) lang = "";
+    lang = lang || langFromFilename(title);
+  } else if (lang && /\.[a-z0-9]{1,8}$/i.test(lang) && !lang.includes("(")) {
+    // ```index.html style - treat as a filename
+    title = lang;
+    lang = langFromFilename(lang);
+  }
+  return { lang, title };
+}
+
+function renderCodeBox(info, lines, width) {
   const inner = Math.max(20, width - 4);
-  const label = (lang || "").trim();
-  const top = label
-    ? `╭─ ${C.cyan}${label}${C.reset} ${"─".repeat(Math.max(1, inner - label.length - 4))}`
-    : `╭─${"─".repeat(inner - 1)}`;
+  const { lang, title } = typeof info === "string" ? parseFenceInfo(info) : info;
+  // macOS window chrome: three traffic lights, then title (file name when
+  // known, otherwise the language tag).
+  const lights = `${C.red}●${C.reset} ${C.yellow}●${C.reset} ${C.green}●${C.reset}`;
+  const label = title
+    ? `${lights} ${C.dim}─${C.reset} ${C.bold}${C.cyan}${truncateVisible(title, Math.max(6, inner - 12))}${C.reset}`
+    : (lang
+      ? `${lights} ${C.dim}─${C.reset} ${C.bold}${lang}${C.reset}`
+      : lights);
+  const used = visibleWidth(label);
+  // Top border must fit within `width` like every other line:
+  // "╭─ " (3) + label + " " (1) + dash <= width
+  const dash = C.dim + "─".repeat(Math.max(1, width - used - 5)) + C.reset;
+  const top = truncateVisible(`╭─ ${label} ${dash}`, width);
   const body = lines.map((l) =>
     `${C.dim}│${C.reset} ` + padVisible(truncateVisible(tintCode(l), inner), inner) + ` ${C.dim}│${C.reset}`);
-  return [top + C.dim + "╮" + C.reset, ...body,
+  return [top, ...body,
     C.dim + "╰" + "─".repeat(inner + 2) + "╯" + C.reset];
 }
 
@@ -86,35 +163,35 @@ function renderInline(s) {
 /**
  * Render a full assistant message for the terminal.
  * Fenced blocks become rounded boxes; prose gets light markdown styling.
- * Lines are hard-truncated to the given width so repaint math stays exact.
+ * EVERY emitted line is guaranteed to fit within `width` display cells,
+ * so the terminal never soft-wraps and repaint math stays exact.
  */
 function renderMarkdown(text, width = 100) {
-  width = Math.max(40, Math.min(120, width));
+  width = Math.max(40, Math.min(200, width));
   const src = String(text ?? "").split("\n");
   const out = [];
-  let inFence = false, lang = "", buf = [];
+  let inFence = false, info = "", buf = [];
   const flushFence = () => {
-    out.push(...renderCodeBox(lang, buf, width));
-    buf = []; lang = "";
+    out.push(...renderCodeBox(info, buf, width));
+    buf = []; info = "";
   };
   for (const line of src) {
     const m = /^\s*```(.*)$/.exec(line);
     if (m) {
       if (inFence) { flushFence(); inFence = false; }
-      else { inFence = true; lang = m[1]; }
+      else { inFence = true; info = m[1]; }
       continue;
     }
     if (inFence) { buf.push(line); continue; }
     const h = /^(#{1,6})\s+(.*)$/.exec(line);
     if (h) {
-      out.push(C.bold + C.cyan + h[2] + C.reset);
+      out.push(truncateVisible(C.bold + C.cyan + h[2] + C.reset, width));
       continue;
     }
     if (/^\s*(-{3,}|={3,}|\*{3,})\s*$/.test(line)) {
-      out.push(C.dim + "─".repeat(width) + C.reset);
+      out.push(truncateVisible(C.dim + "─".repeat(width) + C.reset, width));
       continue;
     }
-    if (/^\s*&gt;\s?/.test(line)) { out.push(C.dim + line + C.reset); continue; }
     out.push(truncateVisible(renderInline(line), width));
   }
   if (inFence) flushFence();
@@ -124,15 +201,17 @@ function renderMarkdown(text, width = 100) {
 const MAX_PREVIEW_CHARS = 60000;
 
 /**
- * In-place repainting stream target. TTY: buffers chunks and repaints the
- * rendered message every ~50ms (opencode feel). Non-TTY: raw passthrough.
+ * In-place repainting stream target.
+ * TTY: buffers chunks and repaints the rendered message every ~60ms.
+ * Non-TTY / resized mid-stream / absurdly tall paints: raw passthrough,
+ * because a WRONG erase duplicates text ("spamming") - never risk it.
  */
 class SmoothPrinter {
   constructor(out = process.stdout) {
     this.out = out;
     this.tty = !!(out.isTTY && process.env.TERM !== "dumb"
       && !process.env.OGPT_PLAIN);
-    this.width = Math.max(40, Math.min(120, (out.columns || 100) - 2));
+    this.widthOf = () => Math.max(40, Math.min(200, (out.columns || 100) - 2));
   }
 
   begin() {
@@ -140,19 +219,21 @@ class SmoothPrinter {
     this.drawn = 0;
     this.lastPaint = 0;
     this.timer = null;
+    this.closed = false;
+    this.degraded = !this.tty;
+    this.paintWidth = null;
     if (!this.tty) return;
-    // Hide the cursor while we repaint to avoid flicker.
     this.out.write(`${ESC}[?25l`);
   }
 
   feed(chunk) {
-    if (!this.tty) { this.out.write(chunk); return; }
+    if (this.degraded) { this.out.write(chunk); return; }
     this.buf += chunk;
     if (this.buf.length > MAX_PREVIEW_CHARS * 1.5) {
       this.buf = this.buf.slice(-MAX_PREVIEW_CHARS);
     }
     if (!this.timer) {
-      this.timer = setTimeout(() => { this.timer = null; this._paint(); }, 50);
+      this.timer = setTimeout(() => { this.timer = null; this._paint(); }, 60);
     }
   }
 
@@ -162,25 +243,55 @@ class SmoothPrinter {
   }
 
   _paint() {
-    if (!this.tty || this.closed) return;
+    if (this.closed || this.degraded) return;
     const now = Date.now();
-    if (now - this.lastPaint < 45) return;
-    this._erase();
+    if (now - this.lastPaint < 50) return;
+    const cols = this.out.columns;
+    // Terminal resized since the last paint: old rows were wrapped at a
+    // different width, so erasing would leave ghosts -> degrade safely.
+    if (this.paintWidth !== null && cols && cols !== this.paintWidth) {
+      this._degrade();
+      return;
+    }
+    const width = this.widthOf();
     let preview = this.buf;
     if (preview.length > MAX_PREVIEW_CHARS) preview = preview.slice(-MAX_PREVIEW_CHARS);
-    const rendered = renderMarkdown(preview, this.width);
+    const rendered = renderMarkdown(preview, width);
+    const lines = rendered.split("\n");
+    const rows = Math.max(0, lines.length - 1);
+    const maxRows = (this.out.rows || 2000) - 1;
+    if (rows > maxRows) {
+      // Taller than the screen: scrolling would already have eaten the top
+      // rows - repainting can't reach them. Degrade instead of duplicating.
+      this._degrade(true);
+      return;
+    }
+    this._erase();
     this.out.write(rendered);
-    this.drawn = rendered.split("\n").length - 1;
+    this.drawn = rows;
+    this.paintWidth = cols || width;
     this.lastPaint = now;
   }
 
+  _degrade(skipFlush) {
+    this.degraded = true;
+    if (!skipFlush && this.buf) {
+      // Hand back the un-styled tail so nothing is lost visually.
+      this.out.write("\n" + this.buf.slice(-4000) + "\n");
+    } else {
+      this.out.write("\n");
+    }
+    this.buf = "";
+  }
+
   finish() {
     if (this.closed) return;
     this.closed = true;
     if (this.timer) { clearTimeout(this.timer); this.timer = null; }
-    if (!this.tty) return;
+    if (!this.tty || this.degraded) return;
     this._erase();
-    this.out.write(renderMarkdown(this.buf, this.width) + "\n");
+    const width = this.widthOf();
+    this.out.write(renderMarkdown(this.buf, width) + "\n");
     this.out.write(`${ESC}[?25h`);
   }
 
@@ -193,4 +304,5 @@ class SmoothPrinter {
   }
 }
 
-module.exports = { renderMarkdown, SmoothPrinter, tintCode, visibleWidth };
+module.exports = { renderMarkdown, SmoothPrinter, tintCode, visibleWidth,
+  parseFenceInfo, truncateVisible };