fluxflow-cli 2.13.1 → 2.13.2

package/dist/fluxflow.js

@@ -2227,12 +2227,21 @@ var init_MultilineInput = __esm({
       const visibleLines = useMemo(() => {
         return visualLines.slice(newScrollOffset, newScrollOffset + visibleRows);
       }, [visualLines, newScrollOffset, visibleRows]);
+      const [blink, setBlink] = useState2(true);
+      useEffect2(() => {
+        setBlink(true);
+        if (!focus || !showCursor) return;
+        const timer = setInterval(() => {
+          setBlink((prev) => !prev);
+        }, 530);
+        return () => clearInterval(timer);
+      }, [focus, showCursor, value, cursorIndex]);
       const cursorStyle = useMemo(() => ({
         ...textStyle,
-        color: showCursor && focus ? "white" : void 0,
-        bold: showCursor && focus,
-        inverse: showCursor && focus
-      }), [textStyle, showCursor, focus]);
+        color: showCursor && focus && blink ? "white" : void 0,
+        bold: showCursor && focus && blink,
+        inverse: showCursor && focus && blink
+      }), [textStyle, showCursor, focus, blink]);
       return /* @__PURE__ */ React2.createElement(Box, { height: visibleRows, width: wrapWidth, overflow: "hidden", flexDirection: "column", flexGrow: 0, flexShrink: 0 }, visibleLines.map((lineObj, idx) => {
         const globalLineIdx = newScrollOffset + idx;
         const isCursorLine = globalLineIdx === cursorLine && focus && showCursor;
@@ -2316,6 +2325,16 @@ var init_MultilineInput = __esm({
               cursorIndexRef.current = newIndex;
               setCursorIndex(newIndex);
               setPasteLength(0);
+            } else if (key.upArrow && cursorLine === 0) {
+              cursorIndexRef.current = 0;
+              setCursorIndex(0);
+              setPasteLength(0);
+            } else if (key.downArrow && cursorLine === visualLines.length - 1) {
+              const lastLineObj = visualLines[visualLines.length - 1];
+              const newIndex = lastLineObj.globalStart + lastLineObj.text.length;
+              cursorIndexRef.current = newIndex;
+              setCursorIndex(newIndex);
+              setPasteLength(0);
             }
           }
         } else if (key.leftArrow) {
@@ -2346,6 +2365,22 @@ var init_MultilineInput = __esm({
             onChange(newValue);
             setPasteLength(0);
           }
+        } else if (key.home || key.end) {
+          if (showCursor) {
+            const { visualLines, cursorLine } = computeVisualMatrix(val, curIdx, wrapWidth, identity);
+            const currentLineObj = visualLines[cursorLine];
+            if (currentLineObj) {
+              let newIndex;
+              if (key.home) {
+                newIndex = currentLineObj.globalStart;
+              } else if (key.end) {
+                newIndex = currentLineObj.globalStart + currentLineObj.text.length;
+              }
+              cursorIndexRef.current = newIndex;
+              setCursorIndex(newIndex);
+              setPasteLength(0);
+            }
+          }
         } else {
           if (input) {
             const newValue = val.slice(0, curIdx) + input + val.slice(curIdx);
@@ -2741,6 +2776,7 @@ var init_text = __esm({
             text: line,
             gutterWidth,
             lineNum: idx + 1,
+            isFirstLine: idx === 0,
             isLastLine: isLast
           };
           if (isLast && msg.isStreaming) {
@@ -2758,61 +2794,6 @@ var init_text = __esm({
         const match = text.match(/\[DIFF_START\]([\s\S]*?)(?:\[DIFF_END\]|$)/);
         const diffBody = match ? match[1].trim() : "";
         const diffLines = diffBody.split("\n").map((l) => l.replace(/\r$/, ""));
-        const highlightInfos = Array(diffLines.length).fill(null);
-        let idx = 0;
-        while (idx < diffLines.length) {
-          const removals = [];
-          const additions = [];
-          while (idx < diffLines.length) {
-            const line = diffLines[idx];
-            const cleanLine = line.replace("[UI_CONTEXT]", "");
-            if (cleanLine.startsWith("-")) {
-              removals.push({ idx, line: cleanLine });
-              idx++;
-            } else {
-              break;
-            }
-          }
-          while (idx < diffLines.length) {
-            const line = diffLines[idx];
-            const cleanLine = line.replace("[UI_CONTEXT]", "");
-            if (cleanLine.startsWith("+")) {
-              additions.push({ idx, line: cleanLine });
-              idx++;
-            } else {
-              break;
-            }
-          }
-          if (removals.length > 0 && additions.length > 0) {
-            const pairCount = Math.min(removals.length, additions.length);
-            for (let k = 0; k < pairCount; k++) {
-              const r = removals[k];
-              const a = additions[k];
-              const rRest = r.line.substring(1);
-              const rSplit = rRest.indexOf("|");
-              const rContent = rSplit !== -1 ? rRest.substring(rSplit + 1) : rRest;
-              const aRest = a.line.substring(1);
-              const aSplit = aRest.indexOf("|");
-              const aContent = aSplit !== -1 ? aRest.substring(aSplit + 1) : aRest;
-              let prefixLen = 0;
-              while (prefixLen < rContent.length && prefixLen < aContent.length && rContent[prefixLen] === aContent[prefixLen]) {
-                prefixLen++;
-              }
-              let suffixLen = 0;
-              const maxSuffix = Math.min(rContent.length - prefixLen, aContent.length - prefixLen);
-              while (suffixLen < maxSuffix && rContent[rContent.length - 1 - suffixLen] === aContent[aContent.length - 1 - suffixLen]) {
-                suffixLen++;
-              }
-              if (prefixLen > 0 || suffixLen > 0) {
-                highlightInfos[r.idx] = { prefixLen, suffixLen };
-                highlightInfos[a.idx] = { prefixLen, suffixLen };
-              }
-            }
-          }
-          if (removals.length === 0 && additions.length === 0) {
-            idx++;
-          }
-        }
         const completedBlocks2 = [];
         let activeBlock2 = null;
         diffLines.forEach((line, i) => {
@@ -2822,7 +2803,8 @@ var init_text = __esm({
             msg,
             type: "diff-line",
             text: line,
-            highlightInfo: highlightInfos[i]
+            isFirstLine: i === 0,
+            isLastLine: isLast
           };
           if (isLast && msg.isStreaming) {
             activeBlock2 = block;
@@ -2865,6 +2847,7 @@ var init_text = __esm({
             text: line
           };
           if (isLast && msg.isStreaming) {
+            block.isActiveBlock = true;
             activeBlock = block;
           } else {
             completedBlocks.push(block);
@@ -2900,6 +2883,7 @@ var init_text = __esm({
                   text: codeLines.join("\n")
                 };
                 if (isLast && msg.isStreaming && inCodeBlock) {
+                  block.isActiveBlock = true;
                   activeBlock = block;
                 } else {
                   completedBlocks.push(block);
@@ -2918,6 +2902,7 @@ var init_text = __esm({
                 text: codeLines.join("\n")
               };
               if (msg.isStreaming) {
+                block.isActiveBlock = true;
                 activeBlock = block;
               } else {
                 completedBlocks.push(block);
@@ -2933,7 +2918,8 @@ var init_text = __esm({
                   msg,
                   type: "table",
                   text: tableLines.join("\n"),
-                  isStreaming: true
+                  isStreaming: true,
+                  isActiveBlock: true
                 };
               } else {
                 completedBlocks.push({
@@ -2964,6 +2950,7 @@ var init_text = __esm({
               text: line
             };
             if (isLast && msg.isStreaming) {
+              block.isActiveBlock = true;
               activeBlock = block;
             } else {
               completedBlocks.push(block);
@@ -3497,12 +3484,77 @@ ${coloredArt[7]}`;
 // src/components/ChatLayout.jsx
 import React4, { useState as useState3, useEffect as useEffect3, useRef as useRef2 } from "react";
 import { Box as Box3, Text as Text4 } from "ink";
-var formatThinkText, parseMathSymbols, renderLatexText, InlineMarkdown, TableRenderer, MarkdownText, DiffLine, DiffBlock, CodeRenderer, formatThinkingDuration, MessageItem, BlockItem, ChatLayout;
+import { diffWordsWithSpace } from "diff";
+var useStreamingText, formatThinkText, parseMathSymbols, renderLatexText, InlineMarkdown, TableRenderer, MarkdownText, parseLineInfo, DiffLine, DiffBlock, CodeRenderer, formatThinkingDuration, MessageItem, BlockItem, ChatLayout;
 var init_ChatLayout = __esm({
   "src/components/ChatLayout.jsx"() {
     init_TerminalBox();
     init_text();
     init_terminal();
+    useStreamingText = (targetText, isStreaming, isActiveBlock) => {
+      const [displayedText, setDisplayedText] = useState3(isActiveBlock && isStreaming ? "" : targetText);
+      const targetTextRef = useRef2(targetText);
+      useEffect3(() => {
+        targetTextRef.current = targetText;
+      }, [targetText]);
+      useEffect3(() => {
+        if (!isActiveBlock) {
+          setDisplayedText(targetText);
+          return;
+        }
+        if (!isStreaming && displayedText === targetText) {
+          return;
+        }
+        const interval = setInterval(() => {
+          setDisplayedText((current) => {
+            const target = targetTextRef.current;
+            if (current.length >= target.length) {
+              if (!isStreaming) {
+                clearInterval(interval);
+              }
+              return current;
+            }
+            if (!target.startsWith(current)) {
+              return target;
+            }
+            const remaining = target.substring(current.length);
+            const words = remaining.split(/(\s+)/);
+            if (words.length <= 1) {
+              if (!isStreaming) {
+                clearInterval(interval);
+              }
+              return target;
+            }
+            const currentWordsCount = current.split(/\s+/).filter(Boolean).length;
+            const targetWordsCount = target.split(/\s+/).filter(Boolean).length;
+            const diff = targetWordsCount - currentWordsCount;
+            let wordsToAdd = 1;
+            if (diff > 15) {
+              wordsToAdd = 4;
+            } else if (diff > 8) {
+              wordsToAdd = 3;
+            } else if (diff > 3) {
+              wordsToAdd = 2;
+            }
+            let addedText = "";
+            let wordCount = 0;
+            for (let i = 0; i < words.length; i++) {
+              const w = words[i];
+              addedText += w;
+              if (/\S/.test(w)) {
+                wordCount++;
+                if (wordCount >= wordsToAdd) {
+                  break;
+                }
+              }
+            }
+            return current + addedText;
+          });
+        }, 100);
+        return () => clearInterval(interval);
+      }, [isStreaming, isActiveBlock, targetText, displayedText]);
+      return displayedText;
+    };
     formatThinkText = (cleaned, columns = 80) => {
       if (!cleaned) return null;
       const availableWidth = columns - 10;
@@ -3686,97 +3738,95 @@ var init_ChatLayout = __esm({
       flushBuffers("final");
       return /* @__PURE__ */ React4.createElement(Box3, { flexDirection: "column", width: columns - 2 }, result);
     });
-    DiffLine = React4.memo(({ line, columns = 80, highlightInfo }) => {
+    parseLineInfo = (l) => {
+      if (!l) return null;
+      const clean = l.replace("[UI_CONTEXT]", "").replace(/\r/g, "");
+      const isR = clean.startsWith("-");
+      const isA = clean.startsWith("+");
+      let rest = isR || isA ? clean.substring(1) : clean;
+      rest = rest.trim();
+      const splitIdx = rest.indexOf("|");
+      const num = splitIdx !== -1 ? rest.substring(0, splitIdx).trim() : "";
+      const content = splitIdx !== -1 ? rest.substring(splitIdx + 1) : rest;
+      return { isR, isA, num, content };
+    };
+    DiffLine = React4.memo(({ line, pairContent, parentText, columns = 80 }) => {
       const isContext = line.includes("[UI_CONTEXT]");
       const cleanLine = line.replace("[UI_CONTEXT]", "");
       if (isContext && cleanLine.includes("\u2550")) {
         return /* @__PURE__ */ React4.createElement(Box3, { paddingX: 1, width: columns }, /* @__PURE__ */ React4.createElement(Text4, { color: "gray" }, "\u2550".repeat(Math.max(10, columns - 4))));
       }
-      const isRemoval = cleanLine.startsWith("-");
-      const isAddition = cleanLine.startsWith("+");
-      const prefixChar = cleanLine[0];
-      const rest = cleanLine.substring(1);
-      const splitIdx = rest.indexOf("|");
-      const lineNum = splitIdx !== -1 ? rest.substring(0, splitIdx).trim() : "";
-      const content = splitIdx !== -1 ? rest.substring(splitIdx + 1) : rest;
-      const bgColor = isRemoval ? "#3a0c0c" : isAddition ? "#0c3a1a" : "#1a1a1a";
-      const textColor = isRemoval ? "#ff4d4d" : isAddition ? "#4dff88" : isContext ? "white" : "white";
-      const numColor = isRemoval ? "#cf3a3a" : isAddition ? "#3acf65" : "gray";
-      const hasHighlight = highlightInfo && (highlightInfo.prefixLen > 0 || highlightInfo.suffixLen > 0);
-      const rowBgColor = hasHighlight ? "#1a1a1a" : bgColor;
-      if (hasHighlight) {
-        const prefixLen = highlightInfo.prefixLen;
-        const suffixLen = highlightInfo.suffixLen;
-        const prefix = content.substring(0, prefixLen);
-        const delta = content.substring(prefixLen, content.length - suffixLen);
-        const suffix = content.substring(content.length - suffixLen);
-        return /* @__PURE__ */ React4.createElement(Box3, { backgroundColor: rowBgColor, paddingX: 1, width: columns }, /* @__PURE__ */ React4.createElement(Box3, { width: 3, flexShrink: 0, justifyContent: "flex-end" }, /* @__PURE__ */ React4.createElement(Text4, { color: numColor, dimColor: isContext }, lineNum)), /* @__PURE__ */ React4.createElement(Box3, { width: 1, flexShrink: 0, marginLeft: 1 }, /* @__PURE__ */ React4.createElement(Text4, { color: textColor, bold: true }, isRemoval ? "-" : isAddition ? "+" : " ")), /* @__PURE__ */ React4.createElement(Box3, { flexGrow: 1, marginLeft: 1 }, /* @__PURE__ */ React4.createElement(Text4, { color: textColor, dimColor: isContext }, prefix, /* @__PURE__ */ React4.createElement(Text4, { backgroundColor: bgColor }, delta), suffix)));
-      }
-      return /* @__PURE__ */ React4.createElement(Box3, { backgroundColor: rowBgColor, paddingX: 1, width: columns }, /* @__PURE__ */ React4.createElement(Box3, { width: 3, flexShrink: 0, justifyContent: "flex-end" }, /* @__PURE__ */ React4.createElement(Text4, { color: numColor, dimColor: isContext }, lineNum)), /* @__PURE__ */ React4.createElement(Box3, { width: 1, flexShrink: 0, marginLeft: 1 }, /* @__PURE__ */ React4.createElement(Text4, { color: textColor, bold: true }, isRemoval ? "-" : isAddition ? "+" : " ")), /* @__PURE__ */ React4.createElement(Box3, { flexGrow: 1, marginLeft: 1 }, /* @__PURE__ */ React4.createElement(Text4, { color: textColor, dimColor: isContext }, wrapText(content, columns - 14))));
+      const parsedCurrent = parseLineInfo(line);
+      if (!parsedCurrent) {
+        return /* @__PURE__ */ React4.createElement(Box3, { backgroundColor: "#1a1a1a", paddingX: 1, width: columns }, /* @__PURE__ */ React4.createElement(Box3, { width: 3, flexShrink: 0 }), /* @__PURE__ */ React4.createElement(Box3, { width: 1, flexShrink: 0, marginLeft: 1 }), /* @__PURE__ */ React4.createElement(Box3, { flexGrow: 1, marginLeft: 1 }, /* @__PURE__ */ React4.createElement(Text4, { color: "gray" }, wrapText(cleanLine, columns - 14))));
+      }
+      const { isR: isRemoval, isA: isAddition, num: lineNum, content } = parsedCurrent;
+      const innerBgColor = isRemoval ? "#3a0c0c" : isAddition ? "#0c3a1a" : void 0;
+      let finalPairContent = pairContent;
+      if (!finalPairContent && parentText && (isRemoval || isAddition)) {
+        const cleanParent = parentText.replace(/\[DIFF_START\]|\[DIFF_END\]/g, "").trim();
+        const diffLines = cleanParent.split("\n");
+        const pairLine = diffLines.find((l) => {
+          const p = parseLineInfo(l);
+          return p && p.num === lineNum && p.isR !== isRemoval;
+        });
+        if (pairLine) {
+          finalPairContent = parseLineInfo(pairLine).content;
+        }
+      }
+      let words = [];
+      if (finalPairContent !== void 0 && finalPairContent !== null) {
+        const oldStr = isRemoval ? content : finalPairContent;
+        const newStr = isRemoval ? finalPairContent : content;
+        try {
+          words = diffWordsWithSpace(oldStr, newStr);
+        } catch (e) {
+          words = [];
+        }
+      }
+      const hasInlineChange = words.some((part) => isRemoval && part.removed || isAddition && part.added);
+      const isPureUnpairedBlock = !finalPairContent && (isRemoval || isAddition);
+      const hasRealChange = hasInlineChange || isPureUnpairedBlock;
+      const finalNumColor = isRemoval || isAddition ? isRemoval ? "#d96868" : "#68d98c" : "gray";
+      const finalPrefixColor = isRemoval ? "#ff4d4d" : "#4dff88";
+      const displayPrefix = isRemoval ? "-" : isAddition ? "+" : " ";
+      const renderInlineDiff = () => {
+        if (isPureUnpairedBlock) {
+          const blockColor = isRemoval ? "#ff3333" : "#33ff66";
+          return /* @__PURE__ */ React4.createElement(Text4, { color: blockColor }, wrapText(content, columns - 14));
+        }
+        if (!(isRemoval || isAddition) || words.length === 0 || !hasInlineChange) {
+          const textColor = isRemoval ? "#b34d4d" : isAddition ? "#4db36b" : "gray";
+          return /* @__PURE__ */ React4.createElement(Text4, { color: textColor }, wrapText(content, columns - 14));
+        }
+        return /* @__PURE__ */ React4.createElement(Text4, { wrap: "anywhere" }, words.map((part, idx) => {
+          const isWhitespace = /^\s+$/.test(part.value);
+          if (isRemoval) {
+            const isSurroundedByRemoval = words[idx - 1]?.removed || words[idx + 1]?.removed;
+            if (part.removed || isWhitespace && isSurroundedByRemoval) {
+              return /* @__PURE__ */ React4.createElement(Text4, { key: idx, color: "#ff3333" }, part.value);
+            }
+            if (part.added) return null;
+            return /* @__PURE__ */ React4.createElement(Text4, { key: idx, color: "#b34d4d" }, part.value);
+          }
+          if (isAddition) {
+            const isSurroundedByAddition = words[idx - 1]?.added || words[idx + 1]?.added;
+            if (part.added || isWhitespace && isSurroundedByAddition) {
+              return /* @__PURE__ */ React4.createElement(Text4, { key: idx, color: "#33ff66" }, part.value);
+            }
+            if (part.removed) return null;
+            return /* @__PURE__ */ React4.createElement(Text4, { key: idx, color: "#4db36b" }, part.value);
+          }
+          return /* @__PURE__ */ React4.createElement(Text4, { key: idx, color: "gray" }, part.value);
+        }));
+      };
+      return /* @__PURE__ */ React4.createElement(Box3, { backgroundColor: "#1a1a1a", paddingX: 1, width: columns }, /* @__PURE__ */ React4.createElement(Box3, { width: 3, flexShrink: 0, justifyContent: "flex-end" }, /* @__PURE__ */ React4.createElement(Text4, { color: finalNumColor }, lineNum)), /* @__PURE__ */ React4.createElement(Box3, { width: 1, flexShrink: 0, marginLeft: 1 }, /* @__PURE__ */ React4.createElement(Text4, { color: finalPrefixColor }, displayPrefix)), /* @__PURE__ */ React4.createElement(Box3, { marginLeft: 1, backgroundColor: innerBgColor, flexShrink: 1 }, renderInlineDiff()));
     });
     DiffBlock = React4.memo(({ text, columns = 80 }) => {
       const match = text.match(/\[DIFF_START\]([\s\S]*?)\[DIFF_END\]/);
       const diffBody = match ? match[1].trim() : "";
       const diffLines = diffBody.split("\n");
-      const highlightInfos = React4.useMemo(() => {
-        const infos = Array(diffLines.length).fill(null);
-        let idx = 0;
-        while (idx < diffLines.length) {
-          const removals = [];
-          const additions = [];
-          while (idx < diffLines.length) {
-            const line = diffLines[idx];
-            const cleanLine = line.replace("[UI_CONTEXT]", "");
-            if (cleanLine.startsWith("-")) {
-              removals.push({ idx, line: cleanLine });
-              idx++;
-            } else {
-              break;
-            }
-          }
-          while (idx < diffLines.length) {
-            const line = diffLines[idx];
-            const cleanLine = line.replace("[UI_CONTEXT]", "");
-            if (cleanLine.startsWith("+")) {
-              additions.push({ idx, line: cleanLine });
-              idx++;
-            } else {
-              break;
-            }
-          }
-          if (removals.length > 0 && additions.length > 0) {
-            const pairCount = Math.min(removals.length, additions.length);
-            for (let k = 0; k < pairCount; k++) {
-              const r = removals[k];
-              const a = additions[k];
-              const rRest = r.line.substring(1);
-              const rSplit = rRest.indexOf("|");
-              const rContent = rSplit !== -1 ? rRest.substring(rSplit + 1) : rRest;
-              const aRest = a.line.substring(1);
-              const aSplit = aRest.indexOf("|");
-              const aContent = aSplit !== -1 ? aRest.substring(aSplit + 1) : aRest;
-              let prefixLen = 0;
-              while (prefixLen < rContent.length && prefixLen < aContent.length && rContent[prefixLen] === aContent[prefixLen]) {
-                prefixLen++;
-              }
-              let suffixLen = 0;
-              const maxSuffix = Math.min(rContent.length - prefixLen, aContent.length - prefixLen);
-              while (suffixLen < maxSuffix && rContent[rContent.length - 1 - suffixLen] === aContent[aContent.length - 1 - suffixLen]) {
-                suffixLen++;
-              }
-              if (prefixLen > 0 || suffixLen > 0) {
-                infos[r.idx] = { prefixLen, suffixLen };
-                infos[a.idx] = { prefixLen, suffixLen };
-              }
-            }
-          }
-          if (removals.length === 0 && additions.length === 0) {
-            idx++;
-          }
-        }
-        return infos;
-      }, [diffLines]);
-      return /* @__PURE__ */ React4.createElement(Box3, { flexDirection: "column", width: columns - 3, marginBottom: 1 }, /* @__PURE__ */ React4.createElement(Box3, { flexDirection: "column", paddingY: 0, width: "100%" }, /* @__PURE__ */ React4.createElement(Box3, { backgroundColor: "#1a1a1a", paddingX: 1, width: "100%" }, /* @__PURE__ */ React4.createElement(Box3, { width: 5, flexShrink: 0 }), /* @__PURE__ */ React4.createElement(Box3, { width: 2, flexShrink: 0, marginLeft: 1 }), /* @__PURE__ */ React4.createElement(Box3, { flexGrow: 1, marginLeft: 1 }, /* @__PURE__ */ React4.createElement(Text4, null, " "))), diffLines.map((line, i) => /* @__PURE__ */ React4.createElement(DiffLine, { key: i, line, columns: columns - 3, highlightInfo: highlightInfos[i] })), /* @__PURE__ */ React4.createElement(Box3, { backgroundColor: "#1a1a1a", paddingX: 1, width: "100%" }, /* @__PURE__ */ React4.createElement(Box3, { width: 5, flexShrink: 0 }), /* @__PURE__ */ React4.createElement(Box3, { width: 2, flexShrink: 0, marginLeft: 1 }), /* @__PURE__ */ React4.createElement(Box3, { flexGrow: 1, marginLeft: 1 }, /* @__PURE__ */ React4.createElement(Text4, null, " ")))));
+      return /* @__PURE__ */ React4.createElement(Box3, { flexDirection: "column", width: columns - 3, marginBottom: 1 }, /* @__PURE__ */ React4.createElement(Box3, { flexDirection: "column", paddingY: 0, width: "100%" }, /* @__PURE__ */ React4.createElement(Box3, { backgroundColor: "#1a1a1a", paddingX: 1, width: "100%" }, /* @__PURE__ */ React4.createElement(Box3, { width: 3, flexShrink: 0 }), /* @__PURE__ */ React4.createElement(Box3, { width: 1, flexShrink: 0, marginLeft: 1 }), /* @__PURE__ */ React4.createElement(Box3, { flexGrow: 1, marginLeft: 1 }, /* @__PURE__ */ React4.createElement(Text4, null, " "))), diffLines.map((line, i) => /* @__PURE__ */ React4.createElement(DiffLine, { key: i, line, parentText: text, columns: columns - 3 })), /* @__PURE__ */ React4.createElement(Box3, { backgroundColor: "#1a1a1a", paddingX: 1, width: "100%" }, /* @__PURE__ */ React4.createElement(Box3, { width: 3, flexShrink: 0 }), /* @__PURE__ */ React4.createElement(Box3, { width: 1, flexShrink: 0, marginLeft: 1 }), /* @__PURE__ */ React4.createElement(Box3, { flexGrow: 1, marginLeft: 1 }, /* @__PURE__ */ React4.createElement(Text4, null, " ")))));
     });
     CodeRenderer = React4.memo(({ text, columns = 80 }) => {
       if (!text) return null;
@@ -3895,13 +3945,70 @@ var init_ChatLayout = __esm({
         const selectionMatch = msg.text.match(/Selection: (.*)/);
         const selection = selectionMatch ? selectionMatch[1] : "No selection";
         const s = emojiSpace(2);
-        return /* @__PURE__ */ React4.createElement(Box3, { marginBottom: 0, paddingX: 1, width: "100%" }, /* @__PURE__ */ React4.createElement(Box3, { flexDirection: "column", borderStyle: "round", borderColor: "gray", padding: 0, width: "100%" }, /* @__PURE__ */ React4.createElement(Box3, { paddingX: 1 }, /* @__PURE__ */ React4.createElement(Text4, { color: "white", bold: true }, "AGENT REQUEST: RESOLVED")), /* @__PURE__ */ React4.createElement(Box3, { paddingX: 1, marginTop: 1, marginBottom: 1 }, /* @__PURE__ */ React4.createElement(Text4, { color: "white" }, "Selection: ", /* @__PURE__ */ React4.createElement(Text4, { color: "grey", bold: true }, selection)))));
+        return /* @__PURE__ */ React4.createElement(Box3, { marginBottom: 0, paddingX: 1, width: "100%" }, /* @__PURE__ */ React4.createElement(
+          Box3,
+          {
+            flexDirection: "column",
+            borderStyle: "single",
+            borderLeft: true,
+            borderRight: false,
+            borderTop: false,
+            borderBottom: false,
+            borderColor: "#444444",
+            paddingLeft: 2,
+            paddingRight: 0,
+            paddingTop: 1,
+            paddingBottom: 1,
+            backgroundColor: "#1a1a1a",
+            width: "100%"
+          },
+          /* @__PURE__ */ React4.createElement(Box3, { paddingX: 1 }, /* @__PURE__ */ React4.createElement(Text4, { color: "white", bold: true }, "AGENT REQUEST: RESOLVED")),
+          /* @__PURE__ */ React4.createElement(Box3, { paddingX: 1, marginTop: 1, marginBottom: 1 }, /* @__PURE__ */ React4.createElement(Text4, { color: "white" }, "Selection: ", /* @__PURE__ */ React4.createElement(Text4, { color: "grey", bold: true }, selection)))
+        ));
       }
       if (msg.isAboutRecord) {
-        return /* @__PURE__ */ React4.createElement(Box3, { marginBottom: 0, paddingX: 1, width: "100%" }, /* @__PURE__ */ React4.createElement(Box3, { flexDirection: "column", borderStyle: "round", borderColor: "gray", padding: 0, width: "100%" }, /* @__PURE__ */ React4.createElement(Box3, { paddingX: 1 }, /* @__PURE__ */ React4.createElement(Text4, { color: "white", bold: true }, "ABOUT FLUX FLOW")), /* @__PURE__ */ React4.createElement(Box3, { paddingX: 1, marginTop: 1, marginBottom: 1 }, /* @__PURE__ */ React4.createElement(Text4, null, msg.text))));
+        return /* @__PURE__ */ React4.createElement(Box3, { marginBottom: 0, paddingX: 1, width: "100%" }, /* @__PURE__ */ React4.createElement(
+          Box3,
+          {
+            flexDirection: "column",
+            borderStyle: "single",
+            borderLeft: true,
+            borderRight: false,
+            borderTop: false,
+            borderBottom: false,
+            borderColor: "#444444",
+            paddingLeft: 2,
+            paddingRight: 0,
+            paddingTop: 1,
+            paddingBottom: 1,
+            backgroundColor: "#1a1a1a",
+            width: "100%"
+          },
+          /* @__PURE__ */ React4.createElement(Box3, { paddingX: 1 }, /* @__PURE__ */ React4.createElement(Text4, { color: "white", bold: true }, "ABOUT FLUX FLOW")),
+          /* @__PURE__ */ React4.createElement(Box3, { paddingX: 1, marginTop: 1, marginBottom: 1 }, /* @__PURE__ */ React4.createElement(Text4, null, msg.text))
+        ));
       }
       if (msg.isUpdateNotification) {
-        return /* @__PURE__ */ React4.createElement(Box3, { marginBottom: 1, paddingX: 1, width: "100%" }, /* @__PURE__ */ React4.createElement(Box3, { flexDirection: "column", borderStyle: "round", borderColor: "gray", padding: 0, width: "100%" }, /* @__PURE__ */ React4.createElement(Box3, { paddingX: 1 }, /* @__PURE__ */ React4.createElement(Text4, { color: "white", bold: true }, "UPDATE AVAILABLE")), /* @__PURE__ */ React4.createElement(Box3, { paddingX: 1, marginTop: 1, marginBottom: 1 }, /* @__PURE__ */ React4.createElement(CodeRenderer, { text: msg.text, columns }))));
+        return /* @__PURE__ */ React4.createElement(Box3, { marginBottom: 1, paddingX: 1, width: "100%" }, /* @__PURE__ */ React4.createElement(
+          Box3,
+          {
+            flexDirection: "column",
+            borderStyle: "single",
+            borderLeft: true,
+            borderRight: false,
+            borderTop: false,
+            borderBottom: false,
+            borderColor: "#444444",
+            paddingLeft: 2,
+            paddingRight: 0,
+            paddingTop: 1,
+            paddingBottom: 1,
+            backgroundColor: "#1a1a1a",
+            width: "100%"
+          },
+          /* @__PURE__ */ React4.createElement(Box3, { paddingX: 1 }, /* @__PURE__ */ React4.createElement(Text4, { color: "white", bold: true }, "UPDATE AVAILABLE")),
+          /* @__PURE__ */ React4.createElement(Box3, { paddingX: 1, marginTop: 1, marginBottom: 1 }, /* @__PURE__ */ React4.createElement(CodeRenderer, { text: msg.text, columns }))
+        ));
       }
       if (msg.isHelpRecord) {
         const commandList = [
@@ -3994,17 +4101,18 @@ var init_ChatLayout = __esm({
         if (!text || text.trim() === "") {
           return /* @__PURE__ */ React4.createElement(Box3, { flexDirection: "row", width: "100%", paddingX: 1 }, /* @__PURE__ */ React4.createElement(Text4, { color: "gray" }, "\u2502 "));
         }
-        const trimmed = text.trim();
+        const animatedText = useStreamingText(text, msg.isStreaming, block.isActiveBlock);
+        const trimmed = animatedText.trim();
         const isUnordered = /^[\*\-\+]\s/.test(trimmed);
         const isOrdered = /^\d+\.\s/.test(trimmed);
-        let content = text;
+        let content = animatedText;
         if (isUnordered || isOrdered) {
           const bullet = isUnordered ? "  \u2022 " : trimmed.match(/^\d+\.\s/)[0];
           const indent = " ".repeat(bullet.length);
           const wrappedPart = wrapText(trimmed.replace(/^[\*\-\d+\.]+\s/, ""), columns - (bullet.length + 10));
           content = bullet + wrappedPart.split("\n").join("\n" + indent);
         } else {
-          content = wrapText(text, columns - 10);
+          content = wrapText(animatedText, columns - 10);
         }
         const wrappedLines = content.split("\n");
         return /* @__PURE__ */ React4.createElement(Box3, { flexDirection: "column", paddingX: 1, width: "100%" }, wrappedLines.map((wLine, idx) => /* @__PURE__ */ React4.createElement(Box3, { key: idx, flexDirection: "row", width: "100%" }, /* @__PURE__ */ React4.createElement(Text4, { color: "gray" }, "\u2502 "), /* @__PURE__ */ React4.createElement(Box3, { flexGrow: 1, marginLeft: 1 }, /* @__PURE__ */ React4.createElement(InlineMarkdown, { text: wLine, color: "gray", italic: true })))));
@@ -4017,7 +4125,8 @@ var init_ChatLayout = __esm({
         if (!text || text.trim() === "") {
           return /* @__PURE__ */ React4.createElement(Box3, { height: 1 });
         }
-        return /* @__PURE__ */ React4.createElement(Box3, { flexDirection: "column", paddingX: 1, width: "100%" }, /* @__PURE__ */ React4.createElement(CodeRenderer, { text, columns }));
+        const animatedText = useStreamingText(text, msg.isStreaming, block.isActiveBlock);
+        return /* @__PURE__ */ React4.createElement(Box3, { flexDirection: "column", paddingX: 1, width: "100%" }, /* @__PURE__ */ React4.createElement(CodeRenderer, { text: animatedText, columns }));
       }
       if (type === "table") {
         return /* @__PURE__ */ React4.createElement(Box3, { flexDirection: "column", paddingX: 1, width: "100%" }, /* @__PURE__ */ React4.createElement(TableRenderer, { buffer: text.split("\n"), terminalWidth: columns }));
@@ -4029,8 +4138,9 @@ var init_ChatLayout = __esm({
           DiffLine,
           {
             line: text,
-            columns,
-            highlightInfo: block.highlightInfo
+            pairContent: block.pairContent,
+            parentText: msg?.text,
+            columns
           }
         ), isLastLine && renderPaddingLine(true));
       }
@@ -5435,31 +5545,73 @@ var init_AskUserModal = __esm({
       });
       const s = emojiSpace(2);
       if (isSuggestingElse) {
-        return /* @__PURE__ */ React9.createElement(Box8, { flexDirection: "column", borderStyle: "round", borderColor: "gray", padding: 0, width: "100%" }, /* @__PURE__ */ React9.createElement(Box8, { paddingX: 1 }, /* @__PURE__ */ React9.createElement(Text9, { color: "white", bold: true }, "\u{1F4AC} SUGGEST SOMETHING ELSE")), /* @__PURE__ */ React9.createElement(Box8, { marginTop: 1, paddingX: 1 }, /* @__PURE__ */ React9.createElement(Text9, { italic: true, color: "gray" }, "Replying to: ", question)), /* @__PURE__ */ React9.createElement(Box8, { marginTop: 1, paddingX: 1, flexDirection: "row" }, /* @__PURE__ */ React9.createElement(Text9, { color: "white", bold: true }, "\u{1F4A0} "), /* @__PURE__ */ React9.createElement(
-          TextInput3,
-          {
-            value: customInput,
-            onChange: setCustomInput,
-            onSubmit: () => onResolve(customInput)
-          }
-        )), /* @__PURE__ */ React9.createElement(Box8, { marginTop: 1, paddingX: 1, marginBottom: 1 }, /* @__PURE__ */ React9.createElement(Text9, { color: "gray", italic: true }, "(Press Enter to send)")));
-      }
-      return /* @__PURE__ */ React9.createElement(Box8, { flexDirection: "column", borderStyle: "round", borderColor: "gray", padding: 0, width: "100%" }, /* @__PURE__ */ React9.createElement(Box8, { paddingX: 1, marginBottom: 1 }, /* @__PURE__ */ React9.createElement(Text9, { color: "white", bold: true }, "AGENT REQUEST: ACTION REQUIRED")), /* @__PURE__ */ React9.createElement(Box8, { paddingX: 1, marginBottom: 1 }, /* @__PURE__ */ React9.createElement(Text9, { bold: true, color: "white" }, question)), /* @__PURE__ */ React9.createElement(Box8, { flexDirection: "column", width: "100%" }, allOptions.map((opt, idx) => {
-        const isSelected = idx === selectedIndex;
         return /* @__PURE__ */ React9.createElement(
           Box8,
           {
-            key: opt.id,
             flexDirection: "column",
-            width: "100%",
-            backgroundColor: isSelected ? "#2a2a2a" : void 0,
-            paddingX: 1,
-            marginBottom: idx === allOptions.length - 1 ? 0 : 1
+            borderStyle: "single",
+            borderLeft: true,
+            borderRight: false,
+            borderTop: false,
+            borderBottom: false,
+            borderColor: "#444444",
+            paddingLeft: 2,
+            paddingRight: 0,
+            paddingTop: 1,
+            paddingBottom: 1,
+            backgroundColor: "#1a1a1a",
+            width: "100%"
           },
-          /* @__PURE__ */ React9.createElement(Text9, { color: isSelected ? "white" : "grey", bold: isSelected }, isSelected ? "\u276F " : "  ", opt.label),
-          opt.description && /* @__PURE__ */ React9.createElement(Box8, { marginLeft: 4 }, /* @__PURE__ */ React9.createElement(Text9, { color: "gray", italic: true }, opt.description))
+          /* @__PURE__ */ React9.createElement(Box8, { paddingX: 1 }, /* @__PURE__ */ React9.createElement(Text9, { color: "white", bold: true }, "\u{1F4AC} SUGGEST SOMETHING ELSE")),
+          /* @__PURE__ */ React9.createElement(Box8, { marginTop: 1, paddingX: 1 }, /* @__PURE__ */ React9.createElement(Text9, { italic: true, color: "gray" }, "Replying to: ", question)),
+          /* @__PURE__ */ React9.createElement(Box8, { marginTop: 1, paddingX: 1, flexDirection: "row" }, /* @__PURE__ */ React9.createElement(Text9, { color: "white", bold: true }, "\u{1F4A0} "), /* @__PURE__ */ React9.createElement(
+            TextInput3,
+            {
+              value: customInput,
+              onChange: setCustomInput,
+              onSubmit: () => onResolve(customInput)
+            }
+          )),
+          /* @__PURE__ */ React9.createElement(Box8, { marginTop: 1, paddingX: 1, marginBottom: 1 }, /* @__PURE__ */ React9.createElement(Text9, { color: "gray", italic: true }, "(Press Enter to send)"))
         );
-      })), /* @__PURE__ */ React9.createElement(Box8, { paddingX: 1, marginTop: 1, marginBottom: 1 }, /* @__PURE__ */ React9.createElement(Text9, { color: "gray", italic: true }, "(Use Arrows to navigate, Enter to confirm)")));
+      }
+      return /* @__PURE__ */ React9.createElement(
+        Box8,
+        {
+          flexDirection: "column",
+          borderStyle: "single",
+          borderLeft: true,
+          borderRight: false,
+          borderTop: false,
+          borderBottom: false,
+          borderColor: "#444444",
+          paddingLeft: 2,
+          paddingRight: 0,
+          paddingTop: 1,
+          paddingBottom: 1,
+          backgroundColor: "#1a1a1a",
+          width: "100%"
+        },
+        /* @__PURE__ */ React9.createElement(Box8, { paddingX: 1, marginBottom: 1 }, /* @__PURE__ */ React9.createElement(Text9, { color: "white", bold: true }, "AGENT REQUEST: ACTION REQUIRED")),
+        /* @__PURE__ */ React9.createElement(Box8, { paddingX: 1, marginBottom: 1 }, /* @__PURE__ */ React9.createElement(Text9, { bold: true, color: "white" }, question)),
+        /* @__PURE__ */ React9.createElement(Box8, { flexDirection: "column", width: "100%" }, allOptions.map((opt, idx) => {
+          const isSelected = idx === selectedIndex;
+          return /* @__PURE__ */ React9.createElement(
+            Box8,
+            {
+              key: opt.id,
+              flexDirection: "column",
+              width: "100%",
+              backgroundColor: isSelected ? "#2a2a2a" : void 0,
+              paddingX: 1,
+              marginBottom: idx === allOptions.length - 1 ? 0 : 1
+            },
+            /* @__PURE__ */ React9.createElement(Text9, { color: isSelected ? "white" : "grey", bold: isSelected }, isSelected ? "\u276F " : "  ", opt.label),
+            opt.description && /* @__PURE__ */ React9.createElement(Box8, { marginLeft: 4 }, /* @__PURE__ */ React9.createElement(Text9, { color: "gray", italic: true }, opt.description))
+          );
+        })),
+        /* @__PURE__ */ React9.createElement(Box8, { paddingX: 1, marginTop: 1, marginBottom: 1 }, /* @__PURE__ */ React9.createElement(Text9, { color: "gray", italic: true }, "(Use Arrows to navigate, Enter to confirm)"))
+      );
     };
     AskUserModal_default = AskUserModal;
   }
@@ -13915,18 +14067,50 @@ function App({ args = [] }) {
     const completed = [];
     const active = [];
     const columns = terminalSize.columns || 80;
-    messages.slice(0, completedIndex).forEach((msg) => {
+    const completedMsgs = messages.slice(0, completedIndex);
+    const activeMsgs = messages.slice(completedIndex);
+    const seenAskSelections = /* @__PURE__ */ new Set();
+    const filterDuplicates = (msgList) => {
+      return msgList.filter((msg) => {
+        if (msg.isAskRecord) {
+          const selectionMatch = msg.text?.match(/Selection: (.*)/);
+          const selection = selectionMatch ? selectionMatch[1].trim() : "";
+          if (selection) {
+            if (seenAskSelections.has(selection)) {
+              return false;
+            }
+            seenAskSelections.add(selection);
+          }
+        }
+        return true;
+      });
+    };
+    const uniqueCompleted = filterDuplicates(completedMsgs);
+    const uniqueActive = filterDuplicates(activeMsgs);
+    uniqueCompleted.forEach((msg) => {
       const parsed = parseMessageToBlocks(msg, columns);
       completed.push(...parsed.completed);
       completed.push(...parsed.active);
     });
-    messages.slice(completedIndex).forEach((msg) => {
+    uniqueActive.forEach((msg) => {
       const parsed = parseMessageToBlocks(msg, columns);
       completed.push(...parsed.completed);
       active.push(...parsed.active);
     });
-    const MAX_BLOCKS = 1e3;
+    const MAX_BLOCKS = 5e9;
     const slicedCompleted = completed.slice(Math.max(0, completed.length - MAX_BLOCKS));
+    if (slicedCompleted.length >= 75e3) {
+      slicedCompleted.push({
+        key: "memory-warning-block",
+        msg: {
+          role: "system",
+          text: `\u26A0\uFE0F MEMORY WARNING: CHAT IS GETTING VERY LONG`,
+          subText: `This session has reached ${slicedCompleted.length} blocks. To maintain optimal performance and prevent high memory usage, it is highly recommended to save and start a clean chat with /clear.`,
+          isHomeWarning: true
+        },
+        type: "full-message"
+      });
+    }
     return {
       completed: slicedCompleted,
       active
@@ -14459,9 +14643,9 @@ function App({ args = [] }) {
     { cmd: "/quit", desc: "Exit and shutdown Flux" },
     { cmd: "/help", desc: "Show all available commands" },
     ...parsedArgs.playground ? [{ cmd: "/move", desc: "Move playground directory to original CWD/playground-export" }] : [],
+    { cmd: "/resume", desc: "Load previous session" },
     { cmd: "/compress", desc: "Summarize and compress chat history" },
     { cmd: "/clear", desc: "Clear terminal screen" },
-    { cmd: "/resume", desc: "Load previous session" },
     { cmd: "/revert", desc: "Revert codebase back to a checkpoint" },
     { cmd: "/gemini", desc: "Get a happy message from Gemini CLI" },
     { cmd: "/save", desc: "Force save current chat" },
@@ -15691,20 +15875,27 @@ ${timestamp}` };
               },
               onAskUser: async (question, options) => {
                 return new Promise((resolve) => {
+                  let resolvedFlag = false;
                   setPendingAsk({
                     question,
                     options,
                     resolve: (val) => {
-                      setMessages((prev) => [
-                        ...prev,
-                        {
-                          id: "ask-" + Date.now(),
-                          role: "system",
-                          text: `\u{1F4AC} **Ask User**
+                      if (resolvedFlag) return;
+                      resolvedFlag = true;
+                      setMessages((prev) => {
+                        const hasAskRecord = prev.some((m) => m.isAskRecord && m.text?.includes(`Selection: ${val}`));
+                        if (hasAskRecord) return prev;
+                        return [
+                          ...prev,
+                          {
+                            id: "ask-" + Date.now(),
+                            role: "system",
+                            text: `\u{1F4AC} **Ask User**
 Selection: ${val}`,
-                          isAskRecord: true
-                        }
-                      ]);
+                            isAskRecord: true
+                          }
+                        ];
+                      });
                       resolve(val);
                     }
                   });
@@ -17350,7 +17541,7 @@ var init_app = __esm({
 // src/cli.jsx
 import { spawn as spawn3 } from "child_process";
 import { fileURLToPath as fileURLToPath2 } from "url";
-var HEAP_LIMIT = 4096;
+var HEAP_LIMIT = 6144;
 var isBundled = fileURLToPath2(import.meta.url).endsWith(".js");
 if (isBundled && !process.execArgv.some((arg) => arg.includes("max-old-space-size"))) {
   const cp = spawn3(process.execPath, [

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "fluxflow-cli",
-    "version": "2.13.1",
-    "date": "2026-06-26",
+    "version": "2.13.2",
+    "date": "2026-06-27",
     "description": "A high-fidelity agentic terminal assistant for the Flux Era.",
     "keywords": [
         "ai",
@@ -37,11 +37,12 @@
     },
     "scripts": {
         "start": "tsx ./src/cli.jsx",
-        "build": "esbuild ./src/cli.jsx --bundle --platform=node --format=esm --outfile=./dist/fluxflow.js --external:react --external:ink --external:chalk --external:fs-extra --external:gradient-string --external:ink-text-input --external:ink-select-input --external:@google/genai --external:zod --external:nanoid --external:puppeteer --external:pdf-lib --external:node-pty --external:html-to-docx --external:typescript --external:ws --external:web-tree-sitter"
+        "build": "esbuild ./src/cli.jsx --bundle --platform=node --format=esm --outfile=./dist/fluxflow.js --external:react --external:ink --external:chalk --external:fs-extra --external:gradient-string --external:ink-text-input --external:ink-select-input --external:@google/genai --external:zod --external:nanoid --external:puppeteer --external:pdf-lib --external:node-pty --external:html-to-docx --external:typescript --external:ws --external:web-tree-sitter --external:diff"
     },
     "dependencies": {
         "@google/genai": "^1.52.0",
         "chalk": "^5.6.2",
+        "diff": "^9.0.0",
         "fs-extra": "^11.3.4",
         "gradient-string": "^3.0.0",
         "html-to-docx": "^1.8.0",