@meshxdata/fops 0.1.52 → 0.1.53

package/src/web/frontend/src/components/ChatView.jsx

@@ -0,0 +1,910 @@
+import React, { useEffect, useRef, useState } from "react";
+const MAX_RENDER_CONTENT_CHARS = 24_000;
+const MESHX_ASCII = [
+  "███╗   ███╗███████╗███████╗██╗  ██╗██╗  ██╗",
+  "████╗ ████║██╔════╝██╔════╝██║  ██║╚██╗██╔╝",
+  "██╔████╔██║█████╗  ███████╗███████║ ╚███╔╝ ",
+  "██║╚██╔╝██║██╔══╝  ╚════██║██╔══██║ ██╔██╗ ",
+  "██║ ╚═╝ ██║███████╗███████║██║  ██║██╔╝ ██╗",
+  "╚═╝     ╚═╝╚══════╝╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝",
+];
+
+/* ===== Mermaid Diagram ===== */
+let mermaidLoaded = false;
+let mermaidLoadFailed = false;
+let mermaidLoadPromise = null;
+
+function loadMermaid() {
+  if (mermaidLoaded) return Promise.resolve();
+  if (mermaidLoadFailed) return Promise.reject(new Error("Mermaid CDN failed to load"));
+  if (mermaidLoadPromise) return mermaidLoadPromise;
+  mermaidLoadPromise = new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js";
+    script.onload = () => {
+      window.mermaid.initialize({ startOnLoad: false, theme: "dark" });
+      mermaidLoaded = true;
+      resolve();
+    };
+    script.onerror = () => {
+      mermaidLoadFailed = true;
+      reject(new Error("Failed to load mermaid library from CDN"));
+    };
+    document.head.appendChild(script);
+  });
+  return mermaidLoadPromise;
+}
+
+function MermaidDiagram({ code }) {
+  const viewportRef = useRef(null);
+  const innerRef = useRef(null);
+  const idRef = useRef(`mermaid-${Math.random().toString(36).slice(2, 9)}`);
+  const transformRef = useRef({ zoom: 1, panX: 0, panY: 0 });
+  const dragRef = useRef(null);
+  const [svg, setSvg] = useState(null);
+  const [error, setError] = useState(null);
+  const [showEditor, setShowEditor] = useState(false);
+  const [editCode, setEditCode] = useState(code);
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => { setEditCode(code); }, [code]);
+
+  async function renderCode(src) {
+    try {
+      await loadMermaid();
+      if (!window.mermaid) return null;
+      const { svg: rendered } = await window.mermaid.render(
+        `${idRef.current}-${Date.now()}`, src,
+      );
+      setError(null);
+      return rendered;
+    } catch (e) {
+      setError(e.message);
+      return null;
+    }
+  }
+
+  useEffect(() => {
+    let cancelled = false;
+    renderCode(code).then((s) => { if (!cancelled && s) setSvg(s); });
+    return () => { cancelled = true; };
+  }, [code]);
+
+  useEffect(() => {
+    if (!showEditor) return;
+    const t = setTimeout(() => {
+      renderCode(editCode).then((s) => { if (s) setSvg(s); });
+    }, 400);
+    return () => clearTimeout(t);
+  }, [editCode, showEditor]);
+
+  function applyTransform() {
+    const el = innerRef.current;
+    if (!el) return;
+    const { zoom, panX, panY } = transformRef.current;
+    el.style.transform = `translate(${panX}px, ${panY}px) scale(${zoom})`;
+  }
+
+  useEffect(() => {
+    const el = viewportRef.current;
+    if (!el) return;
+    const onWheel = (e) => {
+      e.preventDefault();
+      const rect = el.getBoundingClientRect();
+      const cx = e.clientX - rect.left, cy = e.clientY - rect.top;
+      const t = transformRef.current;
+      const factor = e.deltaY > 0 ? 0.9 : 1.1;
+      const nz = Math.min(Math.max(t.zoom * factor, 0.1), 10);
+      t.panX = cx - (cx - t.panX) * (nz / t.zoom);
+      t.panY = cy - (cy - t.panY) * (nz / t.zoom);
+      t.zoom = nz;
+      applyTransform();
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, []);
+
+  useEffect(() => {
+    const onMove = (e) => {
+      const d = dragRef.current;
+      if (!d) return;
+      transformRef.current.panX = d.px + (e.clientX - d.x);
+      transformRef.current.panY = d.py + (e.clientY - d.y);
+      applyTransform();
+    };
+    const onUp = () => { dragRef.current = null; };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+    return () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseup", onUp); };
+  }, []);
+
+  function onViewportMouseDown(e) {
+    if (e.button !== 0) return;
+    const t = transformRef.current;
+    dragRef.current = { x: e.clientX, y: e.clientY, px: t.panX, py: t.panY };
+    e.preventDefault();
+  }
+
+  function resetView() { transformRef.current = { zoom: 1, panX: 0, panY: 0 }; applyTransform(); }
+  function zoomBy(f) { transformRef.current.zoom = Math.min(Math.max(transformRef.current.zoom * f, 0.1), 10); applyTransform(); }
+
+  function handleCopy() {
+    navigator.clipboard?.writeText(showEditor ? editCode : code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
+
+  function openInMermaidLive() {
+    const src = showEditor ? editCode : code;
+    try {
+      const state = JSON.stringify({ code: src, mermaid: { theme: "dark" }, autoSync: true, updateDiagram: true });
+      window.open(`https://mermaid.live/edit#base64:${btoa(unescape(encodeURIComponent(state)))}`, "_blank");
+    } catch { window.open("https://mermaid.live", "_blank"); }
+  }
+
+  if (error && !svg) {
+    return (
+      <div className="my-3 rounded-xl overflow-hidden border border-red-500/20 bg-red-500/5 px-4 py-3 text-xs text-red-400 font-mono">
+        Mermaid error: {error}
+        <pre className="mt-2 text-[#4e4e63]">{code}</pre>
+      </div>
+    );
+  }
+
+  if (!svg) {
+    return (
+      <div className="my-3 rounded-xl border border-[#1a1a28] bg-[#0a0a10] px-4 py-3 text-xs text-[#4e4e63] animate-pulse font-mono">
+        Rendering diagram...
+      </div>
+    );
+  }
+
+  return (
+    <div className="my-3 rounded-xl overflow-hidden border border-[#1a1a28] bg-[#0a0a10]">
+      <div className="flex items-center justify-between px-3 py-1.5 bg-[#0e0e16] border-b border-[#1a1a28]">
+        <span className="text-[9px] font-mono text-[#4e4e63] uppercase tracking-widest">mermaid</span>
+        <div className="flex items-center gap-0.5">
+          <button onClick={() => zoomBy(1 / 1.3)} className="px-1.5 py-0.5 text-[12px] text-[#3a3a50] hover:text-[#f97316] transition-colors" title="Zoom out">&minus;</button>
+          <button onClick={resetView} className="px-1.5 py-0.5 text-[10px] text-[#3a3a50] hover:text-[#f97316] transition-colors font-mono" title="Reset">1:1</button>
+          <button onClick={() => zoomBy(1.3)} className="px-1.5 py-0.5 text-[12px] text-[#3a3a50] hover:text-[#f97316] transition-colors" title="Zoom in">+</button>
+          <span className="w-px h-3 bg-[#1e1e2e] mx-1" />
+          <button onClick={handleCopy} className="px-1.5 py-0.5 text-[10px] font-mono text-[#3a3a50] hover:text-[#f97316] transition-colors">
+            {copied ? "copied" : "copy"}
+          </button>
+          <button onClick={() => { setShowEditor((v) => !v); }} className={`px-1.5 py-0.5 text-[10px] font-mono transition-colors ${showEditor ? "text-[#f97316]" : "text-[#3a3a50] hover:text-[#f97316]"}`}>
+            edit
+          </button>
+          <button onClick={openInMermaidLive} className="px-1.5 py-0.5 text-[10px] font-mono text-[#3a3a50] hover:text-[#f97316] transition-colors" title="Open in Mermaid Live">
+            &#8599;
+          </button>
+        </div>
+      </div>
+
+      <div className="flex" style={{ minHeight: showEditor ? 320 : undefined }}>
+        {showEditor && (
+          <div className="w-1/2 flex flex-col border-r border-[#1a1a28]" style={{ minHeight: 320 }}>
+            <textarea
+              className="flex-1 bg-transparent text-[12px] font-mono text-[#c0bfc6] p-3 resize-none focus:outline-none leading-relaxed"
+              value={editCode}
+              onChange={(e) => setEditCode(e.target.value)}
+              spellCheck={false}
+            />
+            {error && (
+              <div className="px-3 py-1.5 text-[10px] text-red-400 border-t border-[#1a1a28] font-mono truncate">{error}</div>
+            )}
+          </div>
+        )}
+        <div
+          ref={viewportRef}
+          className={`overflow-hidden cursor-grab active:cursor-grabbing ${showEditor ? "w-1/2" : "w-full"}`}
+          style={{ minHeight: showEditor ? 320 : 80 }}
+          onMouseDown={onViewportMouseDown}
+        >
+          <div ref={innerRef} className="p-4" style={{ transformOrigin: "0 0" }} dangerouslySetInnerHTML={{ __html: svg }} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ===== Markdown Renderer ===== */
+
+function renderInline(text) {
+  if (!text) return "";
+
+  const parts = [];
+  let remaining = text;
+  let key = 0;
+
+  while (remaining.length > 0) {
+    // Bold
+    const boldMatch = remaining.match(/^(.*?)\*\*(.+?)\*\*/);
+    if (boldMatch && boldMatch[1].length < remaining.length) {
+      if (boldMatch[1]) parts.push(boldMatch[1]);
+      parts.push(<strong key={`b-${key++}`} className="font-semibold text-[#e0dfe4]">{boldMatch[2]}</strong>);
+      remaining = remaining.slice(boldMatch[0].length);
+      continue;
+    }
+
+    // Inline code
+    const codeMatch = remaining.match(/^(.*?)`([^`]+)`/);
+    if (codeMatch && codeMatch[1].length < remaining.length) {
+      if (codeMatch[1]) parts.push(codeMatch[1]);
+      parts.push(
+        <code key={`c-${key++}`} className="bg-[#f97316]/8 text-[#fb923c] px-1.5 py-0.5 rounded text-[11px] font-mono">
+          {codeMatch[2]}
+        </code>
+      );
+      remaining = remaining.slice(codeMatch[0].length);
+      continue;
+    }
+
+    // Link
+    const linkMatch = remaining.match(/^(.*?)\[([^\]]+)\]\(([^)]+)\)/);
+    if (linkMatch && linkMatch[1].length < remaining.length) {
+      if (linkMatch[1]) parts.push(linkMatch[1]);
+      parts.push(
+        <a key={`l-${key++}`} href={linkMatch[3]} target="_blank" rel="noopener"
+          className="text-[#f97316] underline decoration-[#f97316]/30 underline-offset-2 hover:text-[#fb923c] hover:decoration-[#fb923c]/50 transition-colors"
+        >
+          {linkMatch[2]}
+        </a>
+      );
+      remaining = remaining.slice(linkMatch[0].length);
+      continue;
+    }
+
+    parts.push(remaining);
+    break;
+  }
+
+  return parts;
+}
+
+function parseMemoryResultLine(line) {
+  const match = line.match(/^([a-f0-9]{8}):\s*(.+?)\s+\[(.+?)\]\s+\(score:\s*([^)]+)\)$/i);
+  if (!match) return null;
+  const [, id, summary, tagsRaw, score] = match;
+  const tags = tagsRaw.split(",").map((t) => t.trim()).filter(Boolean);
+  return { id, summary, tags, score: score.trim() };
+}
+
+function parseCommandLogBlock(text) {
+  if (!text || typeof text !== "string") return null;
+  const match = text.match(
+    /^Fetching logs\s*\n([^\n]+)\n\nCommand (succeeded|failed)\n([^\n]+)\n([\s\S]*)$/i,
+  );
+  if (!match) return null;
+  const [, requestedCommand, statusWord, executedCommand, rawOutput] = match;
+  return {
+    requestedCommand: requestedCommand.trim(),
+    executedCommand: executedCommand.trim(),
+    succeeded: String(statusWord).toLowerCase() === "succeeded",
+    output: String(rawOutput || "").trim(),
+  };
+}
+
+function normalizeLogOutput(output) {
+  if (!output) return "";
+  // If logs arrive as one wrapped line, split on repeated docker log prefixes.
+  return String(output)
+    .replace(/\s([a-z0-9][a-z0-9_.-]*-\d+\s+\|)/gi, "\n$1")
+    .replace(/\n{3,}/g, "\n\n")
+    .trim();
+}
+
+function CommandLogCard({ block }) {
+  const normalized = normalizeLogOutput(block.output);
+  const lines = normalized ? normalized.split("\n") : [];
+  const MAX_LOG_LINES = 80;
+  const truncated = lines.length > MAX_LOG_LINES;
+  const shownLines = truncated ? lines.slice(-MAX_LOG_LINES) : lines;
+
+  return (
+    <div className="my-3 rounded-xl overflow-hidden border border-[#1a1a28] bg-[#0a0a10]">
+      <div className="flex items-center justify-between px-4 py-2 bg-[#0e0e16] border-b border-[#1a1a28]">
+        <div className="flex items-center gap-2">
+          <span className="text-[9px] font-mono uppercase tracking-widest text-[#4e4e63]">command logs</span>
+          <span
+            className={`text-[10px] font-mono px-1.5 py-0.5 rounded border ${
+              block.succeeded
+                ? "text-emerald-300 border-emerald-400/35 bg-emerald-500/10"
+                : "text-red-300 border-red-400/35 bg-red-500/10"
+            }`}
+          >
+            {block.succeeded ? "success" : "failed"}
+          </span>
+        </div>
+        <span className="text-[10px] font-mono text-[#6b6b80]">{shownLines.length} lines</span>
+      </div>
+      <div className="px-4 py-2 border-b border-[#1a1a28]/70 text-[11px] font-mono text-[#8b8b9e]">
+        <span className="text-[#6b6b80] mr-2">cmd</span>
+        <span>{block.executedCommand || block.requestedCommand}</span>
+      </div>
+      <pre className="px-4 py-3 text-[12px] font-mono leading-relaxed overflow-x-auto text-[#c0bfc6]">
+        <code>{shownLines.join("\n") || "(no output)"}</code>
+      </pre>
+      {truncated && (
+        <div className="px-4 py-2 border-t border-[#1a1a28]/70 text-[11px] font-mono text-[#6b6b80]">
+          showing last {MAX_LOG_LINES} of {lines.length} lines
+        </div>
+      )}
+    </div>
+  );
+}
+
+function renderMarkdown(text) {
+  if (!text || typeof text !== "string") return text || "";
+
+  const lines = text.split("\n");
+  const elements = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    // Fenced code block
+    if (line.trimStart().startsWith("```")) {
+      const lang = line.trimStart().slice(3).trim();
+      const codeLines = [];
+      i++;
+      while (i < lines.length && !lines[i].trimStart().startsWith("```")) {
+        codeLines.push(lines[i]);
+        i++;
+      }
+      i++;
+
+      if (lang === "mermaid") {
+        elements.push(<MermaidDiagram key={`mermaid-${elements.length}`} code={codeLines.join("\n")} />);
+        continue;
+      }
+
+      elements.push(
+        <div key={`code-${elements.length}`} className="my-3 rounded-xl overflow-hidden border border-[#1a1a28] bg-[#0a0a10]">
+          <div className="flex items-center justify-between px-4 py-1.5 bg-[#0e0e16] border-b border-[#1a1a28]">
+            <span className="text-[9px] font-mono text-[#4e4e63] uppercase tracking-widest">{lang || "code"}</span>
+            <button
+              className="text-[10px] font-mono text-[#3a3a50] hover:text-[#f97316] transition-colors"
+              onClick={() => navigator.clipboard?.writeText(codeLines.join("\n"))}
+            >
+              copy
+            </button>
+          </div>
+          <pre className="px-4 py-3 text-[12px] font-mono overflow-x-auto leading-relaxed">
+            <code className="text-[#c0bfc6]">{codeLines.join("\n")}</code>
+          </pre>
+        </div>
+      );
+      continue;
+    }
+
+    // Horizontal rule
+    if (/^(\s*[-*_]){3,}\s*$/.test(line)) {
+      elements.push(<hr key={`hr-${elements.length}`} className="border-[#1a1a28] my-3" />);
+      i++;
+      continue;
+    }
+
+    // Headers
+    const headerMatch = line.match(/^(#{1,3})\s+(.*)/);
+    if (headerMatch) {
+      const level = headerMatch[1].length;
+      const text = headerMatch[2];
+      const styles = [
+        "text-base font-bold text-[#f97316] mt-3 mb-1.5",
+        "text-sm font-bold text-[#818cf8] mt-2.5 mb-1",
+        "text-sm font-semibold text-[#fbbf24] mt-2 mb-1",
+      ];
+      elements.push(
+        <div key={`h-${elements.length}`} className={styles[level - 1]}>
+          {renderInline(text)}
+        </div>
+      );
+      i++;
+      continue;
+    }
+
+    // Unordered list
+    const ulMatch = line.match(/^(\s*)([-*])\s+(.*)/);
+    if (ulMatch) {
+      const indent = Math.floor(ulMatch[1].length / 2);
+      elements.push(
+        <div key={`ul-${elements.length}`} className="flex gap-2.5 text-sm" style={{ paddingLeft: `${(indent + 1) * 14}px` }}>
+          <span className="text-[#f97316] text-[10px] mt-1 shrink-0">&#x25CF;</span>
+          <span>{renderInline(ulMatch[3])}</span>
+        </div>
+      );
+      i++;
+      continue;
+    }
+
+    // Ordered list
+    const olMatch = line.match(/^(\s*)(\d+)\.\s+(.*)/);
+    if (olMatch) {
+      const indent = Math.floor(olMatch[1].length / 2);
+      elements.push(
+        <div key={`ol-${elements.length}`} className="flex gap-2.5 text-sm" style={{ paddingLeft: `${(indent + 1) * 14}px` }}>
+          <span className="text-[#f97316] text-xs font-mono shrink-0">{olMatch[2]}.</span>
+          <span>{renderInline(olMatch[3])}</span>
+        </div>
+      );
+      i++;
+      continue;
+    }
+
+    // Blockquote
+    const bqMatch = line.match(/^>\s?(.*)/);
+    if (bqMatch) {
+      elements.push(
+        <div key={`bq-${elements.length}`} className="border-l-2 border-[#818cf8]/30 pl-3 text-[#6e7a8a] italic text-sm">
+          {renderInline(bqMatch[1])}
+        </div>
+      );
+      i++;
+      continue;
+    }
+
+    // Table (pipe-delimited rows)
+    if (line.trim().startsWith("|") && line.trim().endsWith("|")) {
+      const tableRows = [];
+      while (i < lines.length && lines[i].trim().startsWith("|") && lines[i].trim().endsWith("|")) {
+        tableRows.push(lines[i]);
+        i++;
+      }
+      // Need at least header + separator + 1 data row
+      if (tableRows.length >= 3 && /^[\s|:*-]+$/.test(tableRows[1])) {
+        const parseCells = (row) =>
+          row.trim().replace(/^\|/, "").replace(/\|$/, "").split("|").map((c) => c.trim());
+        const headers = parseCells(tableRows[0]);
+        const dataRows = tableRows.slice(2).map(parseCells);
+
+        elements.push(
+          <div key={`tbl-${elements.length}`} className="my-3 overflow-x-auto rounded-xl border border-[#1a1a28]">
+            <table className="w-full text-[12px] font-mono border-collapse">
+              <thead>
+                <tr className="bg-[#0e0e16]">
+                  {headers.map((h, hi) => (
+                    <th key={hi} className="text-left px-4 py-2 text-[10px] font-semibold text-[#4e4e63] uppercase tracking-widest border-b border-[#1a1a28]">
+                      {renderInline(h)}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {dataRows.map((row, ri) => (
+                  <tr key={ri} className={ri % 2 === 0 ? "bg-[#0a0a10]" : "bg-[#0c0c14]"}>
+                    {row.map((cell, ci) => (
+                      <td key={ci} className="px-4 py-1.5 text-[#8b8b9e] border-b border-[#1a1a28]/50">
+                        {renderInline(cell)}
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        );
+      } else {
+        // Not a valid table, render rows as paragraphs
+        for (const row of tableRows) {
+          elements.push(
+            <div key={`p-${elements.length}`} className="text-sm">
+              {renderInline(row)}
+            </div>
+          );
+        }
+      }
+      continue;
+    }
+
+    // Empty line
+    if (line.trim() === "") {
+      elements.push(<div key={`blank-${elements.length}`} className="h-2" />);
+      i++;
+      continue;
+    }
+
+    // Memory search block (tool output)
+    const trimmed = line.trim();
+    if ((trimmed === "✓" || trimmed === "✔") && lines[i + 1]?.trim().toLowerCase() === "memory") {
+      i += 2; // consume "✓" and "memory"
+      const items = [];
+      while (i < lines.length) {
+        const current = lines[i].trim();
+        if (!current) {
+          i++;
+          continue;
+        }
+        const parsed = parseMemoryResultLine(current);
+        if (!parsed) break;
+        items.push(parsed);
+        i++;
+      }
+
+      elements.push(
+        <div key={`memory-${elements.length}`} className="my-2 rounded-xl border border-emerald-500/20 bg-emerald-500/5">
+          <div className="px-3 py-2 border-b border-emerald-500/20 text-[10px] font-mono uppercase tracking-widest text-emerald-300">
+            Memory
+          </div>
+          <div className="p-3 space-y-2">
+            {items.length > 0 ? (
+              items.map((item, idx) => (
+                <div key={`${item.id}-${idx}`} className="rounded-lg border border-[#1a1a28] bg-[#0a0a10] px-3 py-2">
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className="text-[10px] font-mono text-[#fbbf24]">{item.id}</span>
+                    <span className="text-[10px] text-[#4e4e63]">score {item.score}</span>
+                  </div>
+                  <div className="text-sm text-[#a0a0b0]">{item.summary}</div>
+                  {item.tags.length > 0 && (
+                    <div className="mt-1 text-[10px] text-[#4e4e63] font-mono">
+                      {item.tags.map((t) => `#${t}`).join(" ")}
+                    </div>
+                  )}
+                </div>
+              ))
+            ) : (
+              <div className="text-sm text-[#8b8b9e]">No memory entries parsed.</div>
+            )}
+          </div>
+        </div>
+      );
+      continue;
+    }
+
+    // Regular paragraph
+    elements.push(
+      <div key={`p-${elements.length}`} className="text-sm">
+        {renderInline(line)}
+      </div>
+    );
+    i++;
+  }
+
+  return elements;
+}
+
+function parseAttachmentPreviews(content) {
+  const attachments = [];
+  let cleaned = String(content || "");
+
+  const fullBlockPattern =
+    /\[Attached file:\s*(.*?)\s*\|\s*type:\s*([^|]+?)\s*\|\s*size:\s*(\d+)\s*bytes\](?:\n\[Truncated[^\n]*\])?\n\n```[a-zA-Z0-9_-]*\n[\s\S]*?\n```/g;
+  cleaned = cleaned.replace(fullBlockPattern, (_m, name, type, size) => {
+    attachments.push({
+      name: String(name || "").trim(),
+      type: String(type || "").trim(),
+      sizeBytes: Number(size),
+    });
+    return "";
+  });
+
+  const markerPattern = /\[Attached file:\s*([^\]\n]+)\]/g;
+  cleaned = cleaned.replace(markerPattern, (_m, name) => {
+    attachments.push({ name: String(name || "").trim() });
+    return "";
+  });
+
+  const deduped = attachments.filter(
+    (item, idx) => attachments.findIndex((other) => other.name === item.name) === idx,
+  );
+
+  return {
+    cleanContent: cleaned.replace(/\n{3,}/g, "\n\n").trim(),
+    attachments: deduped,
+  };
+}
+
+/* ===== Message Components ===== */
+
+function Message({ role, content }) {
+  const isUser = role === "user";
+  const [ttsBusy, setTtsBusy] = useState(false);
+  const [ttsError, setTtsError] = useState("");
+  const safeContent = typeof content === "string" && content.length > MAX_RENDER_CONTENT_CHARS
+    ? content.slice(0, MAX_RENDER_CONTENT_CHARS)
+      + `\n\n[message truncated to ${MAX_RENDER_CONTENT_CHARS} chars for UI stability]`
+    : content;
+  const { cleanContent, attachments } = parseAttachmentPreviews(safeContent);
+  const commandLogBlock = parseCommandLogBlock(typeof safeContent === "string" ? safeContent : "");
+
+  const speakWithBrowser = () => {
+    if (typeof window === "undefined" || !window.speechSynthesis) return false;
+    try {
+      window.speechSynthesis.cancel();
+      const utterance = new SpeechSynthesisUtterance(String(content || ""));
+      utterance.rate = 1;
+      utterance.pitch = 1;
+      window.speechSynthesis.speak(utterance);
+      return true;
+    } catch {
+      return false;
+    }
+  };
+
+  const handleSpeak = async () => {
+    if (isUser || !content || ttsBusy) return;
+    setTtsBusy(true);
+    setTtsError("");
+    try {
+      const res = await fetch("/api/tts", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ text: String(content) }),
+      });
+      if (!res.ok) {
+        if (speakWithBrowser()) return;
+        const body = await res.json().catch(() => ({}));
+        throw new Error(body?.error || `TTS failed (${res.status})`);
+      }
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const audio = new Audio(url);
+      audio.onended = () => URL.revokeObjectURL(url);
+      audio.onerror = () => URL.revokeObjectURL(url);
+      await audio.play();
+    } catch (err) {
+      if (!speakWithBrowser()) {
+        setTtsError(err?.message || "Could not play TTS");
+      }
+    } finally {
+      setTtsBusy(false);
+    }
+  };
+
+  return (
+    <div className="animate-fade-in">
+      <div className="flex items-center gap-2 mb-1.5">
+        <div className={`text-[10px] font-semibold uppercase tracking-widest ${isUser ? "text-[#f97316]" : "text-[#818cf8]"}`}>
+          {isUser ? "You" : "Agent"}
+        </div>
+        {!isUser && (
+          <button
+            type="button"
+            onClick={handleSpeak}
+            disabled={ttsBusy}
+            className={`text-[10px] font-mono px-1.5 py-0.5 rounded border transition-colors ${
+              ttsBusy
+                ? "text-[#4e4e63] border-[#26263a] cursor-not-allowed"
+                : "text-[#8b8b9e] border-[#26263a] hover:text-[#f97316] hover:border-[#f97316]/40"
+            }`}
+            title="Speak this response"
+          >
+            {ttsBusy ? "..." : "Speak"}
+          </button>
+        )}
+      </div>
+      <div className={`
+        text-sm leading-relaxed break-words pl-4 border-l-2
+        ${isUser ? "border-[#f97316]/20 text-[#c0bfc6]" : "border-[#818cf8]/20 text-[#a0a0b0]"}
+      `}>
+        {attachments.length > 0 && (
+          <div className="mb-2 flex flex-wrap gap-1.5">
+            {attachments.map((file) => (
+              <span
+                key={`attachment-${file.name}`}
+                className="inline-flex max-w-[260px] items-center gap-1.5 rounded-md border border-[#26263a] bg-[#0f0f16] px-2 py-1 text-[11px] text-[#b5b5c4]"
+              >
+                <span aria-hidden="true">📄</span>
+                <span className="truncate">{file.name}</span>
+              </span>
+            ))}
+          </div>
+        )}
+        {commandLogBlock
+          ? <CommandLogCard block={commandLogBlock} />
+          : (isUser ? cleanContent : renderMarkdown(cleanContent))}
+      </div>
+      {!isUser && ttsError && (
+        <div className="pl-4 mt-1 text-[11px] text-red-400">{ttsError}</div>
+      )}
+    </div>
+  );
+}
+
+function ToolCallDisplay({ name, status }) {
+  const icon = status === "running" ? "\u25C6" : status === "done" ? "\u2713" : "\u2717";
+  const styles = {
+    running: "text-[#fbbf24] bg-[#fbbf24]/8 border-[#fbbf24]/20",
+    done: "text-emerald-400 bg-emerald-400/8 border-emerald-400/20",
+    error: "text-red-400 bg-red-400/8 border-red-400/20",
+  };
+
+  return (
+    <div className="pl-4 animate-fade-in">
+      <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[11px] font-mono border ${styles[status] || styles.running}`}>
+        <span>{icon}</span>
+        <span>{name}</span>
+        {status === "running" && <span className="animate-pulse">...</span>}
+      </span>
+    </div>
+  );
+}
+
+function ToolConfirmCard({ name, input, onRespond }) {
+  const isContinueReadBatching = name === "continue_read_batching";
+  const inputPreview = typeof input === "object" ? JSON.stringify(input, null, 2) : String(input || "");
+  const decisionModel = isContinueReadBatching
+    ? {
+        reason: String(input?.reason || "The agent made repeated read-only calls."),
+        suggestion: String(input?.suggestion || "Continue and batch remaining reads in parallel."),
+        continueAction: String(input?.continue_action || "yes"),
+        stopAction: String(input?.stop_action || "no"),
+      }
+    : null;
+
+  return (
+    <div className="mx-4 my-3 border border-[#fbbf24]/35 rounded-xl bg-[#18181f] p-4 animate-fade-in shadow-[0_6px_24px_rgba(0,0,0,0.35)]">
+      <div className="flex items-center gap-2 text-[#fbbf24] font-semibold text-xs mb-2">
+        <span>&#x26A0;</span>
+        <span>Approve: {name}</span>
+      </div>
+      {isContinueReadBatching ? (
+        <div className="mb-3 space-y-2 text-[12px]">
+          <div className="rounded-lg border border-[#26263a] bg-[#0a0a10] px-3 py-2">
+            <div className="text-[10px] uppercase tracking-widest text-[#6b6b80] mb-1">Reason</div>
+            <div className="text-[#c0bfc6]">{decisionModel.reason}</div>
+          </div>
+          <div className="rounded-lg border border-[#26263a] bg-[#0a0a10] px-3 py-2">
+            <div className="text-[10px] uppercase tracking-widest text-[#6b6b80] mb-1">Suggestion</div>
+            <div className="text-[#c0bfc6]">{decisionModel.suggestion}</div>
+          </div>
+          <div className="grid grid-cols-2 gap-2">
+            <div className="rounded-lg border border-[#26263a] bg-[#0a0a10] px-3 py-2">
+              <div className="text-[10px] uppercase tracking-widest text-[#6b6b80] mb-1">Continue Action</div>
+              <div className="text-emerald-300 font-mono">{decisionModel.continueAction}</div>
+            </div>
+            <div className="rounded-lg border border-[#26263a] bg-[#0a0a10] px-3 py-2">
+              <div className="text-[10px] uppercase tracking-widest text-[#6b6b80] mb-1">Stop Action</div>
+              <div className="text-red-300 font-mono">{decisionModel.stopAction}</div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        inputPreview && (
+          <pre className="text-[11px] font-mono text-[#4e4e63] mb-3 max-h-20 overflow-hidden whitespace-pre-wrap break-all bg-[#0a0a10] rounded-lg px-3 py-2">
+            {inputPreview.slice(0, 300)}
+          </pre>
+        )
+      )}
+      <div className="flex gap-2">
+        <button
+          onClick={() => onRespond("yes")}
+          className="px-4 py-1.5 rounded-lg text-[11px] font-bold bg-[#ea580c] text-white border border-[#fdba74] hover:bg-[#f97316] transition-colors shadow-[0_0_0_1px_rgba(255,255,255,0.06)]"
+        >
+          {isContinueReadBatching ? "Continue" : "Approve"}
+        </button>
+        <button
+          onClick={() => onRespond("no")}
+          className="px-4 py-1.5 rounded-lg text-[11px] font-bold border border-red-400/50 text-red-300 bg-red-500/10 hover:bg-red-500/20 transition-colors"
+        >
+          {isContinueReadBatching ? "Stop" : "Deny"}
+        </button>
+        <button
+          onClick={() => onRespond("yes_all")}
+          className="px-4 py-1.5 rounded-lg text-[11px] font-bold border border-emerald-400/50 text-emerald-300 bg-emerald-500/10 hover:bg-emerald-500/20 transition-colors"
+        >
+          {isContinueReadBatching ? "Auto-continue" : "Approve all"}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/* ===== Main ChatView ===== */
+
+function ThinkingSpinner() {
+  return (
+    <span
+      className="inline-block h-3.5 w-3.5 animate-spin rounded-full border-2 border-purple-400/25 border-t-purple-400"
+      aria-hidden="true"
+    />
+  );
+}
+
+export default function ChatView({ messages, streamingText, thinkingText, statusText, toolCalls, pendingConfirm, onRespondConfirm }) {
+  const scrollRef = useRef(null);
+  const shouldAutoScrollRef = useRef(true);
+  const bottomRef = useRef(null);
+
+  useEffect(() => {
+    if (!shouldAutoScrollRef.current) return;
+    bottomRef.current?.scrollIntoView({ behavior: "auto" });
+  }, [messages, streamingText, thinkingText]);
+
+  return (
+    <div
+      ref={scrollRef}
+      onWheel={(event) => {
+        if (event.deltaY < 0) {
+          // Upward scroll intent should immediately disable auto-follow.
+          shouldAutoScrollRef.current = false;
+        }
+      }}
+      onScroll={(event) => {
+        const el = event.currentTarget;
+        const distanceToBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+        shouldAutoScrollRef.current = distanceToBottom < 120;
+      }}
+      className="flex-1 overflow-y-auto px-6 py-5 space-y-5"
+    >
+      {/* Empty state */}
+      {messages.length === 0 && !streamingText && !statusText && (
+        <div className="flex items-center justify-center h-full select-none">
+          <div className="text-center">
+            <div className="relative mb-6">
+              <pre className="font-mono text-[9px] md:text-[10px] leading-[1.05] text-[#2a2a38] absolute inset-0 translate-x-[1px] translate-y-[1px] pointer-events-none">
+                {MESHX_ASCII.join("\n")}
+              </pre>
+              <pre className="font-mono text-[9px] md:text-[10px] leading-[1.05] text-[#7f7f95] relative">
+                {MESHX_ASCII.join("\n")}
+              </pre>
+            </div>
+            <div className="text-sm font-semibold text-[#2e2e40] mb-2 tracking-wide">meshx agent</div>
+            <div className="text-xs text-[#1e1e2a]">
+              Type a message or press{" "}
+              <kbd className="inline-block px-1.5 py-0.5 rounded bg-[#14141c] text-[#f97316] font-mono text-[10px] border border-[#1a1a28]">/</kbd>{" "}
+              for commands
+            </div>
+            <div className="mt-4 flex items-center justify-center gap-2 text-[10px] font-mono">
+              <span className="rounded border border-[#26263a] bg-[#0f0f16] px-2 py-1 text-[#8b8b9e]">/up</span>
+              <span className="rounded border border-[#26263a] bg-[#0f0f16] px-2 py-1 text-[#8b8b9e]">/bootstrap</span>
+              <span className="rounded border border-[#26263a] bg-[#0f0f16] px-2 py-1 text-[#8b8b9e]">/plan</span>
+              <span className="rounded border border-[#26263a] bg-[#0f0f16] px-2 py-1 text-[#8b8b9e]">/agents</span>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Messages */}
+      {messages.map((msg, i) => (
+        <Message key={i} role={msg.role} content={msg.content} />
+      ))}
+
+      {/* Tool calls */}
+      {toolCalls.map((tc, i) => (
+        <ToolCallDisplay key={`tool-${i}`} name={tc.name} status={tc.status} />
+      ))}
+
+      {/* Thinking */}
+      {thinkingText && (
+        <div className="pl-4 text-sm text-[#4e4e63] animate-fade-in border-l-2 border-purple-500/20">
+          <div className="flex items-center gap-2 mb-1">
+            <ThinkingSpinner />
+            <span className="text-[10px] font-semibold uppercase tracking-widest text-purple-300">Thinking</span>
+          </div>
+          <div>{thinkingText.split("\n").slice(-2).join("\n")}</div>
+        </div>
+      )}
+
+      {/* Streaming */}
+      {streamingText && (
+        <div className="animate-fade-in">
+          <div className="text-[10px] font-semibold uppercase tracking-widest mb-1.5 text-[#818cf8]">Agent</div>
+          <div className="text-sm leading-relaxed break-words pl-4 text-[#8b8b9e] border-l-2 border-[#818cf8]/20">
+            {streamingText}
+            <span className="inline-block w-[2px] h-[14px] bg-[#818cf8] ml-0.5 align-middle animate-cursor" />
+          </div>
+        </div>
+      )}
+
+      {/* Tool confirmation */}
+      {pendingConfirm && (
+        <ToolConfirmCard
+          name={pendingConfirm.name}
+          input={pendingConfirm.input}
+          onRespond={onRespondConfirm}
+        />
+      )}
+
+      {/* Status (when not streaming) */}
+      {statusText && !streamingText && (
+        <div className="pl-4 text-sm text-[#f97316] animate-pulse">
+          <span className="inline-block w-1.5 h-1.5 rounded-full bg-[#f97316] mr-2 align-middle" />
+          {statusText}
+        </div>
+      )}
+
+      <div ref={bottomRef} />
+    </div>
+  );
+}