@ar-ai/brink-cli 0.0.0-stage → 1.0.6

package/support/terminal-ui.js

@@ -0,0 +1,630 @@
+"use strict";
+
+const readline = require("readline");
+const { stripVTControlCharacters } = require("util");
+const { credit, mascotLines } = require("./brand");
+
+const ESC = "\x1b[";
+const COLOR = {
+  base: `${ESC}48;2;19;21;24m${ESC}38;2;220;223;228m`,
+  text: `${ESC}38;2;220;223;228m`,
+  muted: `${ESC}38;2;148;155;166m`,
+  amber: `${ESC}38;2;225;177;99m`,
+  green: `${ESC}38;2;126;197;154m`,
+  red: `${ESC}38;2;238;137;137m`,
+  section: `${ESC}38;2;225;177;99m`,
+  border: `${ESC}38;2;66;72;82m`,
+  bold: `${ESC}1m`,
+  normal: `${ESC}22m`,
+};
+const LEVELS = ["all", "info", "warn", "error"];
+const SEGMENTS = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+const COMBINING = /^[\p{Mark}\u200d\ufe0e\ufe0f]+$/u;
+const EMOJI =
+  /\p{Emoji_Presentation}|\p{Extended_Pictographic}.*\ufe0f|[\u{1f1e6}-\u{1f1ff}]|\u20e3/u;
+
+function clean(value, limit = 2000) {
+  return stripVTControlCharacters(String(value ?? ""))
+    .replace(/[\x00-\x1f\x7f-\x9f\u202a-\u202e\u2066-\u2069]/g, " ")
+    .slice(0, limit);
+}
+
+function widthOf(segment) {
+  if (COMBINING.test(segment)) return 0;
+  if (EMOJI.test(segment)) return 2;
+  const code = segment.codePointAt(0);
+  return code >= 0x1100 &&
+    (code <= 0x115f ||
+      code === 0x2329 ||
+      code === 0x232a ||
+      (code >= 0x2e80 && code <= 0xa4cf && code !== 0x303f) ||
+      (code >= 0xac00 && code <= 0xd7a3) ||
+      (code >= 0xf900 && code <= 0xfaff) ||
+      (code >= 0xfe10 && code <= 0xfe19) ||
+      (code >= 0xfe30 && code <= 0xfe6f) ||
+      (code >= 0xff00 && code <= 0xff60) ||
+      (code >= 0xffe0 && code <= 0xffe6) ||
+      (code >= 0x20000 && code <= 0x3fffd))
+    ? 2
+    : 1;
+}
+
+function fit(value, width) {
+  const text = clean(value);
+  const room = Math.max(0, width);
+  let result = "";
+  let used = 0;
+  for (const { segment } of SEGMENTS.segment(text)) {
+    const size = widthOf(segment);
+    if (used + size > room) break;
+    result += segment;
+    used += size;
+  }
+  return result + " ".repeat(room - used);
+}
+
+function wrap(value, width, maxLines = 8) {
+  const room = Math.max(1, width);
+  const lines = [];
+  let line = "";
+  let used = 0;
+  for (const { segment } of SEGMENTS.segment(clean(value))) {
+    const size = widthOf(segment);
+    if (used + size > room && line) {
+      lines.push(line);
+      if (lines.length >= maxLines) {
+        lines[lines.length - 1] =
+          fit(lines[lines.length - 1], Math.max(0, room - 3)).trimEnd() + "...";
+        return lines;
+      }
+      line = "";
+      used = 0;
+    }
+    if (size > room) continue;
+    line += segment;
+    used += size;
+  }
+  if (line || !lines.length) lines.push(line);
+  return lines;
+}
+
+function duration(value) {
+  const ms = Math.max(0, Number(value) || 0);
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  if (ms < 3600000)
+    return `${Math.floor(ms / 60000)}m ${Math.floor(ms / 1000) % 60}s`;
+  return `${Math.floor(ms / 3600000)}h ${Math.floor(ms / 60000) % 60}m`;
+}
+
+function bytes(value) {
+  const size = Math.max(0, Number(value) || 0);
+  if (size < 1024) return `${size} B`;
+  if (size < 1048576) return `${(size / 1024).toFixed(1)} KiB`;
+  return `${(size / 1048576).toFixed(1)} MiB`;
+}
+
+function tokens(value) {
+  return value == null ? "--" : Number(value).toLocaleString("en-US");
+}
+
+function tokenLabel(item) {
+  return `${tokens(item.inputTokens)} in / ${tokens(item.outputTokens)} out`;
+}
+
+function clock(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "--:--:--";
+  return [date.getHours(), date.getMinutes(), date.getSeconds()]
+    .map((n) => String(n).padStart(2, "0"))
+    .join(":");
+}
+
+function tone(state) {
+  if (state === "failed" || state === "error") return "red";
+  if (state === "streaming" || state === "completed") return "green";
+  if (state === "waiting" || state === "warn") return "amber";
+  return "muted";
+}
+
+
+function previewLines(value, label, width, maxLines) {
+  const text = clean(value, 1600);
+  const segments = [...SEGMENTS.segment(text)];
+  const room = Math.max(1, width * maxLines - label.length - 5);
+  let start = segments.length;
+  let used = 0;
+  while (start > 0) {
+    const size = widthOf(segments[start - 1].segment);
+    if (used + size > room) break;
+    used += size;
+    start--;
+  }
+  const tail = start
+    ? `...${text.slice(segments[start]?.index ?? text.length)}`
+    : text;
+  return wrap(`${label}: ${tail}`, width, maxLines);
+}
+
+function startTerminalUI(monitor, { clients = [] } = {}) {
+  const input = process.stdin;
+  const output = process.stdout;
+  if (!output.isTTY || !input.isTTY) return { close() {} };
+
+  let state = monitor.snapshot();
+  let closed = false;
+  let pending = null;
+  let lastRender = 0;
+  let previousLines = [];
+  let previousColumns = 0;
+  let previousRows = 0;
+  let pausedLogs = null;
+  let clearedIds = new Set();
+  let logOffset = 0;
+  let trafficOffset = 0;
+  let level = "all";
+  let query = "";
+  let searchDraft = null;
+  let searching = false;
+  let follow = true;
+  let showPreviews = true;
+  let lastLogLines = 0;
+  let lastTrafficLines = 0;
+  let bodyHeight = 1;
+  let logBodyHeight = 1;
+  let logCache = null;
+  let unsubscribe = () => {};
+  const wasRaw = Boolean(input.isRaw);
+  const wasPaused = input.isPaused();
+  const clientCommands = clients.filter((client) => client === "claude" || client === "codex");
+  const launchHint = clientCommands.length ? clientCommands.join(" or ") : "claude or codex";
+
+  function add(lines, value, color = "text", bold = false, width, maxLines) {
+    for (const text of wrap(value, width, maxLines))
+      lines.push({ text, color, bold });
+  }
+
+  function trafficLines(width) {
+    const lines = [];
+    const now = Date.now();
+    const active = state.active || [];
+    const recent = state.recent || [];
+    const models = [...(state.models || [])].sort((a, b) => Number(Boolean(b.active)) - Number(Boolean(a.active)));
+    const section = (title) => {
+      if (lines.length) lines.push({ text: "" });
+      lines.push({ text: ` ${title} `, color: "section", bold: true });
+    };
+    section("MODELS & USAGE");
+    if (!models.length) add(lines, "No model usage yet.", "muted", false, width, 1);
+    for (const model of models.slice(0, 64)) {
+      add(lines, model.model || "(model not supplied)", model.active ? "amber" : "text", true, width, 2);
+      add(lines, `${model.requests} req / ${model.active} active / ${model.failed} failed`, "muted", false, width, 2);
+      add(lines, model.usageRequests ? `${tokenLabel(model)} tokens` : "Tokens -- / not reported", "muted", false, width, 2);
+      if (model.cachedTokens || model.reasoningTokens)
+        add(lines, `Cached ${tokens(model.cachedTokens)} / reasoning ${tokens(model.reasoningTokens)} (included)`, "muted", false, width, 2);
+    }
+    if (models.length > 64) add(lines, `${models.length - 64} more observed models`, "muted", false, width, 1);
+
+    section(`ACTIVE REQUESTS / ${active.length}`);
+    if (!active.length) {
+      add(lines, "Keep this terminal open. In another:", "muted", false, width, 2);
+      add(lines, launchHint, "amber", true, width, 1);
+    }
+    for (const request of active.slice(0, 100)) {
+      const activity = request.activity || {};
+      const phase = { waiting: "Waiting", reasoning: "Reasoning", speaking: "Receiving", summary: "Provider summary", tool: "Tool request" }[activity.phase] || (request.firstByteMs == null ? "Waiting" : "Receiving");
+      add(lines, `#${request.id} ${request.model || "(model not supplied)"}`, "text", true, width, 2);
+      add(lines, `${phase} / ${duration(now - request.startedAt)} / ${bytes(request.bytes)}`, "green", false, width, 2);
+      add(lines, `${tokenLabel(request)} / first byte ${request.firstByteMs == null ? "--" : duration(request.firstByteMs)}`, "muted", false, width, 2);
+      add(lines, request.route === "native-messages" ? "Messages -> AgentRouter" : request.route === "messages-bridge" ? "Messages -> Responses -> AgentRouter" : request.route === "claude-bridge" ? "Claude bridge -> AgentRouter" : "Responses -> AgentRouter", "muted", false, width, 1);
+      if (showPreviews) {
+        if (activity.assistant) for (const text of previewLines(activity.assistant, "Says", width, 2)) lines.push({ text, color: "text" });
+        if (activity.summary) for (const text of previewLines(activity.summary, "Provider summary", width, 2)) lines.push({ text, color: "muted" });
+        const tools = Array.isArray(activity.tools) ? activity.tools : [];
+        for (const tool of tools.slice(-2)) add(lines, `Tool ${tool.status === "preparing" ? "preparing" : "requested"}: ${tool.name || "(pending)"}`, "amber", false, width, 2);
+      }
+    }
+    if (active.length > 100) add(lines, `${active.length - 100} more active requests`, "muted", false, width, 1);
+
+    section("RECENT REQUESTS");
+    if (!recent.length) add(lines, "No completed requests this session.", "muted", false, width, 2);
+    for (const request of recent.slice(0, 12)) {
+      add(lines, `${clock(request.endedAt)} #${request.id} ${String(request.state).toUpperCase()}`, tone(request.state), false, width, 2);
+      add(lines, request.model || "(model not supplied)", "text", false, width, 2);
+      add(lines, `${duration(request.durationMs)} / ${bytes(request.bytes)} / ${tokenLabel(request)}`, "muted", false, width, 2);
+      if (request.clientDisconnected) add(lines, request.completionObserved ? "Completed; client closed before EOF" : "Client disconnected before completion", "muted", false, width, 2);
+      if (request.error) add(lines, request.error, "red", false, width, 3);
+    }
+    if (state.insights?.length) {
+      section("SESSION SIGNALS");
+      for (const insight of state.insights.slice(0, 6)) add(lines, insight.message, tone(insight.level), false, width, 3);
+    }
+    return lines;
+  }
+
+  function logLines(width) {
+    const source = pausedLogs || state.logs || [];
+    const needle = (searching ? searchDraft : query).toLowerCase();
+    const sameEntries =
+      logCache &&
+      logCache.source.length === source.length &&
+      logCache.source[0] === source[0] &&
+      logCache.source.at(-1) === source.at(-1);
+    if (
+      sameEntries &&
+      logCache.width === width &&
+      logCache.level === level &&
+      logCache.needle === needle &&
+      logCache.clearedIds === clearedIds
+    )
+      return logCache;
+    const lines = [];
+    const rowCounts = new Map();
+    let count = 0;
+    for (const entry of source.slice(-400)) {
+      if (
+        clearedIds.has(entry.id) ||
+        (level !== "all" && entry.level !== level)
+      )
+        continue;
+      if (
+        needle &&
+        !clean(`${entry.message} ${entry.model || ""} ${entry.requestId ?? ""}`)
+          .toLowerCase()
+          .includes(needle)
+      )
+        continue;
+      count++;
+      const knownLevel = LEVELS.includes(entry.level) ? entry.level : "info";
+      const rowStart = lines.length;
+      const prefix = `${clock(entry.time)} ${knownLevel.toUpperCase().padEnd(5)}${entry.requestId != null ? ` #${entry.requestId}` : ""}`;
+      add(
+        lines,
+        `${prefix} ${entry.message}`,
+        tone(knownLevel) === "muted" ? "text" : tone(knownLevel),
+        false,
+        width,
+        8,
+      );
+      if (entry.model) add(lines, `  ${entry.model}`, "muted", false, width, 4);
+      rowCounts.set(entry.id, lines.length - rowStart);
+    }
+    if (!lines.length) {
+      lines.push({ text: "" });
+      add(
+        lines,
+        needle || level !== "all"
+          ? "No logs match this filter."
+          : clearedIds.size
+            ? "View cleared. New events will appear here."
+            : "Waiting for proxy events.",
+        "text",
+        true,
+        width,
+      );
+      add(
+        lines,
+        needle || level !== "all"
+          ? "Press / to edit search; f changes the level."
+          : "Request bodies and credentials are not logged.",
+        "muted",
+        false,
+        width,
+      );
+    }
+    logCache = {
+      source,
+      width,
+      level,
+      needle,
+      clearedIds,
+      lines,
+      count,
+      rowCounts,
+    };
+    return logCache;
+  }
+
+  function paint(text, width, color = "text", bold = false) {
+    return `${COLOR[color] || COLOR.text}${bold ? COLOR.bold : COLOR.normal}${fit(text, width)}${COLOR.normal}${COLOR.base}`;
+  }
+
+  function masthead(columns, rows) {
+    const totals = state.totals || {};
+    const information = [
+      { text: "BRINK / CONNECTION", color: "amber", bold: true },
+      { text: `RUNNING  127.0.0.1:${state.port}`, color: "green" },
+      { text: `${totals.requests || 0} req / ${(state.active || []).length} active / ${totals.failed || 0} failed`, color: "muted" },
+      { text: `Tokens ${totals.usageRequests ? tokenLabel(totals) : "pending"}`, color: "muted" },
+      { text: "In another terminal:", color: "muted" },
+      { text: launchHint, color: "amber", bold: true },
+    ];
+    const sideBySide = columns >= 64;
+    const artBudget = rows >= 56 ? 23 : rows >= 34 ? 11 : rows >= 22 ? 6 : rows >= 16 ? 3 : 0;
+    const art = mascotLines(sideBySide ? columns - 36 : columns - 2, sideBySide ? artBudget : Math.min(3, artBudget));
+    const lines = [];
+    if (sideBySide && art.length) {
+      const artWidth = art[0].length;
+      const textWidth = columns - artWidth - 4;
+      const height = Math.max(art.length, rows >= 22 ? 6 : 3);
+      const textStart = Math.floor((height - Math.min(height, information.length)) / 2);
+      for (let i = 0; i < height; i++) {
+        const info = information[i - textStart] || { text: "" };
+        lines.push(
+          paint(" ", 1) + paint(art[i] || "", artWidth, "amber") +
+          paint(" │ ", 3, "border") + paint(info.text, textWidth, info.color, info.bold),
+        );
+      }
+    } else {
+      for (const row of art) lines.push(paint(` ${row}`, columns, "amber"));
+      for (const info of information.slice(0, rows >= 12 ? 3 : 2))
+        lines.push(paint(` ${info.text}`, columns, info.color, info.bold));
+    }
+    return lines;
+  }
+
+  function render() {
+    pending = null;
+    if (closed) return;
+    lastRender = Date.now();
+    const columns = Math.max(1, output.columns || 80);
+    const rows = Math.max(1, output.rows || 24);
+    const resized = columns !== previousColumns || rows !== previousRows;
+    const frame = masthead(columns, rows);
+    if (columns < 48 || rows < 12) {
+      const contentWidth = Math.max(1, columns - 2);
+      const traffic = trafficLines(contentWidth);
+      const logs = logLines(contentWidth);
+      lastTrafficLines = traffic.length;
+      lastLogLines = logs.lines.length;
+      const footerRows = rows >= 12 ? 3 : 1;
+      const availableRows = Math.max(0, rows - frame.length - footerRows);
+      bodyHeight = Math.max(0, Math.floor((availableRows - 2) / 2));
+      logBodyHeight = Math.max(0, availableRows - bodyHeight - 2);
+      trafficOffset = Math.min(trafficOffset, Math.max(0, traffic.length - bodyHeight));
+      logOffset = follow ? Math.max(0, logs.lines.length - logBodyHeight) : Math.min(logOffset, Math.max(0, logs.lines.length - logBodyHeight));
+      if (availableRows >= 2) {
+        frame.push(paint(" OVERVIEW / j/k scroll", columns, "section", true));
+        for (let i = 0; i < bodyHeight; i++) {
+          const line = traffic[trafficOffset + i] || { text: "" };
+          frame.push(paint(` ${line.text}`, columns, line.color, line.bold));
+        }
+        frame.push(paint(` ACTIVITY LOG / ${pausedLogs ? "PAUSED" : "LIVE"} / ${level}`, columns, "section", true));
+        for (let i = 0; i < logBodyHeight; i++) {
+          const line = logs.lines[logOffset + i] || { text: "" };
+          frame.push(paint(` ${line.text}`, columns, line.color, line.bold));
+        }
+      }
+      while (frame.length < rows - footerRows) frame.push(paint("", columns));
+      frame.length = Math.min(frame.length, Math.max(0, rows - footerRows));
+      frame.push(paint(searching ? ` Search: ${searchDraft}_` : " q Quit / Search p Pause c Clear f Level", columns, "text"));
+      if (footerRows === 3) {
+        frame.push(paint(" Arrows Logs | j/k Overview | v Preview", columns, "muted"));
+        frame.push(paint(` ${credit}`, columns, "muted"));
+      }
+    } else {
+      const leftWidth = Math.floor((columns - 1) / 2);
+      const rightWidth = columns - leftWidth - 1;
+      const leftContent = Math.max(1, leftWidth - 2);
+      const rightContent = Math.max(1, rightWidth - 2);
+      frame.push(paint("─".repeat(columns), columns, "border"));
+      const leftHeader = trafficOffset
+        ? ` OVERVIEW / line ${trafficOffset + 1}`
+        : ` OVERVIEW / ${launchHint}`;
+      const rightHeader = ` ACTIVITY LOG / ${pausedLogs ? "PAUSED" : "LIVE"} / ${level}`;
+      frame.push(
+        paint(leftHeader, leftWidth, "section", true) +
+          paint("│", 1, "border") +
+          paint(rightHeader, rightWidth, "section", true),
+      );
+      bodyHeight = Math.max(1, rows - frame.length - 4);
+      logBodyHeight = bodyHeight;
+      const traffic = trafficLines(leftContent);
+      const logs = logLines(rightContent);
+      lastTrafficLines = traffic.length;
+      lastLogLines = logs.lines.length;
+      trafficOffset = Math.min(
+        trafficOffset,
+        Math.max(0, traffic.length - bodyHeight),
+      );
+      logOffset = follow
+        ? Math.max(0, logs.lines.length - logBodyHeight)
+        : Math.min(logOffset, Math.max(0, logs.lines.length - logBodyHeight));
+      for (let i = 0; i < bodyHeight; i++) {
+        const left = traffic[trafficOffset + i] || { text: "" };
+        const right = logs.lines[logOffset + i] || { text: "" };
+        frame.push(
+          paint(" ", 1) +
+            paint(left.text, leftContent, left.color, left.bold) +
+            paint(" ", 1) +
+            paint("│", 1, "border") +
+            paint(" ", 1) +
+            paint(right.text, rightContent, right.color, right.bold) +
+            paint(" ", 1),
+        );
+      }
+      frame.push(
+        paint(
+          ` Traffic ${Math.min(trafficOffset + bodyHeight, traffic.length)}/${traffic.length} lines`,
+          leftWidth,
+          "muted",
+        ) +
+          paint("│", 1, "border") +
+          paint(
+            ` ${logs.count} events / ${pausedLogs ? "view frozen" : "memory only"}`,
+            rightWidth,
+            "muted",
+          ),
+      );
+      const filter = searching
+        ? ` Search: ${searchDraft}_  [Enter apply / Esc cancel]`
+        : ` / Search   v Previews ${showPreviews ? "on" : "off"}   ${query ? `Filter: ${query}` : "brink setup to configure"}`;
+      frame.push(paint(filter, columns, "section"));
+      const help =
+        columns >= 110
+          ? " q Quit | p Pause | c Clear | f Level | / Search | Up/Down/PgUp/PgDn Logs | End Follow | j/k Traffic | v Preview"
+          : columns >= 76
+            ? " q Quit p Pause c Clear f Level / Search | Up/Down Logs | j/k Traffic v Preview"
+            : " q Quit p Pause c Clear f Level / Search v Preview";
+      frame.push(paint(help, columns, "text"));
+      frame.push(paint(` ${credit}`, columns, "muted"));
+    }
+    let buffer = resized ? `${ESC}2J` : "";
+    for (let i = 0; i < frame.length; i++) {
+      if (resized || frame[i] !== previousLines[i])
+        buffer += `${ESC}${i + 1};1H${COLOR.base}${frame[i]}`;
+    }
+    if (buffer) output.write(buffer);
+    previousLines = frame;
+    previousColumns = columns;
+    previousRows = rows;
+  }
+
+  function schedule() {
+    if (closed || pending) return;
+    pending = setTimeout(render, Math.max(0, 250 - (Date.now() - lastRender)));
+    pending.unref();
+  }
+
+  function onState(next) {
+    if (closed) return;
+    const previous = pausedLogs || state.logs || [];
+    const nextLogs = pausedLogs || next.logs || [];
+    if (
+      !follow &&
+      !pausedLogs &&
+      previous.length &&
+      nextLogs.length &&
+      previous[0].id !== nextLogs[0].id
+    ) {
+      // Keep the same visible entry as the bounded monitor buffer rolls over.
+      const anchor = previous.findIndex((entry) => entry.id === nextLogs[0].id);
+      if (anchor < 0) logOffset = 0;
+      else if (logCache) {
+        for (let i = 0; i < anchor; i++)
+          logOffset -= logCache.rowCounts.get(previous[i].id) || 0;
+        logOffset = Math.max(0, logOffset);
+      }
+    }
+    state = next;
+    if (clearedIds.size) {
+      const retained = new Set(
+        [...(state.logs || []), ...(pausedLogs || [])].map((entry) => entry.id),
+      );
+      const kept = [...clearedIds].filter((id) => retained.has(id));
+      if (kept.length !== clearedIds.size) clearedIds = new Set(kept);
+    }
+    schedule();
+  }
+
+  function onKey(text, key = {}) {
+    if (closed) return;
+    if (key.ctrl && key.name === "c") {
+      close();
+      process.kill(process.pid, "SIGINT");
+      return;
+    }
+    if (searching) {
+      if (key.name === "escape") {
+        searching = false;
+        searchDraft = null;
+      } else if (key.name === "return" || key.name === "enter") {
+        query = searchDraft;
+        searching = false;
+        searchDraft = null;
+      } else if (key.name === "backspace") {
+        const segments = [...SEGMENTS.segment(searchDraft)];
+        searchDraft = segments
+          .slice(0, -1)
+          .map((part) => part.segment)
+          .join("");
+      } else if (key.ctrl && key.name === "u") {
+        searchDraft = "";
+      } else if (!key.ctrl && !key.meta && text && !text.includes("\x1b")) {
+        searchDraft = (searchDraft + clean(text)).slice(0, 160);
+      }
+      logOffset = 0;
+      follow = false;
+      schedule();
+      return;
+    }
+    if (text === "q") {
+      close();
+      process.kill(process.pid, "SIGINT");
+      return;
+    }
+    if (text === "p") {
+      pausedLogs = pausedLogs ? null : (state.logs || []).slice(-400);
+      logCache = null;
+    } else if (text === "c") {
+      clearedIds = new Set(
+        [...(state.logs || []), ...(pausedLogs || [])].map((entry) => entry.id),
+      );
+      logOffset = 0;
+      follow = true;
+    } else if (text === "f") {
+      level = LEVELS[(LEVELS.indexOf(level) + 1) % LEVELS.length];
+      logOffset = 0;
+      follow = true;
+    } else if (text === "/") {
+      searching = true;
+      searchDraft = query;
+    } else if (text === "v") {
+      showPreviews = !showPreviews;
+    } else if (text === "j") {
+      trafficOffset = Math.min(
+        Math.max(0, lastTrafficLines - bodyHeight),
+        trafficOffset + 1,
+      );
+    } else if (text === "k") {
+      trafficOffset = Math.max(0, trafficOffset - 1);
+    } else if (key.name === "up" || key.name === "pageup") {
+      follow = false;
+      logOffset = Math.max(
+        0,
+        logOffset - (key.name === "pageup" ? Math.max(1, logBodyHeight) : 1),
+      );
+    } else if (key.name === "down" || key.name === "pagedown") {
+      logOffset = Math.min(
+        Math.max(0, lastLogLines - logBodyHeight),
+        logOffset + (key.name === "pagedown" ? Math.max(1, logBodyHeight) : 1),
+      );
+      follow = logOffset >= lastLogLines - logBodyHeight;
+    } else if (key.name === "home") {
+      follow = false;
+      logOffset = 0;
+    } else if (key.name === "end") {
+      follow = true;
+    } else {
+      return;
+    }
+    schedule();
+  }
+
+  function close() {
+    if (closed) return;
+    closed = true;
+    clearTimeout(pending);
+    unsubscribe();
+    input.removeListener("keypress", onKey);
+    process.removeListener("SIGWINCH", schedule);
+    process.removeListener("exit", close);
+    input.setRawMode(wasRaw);
+    if (wasPaused) input.pause();
+    output.write(`${ESC}0m${ESC}?7h${ESC}?25h${ESC}?1049l`);
+  }
+
+  output.write(`${ESC}?1049h${ESC}?25l${ESC}?7l${ESC}2J`);
+  input.setRawMode(true);
+  readline.emitKeypressEvents(input);
+  input.on("keypress", onKey);
+  input.resume();
+  process.on("SIGWINCH", schedule);
+  process.on("exit", close);
+  unsubscribe = monitor.subscribe(onState);
+  clearTimeout(pending);
+  render();
+  return { close };
+}
+
+module.exports = { startTerminalUI, clean, fit, wrap };