@anusornneal/chat-relay 0.11.0 → 0.11.2

package/agent/desktop-manager.mjs

@@ -2,7 +2,7 @@ import { BoundedLane } from "./capability-scheduler.mjs";
 import { PersistentDesktopRunner } from "./windows-desktop-runner.mjs";
 import { MacOSDesktopRunner } from "./macos-desktop-runner.mjs";
 
-const MAX_SCREENSHOT_BINARY_BYTES = 32 * 1024;
+const MAX_SCREENSHOT_BINARY_BYTES = 2 * 1024 * 1024;
 const MAX_TEXT_LENGTH = 8192;
 const MAX_CLIPBOARD_TEXT_LENGTH = 8192;
 const MIN_SCREENSHOT_WIDTH = 320;
@@ -201,8 +201,9 @@ export class DesktopManager {
       return { ok: false, error: "invalid_monitor" };
     }
 
+    const native = input.native === true;
     const maxWidth = input.maxWidth === undefined ? 960 : Number(input.maxWidth);
-    if (!Number.isInteger(maxWidth) || maxWidth < MIN_SCREENSHOT_WIDTH || maxWidth > MAX_SCREENSHOT_WIDTH) {
+    if (!native && (!Number.isInteger(maxWidth) || maxWidth < MIN_SCREENSHOT_WIDTH || maxWidth > MAX_SCREENSHOT_WIDTH)) {
       return { ok: false, error: "invalid_max_width" };
     }
     const quality = input.quality === undefined ? 58 : Number(input.quality);
@@ -210,7 +211,7 @@ export class DesktopManager {
       return { ok: false, error: "invalid_quality" };
     }
 
-    const result = await this.runner("screenshot", { monitor, maxWidth, quality });
+    const result = await this.runner("screenshot", { monitor, maxWidth, quality, native });
     return this.normalizeScreenshotResult(result);
   }
 

package/agent/macos-desktop-runner.mjs

@@ -124,15 +124,20 @@ export class MacOSDesktopRunner {
         return { ok: false, error: "capture_failed" };
       }
 
-      let targetWidth = Math.min(Number(args.maxWidth || 960), originalInfo.width);
+      const native = args.native === true;
+      let targetWidth = native ? originalInfo.width : Math.min(Number(args.maxWidth || 960), originalInfo.width);
       const requestedQuality = Math.max(20, Math.min(85, Number(args.quality || 58)));
-      const qualities = [...new Set([requestedQuality, 55, 45, 35, 25, 20].filter((q) => q <= requestedQuality))];
+      const maxBytes = native ? (2 * 1024 * 1024) : MAX_SCREENSHOT_BINARY_BYTES;
+      const qualities = [...new Set((native
+        ? [requestedQuality, 75, 60, 45, 30, 20]
+        : [requestedQuality, 55, 45, 35, 25, 20]
+      ).filter((q) => q <= requestedQuality))];
       let data = null;
       let finalWidth = 0;
       let finalHeight = 0;
       let finalQuality = requestedQuality;
 
-      for (let attempt = 0; attempt < 5 && !data; attempt += 1) {
+      for (let attempt = 0; attempt < (native ? 1 : 5) && !data; attempt += 1) {
         for (const quality of qualities) {
           await fs.rm(output, { force: true });
           await execNative("/usr/bin/sips", [
@@ -143,7 +148,7 @@ export class MacOSDesktopRunner {
             "--out", output,
           ]);
           const bytes = await fs.readFile(output);
-          if (bytes.byteLength > 0 && bytes.byteLength <= MAX_SCREENSHOT_BINARY_BYTES) {
+          if (bytes.byteLength > 0 && bytes.byteLength <= maxBytes) {
             const resized = parseSipsSize(await execNative("/usr/bin/sips", [
               "-g", "pixelWidth", "-g", "pixelHeight", output,
             ]));
@@ -181,6 +186,7 @@ export class MacOSDesktopRunner {
         virtualDesktopHeight: Number(info.virtualDesktopHeight),
         monitorCount: info.screens.length,
         jpegQuality: finalQuality,
+        native,
         timing: {
           captureMs,
           encodeMs: Math.max(0, Date.now() - encodeStartedAt),

package/agent/toolcall-summary.mjs

@@ -1,4 +1,4 @@
-const MAX_TEXT = 96;
+const MAX_TEXT = 160;
 
 function cleanText(value, max = MAX_TEXT) {
   const text = String(value ?? "").replace(/\s+/g, " ").trim();
@@ -6,16 +6,33 @@ function cleanText(value, max = MAX_TEXT) {
   return text.slice(0, Math.max(0, max - 1)) + "…";
 }
 
+function normalizedPath(value) {
+  return cleanText(value, 260).replace(/\\/g, "/");
+}
+
 function compactPath(value) {
-  const normalized = cleanText(value, 120).replace(/\\/g, "/");
-  if (normalized.length <= 72) return normalized || "-";
+  const normalized = normalizedPath(value);
+  if (!normalized) return "-";
+
+  const projectMatch = normalized.match(/\/Projects\/[^/]+\/(.+)$/i);
+  if (projectMatch?.[1]) return cleanText(projectMatch[1], 120);
+
   const parts = normalized.split("/").filter(Boolean);
-  if (parts.length <= 2) return "…" + normalized.slice(-68);
+  if (parts.length <= 3) return cleanText(normalized, 120);
   return "…/" + parts.slice(-3).join("/");
 }
 
+function cwdLabel(value) {
+  const normalized = normalizedPath(value).replace(/\/$/, "");
+  if (!normalized) return "";
+  const projectMatch = normalized.match(/\/Projects\/([^/]+)(?:\/.*)?$/i);
+  if (projectMatch?.[1]) return projectMatch[1];
+  const parts = normalized.split("/").filter(Boolean);
+  return parts.at(-1) || normalized;
+}
+
 function redactCommand(value) {
-  let text = cleanText(value, 220);
+  let text = cleanText(value, 520);
   const patterns = [
     /(authorization\s*[:=]\s*bearer\s+)[^\s"']+/ig,
     /((?:token|password|passwd|secret|api[_-]?key|access[_-]?key)\s*[:=]\s*)("[^"]*"|'[^']*'|[^\s;]+)/ig,
@@ -30,6 +47,13 @@ function number(value, fallback = 0) {
   return Number.isFinite(parsed) ? parsed : fallback;
 }
 
+function humanBytes(value) {
+  const bytes = Math.max(0, Number(value) || 0);
+  if (bytes < 1024) return Math.round(bytes) + " B";
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(bytes < 10 * 1024 ? 1 : 0) + " KB";
+  return (bytes / (1024 * 1024)).toFixed(bytes < 10 * 1024 * 1024 ? 1 : 0) + " MB";
+}
+
 function lineRange(payload) {
   const offset = Math.max(0, number(payload.offset));
   const length = Math.max(1, number(payload.length, 200));
@@ -43,106 +67,198 @@ function countKeyboardInput(payload) {
   return "input";
 }
 
+function quotedCommitMessage(command) {
+  const match = command.match(/git\s+commit\s+-m\s+["']([^"']+)["']/i);
+  return match?.[1] ? cleanText(match[1], 96) : "";
+}
+
+function diffTargets(command) {
+  const match = command.match(/git\s+diff(?:\s+--check)?\s+--\s+([^;]+)/i);
+  if (!match?.[1]) return [];
+  return (match[1].match(/"[^"]+"|'[^']+'|\S+/g) || [])
+    .map((value) => value.replace(/^["']|["']$/g, ""))
+    .filter(Boolean);
+}
+
+function humanizeCommand(value) {
+  const command = redactCommand(value);
+  const lower = command.toLowerCase();
+
+  const pushTag = command.match(/git\s+push\s+origin\s+main[\s\S]*?git\s+push\s+origin\s+([^\s;]+)/i);
+  if (pushTag?.[1]) return `Push main and ${cleanText(pushTag[1], 48)} to origin`;
+
+  if (/node\s+--test\s+test[\\/]cli-tui\.test\.mjs/i.test(command) &&
+      /npm\s+run\s+test:platform/i.test(command) &&
+      /git\s+diff\s+--check/i.test(command)) {
+    return "Validate terminal UI · unit tests, platform smoke, and Git checks";
+  }
+
+  const version = command.match(/npm\s+version\s+([^\s;]+)/i);
+  const commitMessage = quotedCommitMessage(command);
+  if (version?.[1] && commitMessage) {
+    return `Prepare release ${cleanText(version[1], 32)} · ${commitMessage}`;
+  }
+
+  if (/git\s+status\s+--short/i.test(command) && /git\s+branch\s+--show-current/i.test(command) && /git\s+log\b/i.test(command)) {
+    return "Check Git status, current branch, and recent commits";
+  }
+
+  if (/git\s+status\b/i.test(command) && /git\s+log\b/i.test(command)) {
+    return "Check Git status and recent commits";
+  }
+
+  if (/git\s+tag\s+--list/i.test(command) && /git\s+status\b/i.test(command)) {
+    return "Check release tag and Git status";
+  }
+
+  if (/git\s+add\b/i.test(command) && /git\s+commit\b/i.test(command)) {
+    return commitMessage ? `Commit changes · ${commitMessage}` : "Stage and commit changes";
+  }
+
+  if (/git\s+diff\s+--check/i.test(command) && !/git\s+diff\s+--\s+/i.test(command)) {
+    return "Check changes for whitespace errors";
+  }
+
+  if (/git\s+diff\b/i.test(command)) {
+    const targets = diffTargets(command);
+    if (targets.length === 1) return `Review changes · ${compactPath(targets[0])}`;
+    if (targets.length > 1) return `Review changes · ${targets.length} files`;
+    return "Review Git changes";
+  }
+
+  if (/npm\s+publish(?:\s|$)/i.test(command)) {
+    return "Publish package to npm";
+  }
+
+  const npmView = command.match(/npm\s+view\s+([^\s;]+)\s+version/i);
+  if (npmView?.[1]) return `Check published version · ${cleanText(npmView[1], 72)}`;
+
+  if (/node\s+--check\b/i.test(command)) {
+    return "Check JavaScript syntax";
+  }
+
+  if (/node\s+--test\b/i.test(command) && /cli-tui\.test\.mjs/i.test(command)) {
+    return "Run terminal UI tests";
+  }
+
+  const npmRun = command.match(/^npm\s+run\s+([^\s;]+)/i);
+  if (npmRun?.[1] && !/[;&|]/.test(command)) {
+    return `Run npm script · ${cleanText(npmRun[1], 64)}`;
+  }
+
+  if (lower === "git status" || lower === "git status --short") return "Check Git status";
+
+  return `Run ${command}`;
+}
+
+function withCwd(summary, cwd) {
+  const label = cwdLabel(cwd);
+  return label ? `${summary} · in ${label}` : summary;
+}
+
 export function humanizeToolCall(payload = {}) {
   const action = String(payload?.action || "unknown");
 
   switch (action) {
     case "ping":
-      return "Ping agent";
+      return "Check agent connection";
     case "agent.config":
-      return "Get agent config";
+      return "Read agent configuration";
     case "agent.recentCalls":
-      return `Get recent tool calls · limit ${number(payload.limit, 50)}`;
+      return `Read recent activity · up to ${number(payload.limit, 50)} calls`;
     case "agent.lifecycle.status":
-      return "Get lifecycle status";
+      return "Check agent lifecycle";
     case "agent.lifecycle.drain":
-      return "Drain agent";
+      return "Pause new long-running work";
     case "agent.lifecycle.resume":
-      return "Resume agent";
+      return "Resume normal work";
     case "agent.lifecycle.restart":
-      return "Restart agent";
+      return "Restart local agent";
 
     case "fs.stat":
-      return `Stat ${compactPath(payload.path)}`;
+      return `Inspect ${compactPath(payload.path)}`;
     case "fs.list":
-      return `List ${compactPath(payload.path)} · depth ${number(payload.depth)} · limit ${number(payload.limit, 100)}`;
+      return `Browse ${compactPath(payload.path)} · depth ${number(payload.depth)} · up to ${number(payload.limit, 100)} items`;
     case "fs.read":
       return `Read ${compactPath(payload.path)} · ${lineRange(payload)}`;
     case "fs.readMany":
       return `Read ${Array.isArray(payload.paths) ? payload.paths.length : 0} files`;
     case "fs.batch":
-      return `Filesystem batch · ${Array.isArray(payload.operations) ? payload.operations.length : 0} ops`;
+      return `Inspect filesystem · ${Array.isArray(payload.operations) ? payload.operations.length : 0} operations`;
     case "fs.artifact":
       return `Export ${compactPath(payload.path)}`;
     case "fs.write": {
       const bytes = Buffer.byteLength(String(payload.content ?? ""), "utf8");
-      return `Write ${compactPath(payload.path)} · ${payload.mode || "rewrite"} · ${bytes} B`;
+      const mode = payload.mode === "append" ? "append" : "replace file";
+      return `Write ${compactPath(payload.path)} · ${mode} · ${humanBytes(bytes)}`;
+    }
+    case "fs.edit": {
+      const count = Math.max(1, number(payload.expectedReplacements, 1));
+      return `Edit ${compactPath(payload.path)} · ${count} change${count === 1 ? "" : "s"}`;
     }
-    case "fs.edit":
-      return `Edit ${compactPath(payload.path)} · replace ×${number(payload.expectedReplacements, 1)}`;
     case "fs.mkdir":
       return `Create folder ${compactPath(payload.path)}`;
     case "fs.move":
       return `Move ${compactPath(payload.source)} → ${compactPath(payload.destination)}`;
     case "fs.delete":
-      return `Delete ${compactPath(payload.path)}${payload.recursive ? " · recursive" : ""}`;
+      return `Delete ${compactPath(payload.path)}${payload.recursive ? " and contents" : ""}`;
     case "fs.search.start":
-      return `Search "${cleanText(payload.pattern, 56)}" in ${compactPath(payload.path)}`;
+      return `Search "${cleanText(payload.pattern, 72)}" · ${compactPath(payload.path)}`;
     case "fs.search.results":
-      return `Read search results · offset ${number(payload.offset)} · ${number(payload.length, 50)} rows`;
+      return `Read search results · ${number(payload.length, 50)} items from offset ${number(payload.offset)}`;
 
     case "process.list":
-      return `List processes${payload.filter ? ` · "${cleanText(payload.filter, 52)}"` : ""}`;
+      return `Find processes${payload.filter ? ` matching "${cleanText(payload.filter, 52)}"` : ""}`;
     case "process.kill":
-      return `Kill process ${number(payload.pid)}`;
+      return `Stop process ${number(payload.pid)}`;
 
     case "terminal.exec":
-      return `Run ${redactCommand(payload.command)}${payload.cwd ? ` · in ${compactPath(payload.cwd)}` : ""}`;
+      return withCwd(humanizeCommand(payload.command), payload.cwd);
     case "terminal.start":
-      return `Start ${redactCommand(payload.command)}${payload.cwd ? ` · in ${compactPath(payload.cwd)}` : ""}`;
+      return withCwd(`Start background task · ${humanizeCommand(payload.command).replace(/^Run /, "")}`, payload.cwd);
     case "terminal.shell.start":
-      return `Start shell${payload.cwd ? ` · in ${compactPath(payload.cwd)}` : ""}`;
+      return withCwd("Open interactive shell", payload.cwd);
     case "terminal.read":
-      return `Read terminal ${cleanText(payload.sessionId, 32)} · after #${number(payload.afterSeq)}`;
+      return `Read terminal output · ${cleanText(payload.sessionId, 24)} · after #${number(payload.afterSeq)}`;
     case "terminal.write":
-      return `Write terminal ${cleanText(payload.sessionId, 32)} · ${String(payload.input ?? "").length} chars`;
+      return `Send input to terminal · ${String(payload.input ?? "").length} chars`;
     case "terminal.kill":
-      return `Stop terminal ${cleanText(payload.sessionId, 32)}`;
+      return `Stop terminal session · ${cleanText(payload.sessionId, 24)}`;
     case "terminal.list":
       return "List terminal sessions";
     case "terminal.observability":
-      return "Get terminal status";
+      return "Check terminal activity";
     case "terminal.batch.start":
-      return `Run terminal batch · ${Array.isArray(payload.jobs) ? payload.jobs.length : 0} jobs · concurrency ${number(payload.concurrency, 1)}`;
+      return `Run terminal batch · ${Array.isArray(payload.jobs) ? payload.jobs.length : 0} jobs · ${number(payload.concurrency, 1)} at a time`;
     case "terminal.batch.status":
-      return `Get batch status ${cleanText(payload.batchId, 32)}`;
+      return `Check batch progress · ${cleanText(payload.batchId, 24)}`;
     case "terminal.batch.read":
-      return `Read batch ${cleanText(payload.batchId, 32)}`;
+      return `Read batch output · ${cleanText(payload.batchId, 24)}`;
     case "terminal.batch.cancel":
-      return `Cancel batch ${cleanText(payload.batchId, 32)}`;
+      return `Cancel batch · ${cleanText(payload.batchId, 24)}`;
 
     case "desktop.screenshot":
-      return "Capture screen";
+      return "Capture desktop screenshot";
     case "desktop.clipboard.read":
       return "Read clipboard";
     case "desktop.clipboard.write":
       return `Write clipboard · ${String(payload.text ?? payload.content ?? "").length} chars`;
     case "desktop.window.list":
-      return "List windows";
+      return "List open windows";
     case "desktop.window.focus":
-      return `Focus window ${cleanText(payload.title ?? payload.windowId ?? payload.handle ?? "", 64)}`;
+      return `Focus window · ${cleanText(payload.title ?? payload.windowId ?? payload.handle ?? "", 64)}`;
     case "desktop.mouse.click": {
       const button = cleanText(payload.button || "left", 12);
       const x = number(payload.x);
       const y = number(payload.y);
-      return `${button[0]?.toUpperCase() || "L"}${button.slice(1)} click · ${x},${y}`;
+      return `${button[0]?.toUpperCase() || "L"}${button.slice(1)} click · x ${x}, y ${y}`;
     }
     case "desktop.keyboard.input":
-      return `Keyboard input · ${countKeyboardInput(payload)}`;
+      return `Type on keyboard · ${countKeyboardInput(payload)}`;
     case "desktop.step":
-      return `Desktop step · ${Array.isArray(payload.actions) ? payload.actions.length : 0} actions`;
+      return `Desktop actions · ${Array.isArray(payload.actions) ? payload.actions.length : 0} steps`;
 
     default:
-      return cleanText(action.replace(/[._]/g, " ").replace(/\b\w/g, (char) => char.toUpperCase()), 100) || "Tool call";
+      return cleanText(action.replace(/[._]/g, " ").replace(/\b\w/g, (char) => char.toUpperCase()), 140) || "Tool call";
   }
 }

package/agent/windows-desktop-worker.ps1

@@ -228,20 +228,26 @@ function Invoke-Screenshot($Payload) {
       Select-Object -First 1
     if ($null -eq $codec) { return Result-Error "capture_failed" }
 
-    $maxBytes = 32768
+    $native = $Payload.native -eq $true
+    $maxBytes = if ($native) { 2097152 } else { 32768 }
     $requestedMaxWidth = if ($null -eq $Payload.maxWidth) { 960 } else { [int]$Payload.maxWidth }
-    if ($requestedMaxWidth -lt 320 -or $requestedMaxWidth -gt 1920) { return Result-Error "invalid_max_width" }
+    if (-not $native -and ($requestedMaxWidth -lt 320 -or $requestedMaxWidth -gt 1920)) { return Result-Error "invalid_max_width" }
     $requestedQuality = if ($null -eq $Payload.quality) { 58 } else { [int]$Payload.quality }
     if ($requestedQuality -lt 20 -or $requestedQuality -gt 85) { return Result-Error "invalid_quality" }
-    $targetWidth = [Math]::Min($bounds.Width, $requestedMaxWidth)
+    $targetWidth = if ($native) { $bounds.Width } else { [Math]::Min($bounds.Width, $requestedMaxWidth) }
     $targetHeight = [Math]::Max(1, [int][Math]::Round($bounds.Height * ($targetWidth / [double]$bounds.Width)))
-    $qualities = @([long]$requestedQuality, [long][Math]::Min($requestedQuality, 42), [long][Math]::Min($requestedQuality, 30), 20L) | Select-Object -Unique
+    $qualities = if ($native) {
+      @([long]$requestedQuality, 75L, 60L, 45L, 30L, 20L) | Where-Object { $_ -le $requestedQuality } | Select-Object -Unique
+    } else {
+      @([long]$requestedQuality, [long][Math]::Min($requestedQuality, 42), [long][Math]::Min($requestedQuality, 30), 20L) | Select-Object -Unique
+    }
     $bytes = $null
     $finalWidth = $targetWidth
     $finalHeight = $targetHeight
     $finalQuality = $requestedQuality
 
-    for ($sizeAttempt = 0; $sizeAttempt -lt 3 -and $null -eq $bytes; $sizeAttempt++) {
+    $maxSizeAttempts = if ($native) { 1 } else { 3 }
+    for ($sizeAttempt = 0; $sizeAttempt -lt $maxSizeAttempts -and $null -eq $bytes; $sizeAttempt++) {
       $resized = New-Object System.Drawing.Bitmap $targetWidth, $targetHeight
       $draw = [System.Drawing.Graphics]::FromImage($resized)
       try {
@@ -305,6 +311,7 @@ function Invoke-Screenshot($Payload) {
       virtualDesktopHeight = $virtualBounds.Height
       monitorCount = $monitorCount
       jpegQuality = $finalQuality
+      native = $native
       desktopOriginX = $bounds.Left
       desktopOriginY = $bounds.Top
       desktopWidth = $bounds.Width

package/cli/tui.mjs

@@ -1,8 +1,23 @@
 import { humanizeToolCall } from "../agent/toolcall-summary.mjs";
 
 const ESC = "\x1b[";
+const RESET = "\x1b[0m";
+const STYLE = {
+  reset: RESET,
+  bold: "\x1b[1m",
+  dim: "\x1b[2m",
+  cyan: "\x1b[36m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+  red: "\x1b[31m",
+  gray: "\x1b[90m",
+};
 const LABEL_WIDTH = 12;
 const GAP = 3;
+const MIN_FRAME_WIDTH = 60;
+const MAX_FRAME_WIDTH = 179;
+const FRAME_FIXED_ROWS = 11;
+const FRAME_BOTTOM_MARGIN = 1;
 
 function clamp(value, min, max) {
   return Math.max(min, Math.min(max, value));
@@ -16,13 +31,34 @@ function truncate(value, width) {
   return text.slice(0, width - 1) + "…";
 }
 
-function field(label, value, width) {
+function paint(value, ...styles) {
+  if (!styles.length) return String(value ?? "");
+  return styles.join("") + String(value ?? "") + RESET;
+}
+
+function field(label, value, width, color = false, valueStyle = null) {
   const valueWidth = Math.max(1, width - LABEL_WIDTH);
-  return truncate(String(label).padEnd(LABEL_WIDTH) + truncate(value, valueWidth), width).padEnd(width);
+  const plainLabel = String(label).padEnd(LABEL_WIDTH);
+  const plainValue = truncate(value, valueWidth);
+  const plain = truncate(plainLabel + plainValue, width).padEnd(width);
+  if (!color) return plain;
+  const renderedLabel = paint(plainLabel, STYLE.gray);
+  const renderedValue = valueStyle ? paint(plainValue, valueStyle) : plainValue;
+  return renderedLabel + renderedValue + " ".repeat(Math.max(0, width - plainLabel.length - plainValue.length));
+}
+
+function statusStyle(value) {
+  switch (String(value || "").toLowerCase()) {
+    case "connected": return STYLE.green;
+    case "connecting":
+    case "reconnecting": return STYLE.yellow;
+    case "offline": return STYLE.red;
+    default: return STYLE.gray;
+  }
 }
 
-export function formatTwoColumnHeader(state, width = 110) {
-  const usable = clamp(Number(width) || 110, 72, 180);
+export function formatTwoColumnHeader(state, width = 110, { color = false } = {}) {
+  const usable = clamp(Number(width) || 110, MIN_FRAME_WIDTH, MAX_FRAME_WIDTH);
   const leftWidth = Math.floor((usable - GAP) / 2);
   const rightWidth = usable - GAP - leftWidth;
   const rows = [
@@ -32,9 +68,13 @@ export function formatTwoColumnHeader(state, width = 110) {
     ["Terminal", state.terminal ? "enabled" : "disabled", "Desktop", state.desktop ? "enabled" : "disabled"],
   ];
   return rows
-    .map(([leftLabel, leftValue, rightLabel, rightValue]) =>
-      field(leftLabel, leftValue, leftWidth) + " ".repeat(GAP) + field(rightLabel, rightValue, rightWidth).trimEnd(),
-    )
+    .map(([leftLabel, leftValue, rightLabel, rightValue]) => {
+      const leftStyle = leftLabel === "Status" ? statusStyle(state.status) : null;
+      const rightStyle = rightLabel === "Reconnects" && Number(state.reconnects || 0) > 0 ? STYLE.yellow : null;
+      return field(leftLabel, leftValue, leftWidth, color, leftStyle)
+        + " ".repeat(GAP)
+        + field(rightLabel, rightValue, rightWidth, color, rightStyle).trimEnd();
+    })
     .join("\n");
 }
 
@@ -70,14 +110,61 @@ function clock(value) {
   return date.toLocaleTimeString("en-GB", { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" });
 }
 
-export function formatTransactionRow(item, width = 110) {
+function wrapText(value, width, maxLines = 3) {
+  const text = String(value ?? "").replace(/\s+/g, " ").trim();
+  const usable = Math.max(1, Number(width) || 1);
+  if (!text) return [""];
+  const lines = [];
+  let remaining = text;
+
+  while (remaining && lines.length < maxLines) {
+    if (remaining.length <= usable) {
+      lines.push(remaining);
+      remaining = "";
+      break;
+    }
+
+    let cut = remaining.lastIndexOf(" ", usable);
+    if (cut < Math.floor(usable * 0.45)) cut = usable;
+    lines.push(remaining.slice(0, cut).trimEnd());
+    remaining = remaining.slice(cut).trimStart();
+  }
+
+  if (remaining && lines.length) {
+    const index = lines.length - 1;
+    lines[index] = truncate(lines[index] + " " + remaining, usable);
+  }
+
+  return lines.length ? lines : [""];
+}
+
+export function formatTransactionRows(item, width = 110, { color = false } = {}) {
   const usable = clamp(Number(width) || 110, 60, 180);
   const status = item.status === "running" ? "●" : item.ok === false ? "✕" : "✓";
   const prefix = `${clock(item.at)}  ${status}  `;
+  const continuationPrefix = " ".repeat(prefix.length);
   const duration = formatDuration(item.durationMs, item.status);
   const suffix = "  " + duration.padStart(8);
-  const summaryWidth = Math.max(12, usable - prefix.length - suffix.length);
-  return prefix + truncate(item.summary || item.action || "Tool call", summaryWidth).padEnd(summaryWidth) + suffix;
+  const summaryWidth = Math.max(18, usable - prefix.length - suffix.length);
+  const summaryLines = wrapText(item.summary || item.action || "Tool call", summaryWidth, 3);
+
+  return summaryLines.map((line, index) => {
+    if (index === 0) {
+      if (!color) return prefix + line.padEnd(summaryWidth) + suffix;
+      const time = paint(clock(item.at), STYLE.gray);
+      const glyphStyle = item.status === "running" ? STYLE.yellow : item.ok === false ? STYLE.red : STYLE.green;
+      const glyph = paint(status, glyphStyle, STYLE.bold);
+      const summary = item.status === "running" ? paint(line.padEnd(summaryWidth), STYLE.bold) : line.padEnd(summaryWidth);
+      const timing = paint(suffix, STYLE.gray);
+      return `${time}  ${glyph}  ${summary}${timing}`;
+    }
+    if (!color) return continuationPrefix + line;
+    return " ".repeat(prefix.length) + paint(line, STYLE.dim);
+  });
+}
+
+export function formatTransactionRow(item, width = 110, options) {
+  return formatTransactionRows(item, width, options).join("\n");
 }
 
 function normalizeRelay(value) {
@@ -95,6 +182,13 @@ export function shouldUseTui(options = {}, stdout = process.stdout) {
   return Boolean(stdout?.isTTY);
 }
 
+export function shouldUseColor(stdout = process.stdout, env = process.env) {
+  if (!stdout?.isTTY) return false;
+  if (Object.prototype.hasOwnProperty.call(env || {}, "NO_COLOR")) return false;
+  if (String(env?.TERM || "").toLowerCase() === "dumb") return false;
+  return true;
+}
+
 export class RemoteTui {
   constructor({ config, version, output = process.stdout }) {
     this.output = output;
@@ -109,6 +203,7 @@ export class RemoteTui {
       desktop: config.desktopEnabled === true,
     };
     this.version = version || "-";
+    this.colorEnabled = shouldUseColor(output);
     this.transactions = [];
     this.timer = null;
     this.closed = false;
@@ -117,7 +212,9 @@ export class RemoteTui {
 
   start() {
     if (this.closed) return;
-    this.output.write(ESC + "?25l");
+    // Use the terminal's alternate screen so periodic redraws never accumulate
+    // in scrollback. Keep one column unused to avoid automatic line wrapping.
+    this.output.write(ESC + "?1049h" + ESC + "?25l" + ESC + "2J" + ESC + "H");
     this.render();
     this.timer = setInterval(() => this.render(), 1000);
     this.timer.unref?.();
@@ -128,7 +225,7 @@ export class RemoteTui {
     this.closed = true;
     if (this.timer) clearInterval(this.timer);
     this.timer = null;
-    this.output.write(ESC + "?25h\n");
+    this.output.write(ESC + "?25h" + ESC + "?1049l");
   }
 
   handleMessage(message) {
@@ -178,25 +275,45 @@ export class RemoteTui {
 
   render() {
     if (this.closed) return;
-    const width = clamp(Number(this.output.columns) || 110, 72, 180);
+    const terminalWidth = Number(this.output.columns) || 110;
+    const width = clamp(terminalWidth - 1, MIN_FRAME_WIDTH, MAX_FRAME_WIDTH);
     const height = Math.max(16, Number(this.output.rows) || 30);
     const separator = "─".repeat(width);
     const header = formatTwoColumnHeader({
       ...this.state,
       uptimeMs: Date.now() - this.startedAt,
-    }, width);
-    const availableRows = Math.max(3, height - 10);
-    const rows = this.transactions.slice(-availableRows).map((item) => formatTransactionRow(item, width));
+    }, width, { color: this.colorEnabled });
+    // Fixed frame content occupies 11 rows. Leave one spare row at the
+    // bottom so Windows Terminal never scrolls the screen while repainting.
+    const availableRows = Math.max(1, height - FRAME_FIXED_ROWS - FRAME_BOTTOM_MARGIN);
+    const rows = [];
+    for (let index = this.transactions.length - 1; index >= 0 && rows.length < availableRows; index--) {
+      const group = formatTransactionRows(this.transactions[index], width, { color: this.colorEnabled });
+      const remaining = availableRows - rows.length;
+      if (group.length <= remaining) {
+        rows.unshift(...group);
+      } else if (rows.length === 0) {
+        rows.unshift(...group.slice(0, remaining));
+      } else {
+        break;
+      }
+    }
     while (rows.length < Math.min(availableRows, 4)) rows.unshift("");
 
+    const title = this.colorEnabled
+      ? paint("Chat Relay", STYLE.bold, STYLE.cyan) + paint(`  v${this.version}`, STYLE.gray)
+      : `Chat Relay  v${this.version}`;
+    const divider = this.colorEnabled ? paint(separator, STYLE.gray) : separator;
+    const section = this.colorEnabled ? paint("Transactions", STYLE.bold, STYLE.cyan) : "Transactions";
+
     const screen = [
-      `Chat Relay  v${this.version}`,
-      separator,
+      title,
+      divider,
       "",
       header,
       "",
-      separator,
-      "Transactions",
+      divider,
+      section,
       "",
       ...rows,
     ].join("\n");

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@anusornneal/chat-relay",
-    "version": "0.11.0",
+    "version": "0.11.2",
     "description": "Zero-checkout remote MCP agent for ChatGPT with terminal, filesystem, process, multi-user, and multi-agent support.",
     "type": "module",
     "bin": {