@pi-unipi/updater 0.1.1

package/src/tui/changelog-overlay.ts

@@ -0,0 +1,256 @@
+/**
+ * @pi-unipi/updater — Changelog TUI Overlay
+ *
+ * Version list with Current/New labels, Enter opens detail view, Esc/q back.
+ * Uses ctx.ui.custom() overlay API with component return pattern.
+ */
+
+import { existsSync } from "fs";
+import { join } from "path";
+import { Key, matchesKey, truncateToWidth, visibleWidth } from "@mariozechner/pi-tui";
+import type { Theme } from "@mariozechner/pi-coding-agent";
+import { parseChangelog } from "../changelog.js";
+import { renderMarkdown } from "../markdown.js";
+import { getPackageVersion } from "@pi-unipi/core";
+import type { ChangelogEntry } from "../../types.js";
+
+type View = "list" | "detail";
+
+interface ChangelogState {
+  view: View;
+  entries: ChangelogEntry[];
+  listIndex: number;
+  listScroll: number;
+  detailScroll: number;
+  installedVersion: string;
+}
+
+/**
+ * Pad content to exact visible width.
+ */
+function padVisible(content: string, targetWidth: number): string {
+  const vw = visibleWidth(content);
+  const pad = Math.max(0, targetWidth - vw);
+  return content + " ".repeat(pad);
+}
+
+/**
+ * Render the changelog overlay.
+ */
+export function renderChangelogOverlay() {
+  return (
+    tui: any,
+    theme: Theme,
+    _kb: any,
+    done: (result: { viewed: boolean } | null) => void,
+  ) => {
+    const installedVersion = getPackageVersion(
+      new URL("../../..", import.meta.url).pathname,
+    );
+
+    const state: ChangelogState = {
+      view: "list",
+      entries: [],
+      listIndex: 0,
+      listScroll: 0,
+      detailScroll: 0,
+      installedVersion,
+    };
+
+    // Load changelog
+    let loaded = false;
+    const ensureLoaded = () => {
+      if (loaded) return;
+      const changelogPath = join(process.cwd(), "CHANGELOG.md");
+      if (existsSync(changelogPath)) {
+        state.entries = parseChangelog(changelogPath);
+      }
+      loaded = true;
+    };
+
+    const render = (width: number): string[] => {
+      ensureLoaded();
+
+      const innerWidth = Math.max(22, width - 2);
+      const lines: string[] = [];
+
+      // ── Header ──────────────────────────────────────────────────────
+      lines.push(theme.fg("accent", `╭${"─".repeat(innerWidth)}╮`));
+      lines.push(
+        theme.fg("accent", "│") +
+        padVisible(theme.fg("accent", theme.bold(" 📋 Changelog ")), innerWidth) +
+        theme.fg("accent", "│"),
+      );
+      lines.push(theme.fg("accent", `├${"─".repeat(innerWidth)}┤`));
+
+      // ── Content ─────────────────────────────────────────────────────
+      if (state.view === "list") {
+        renderListView(lines, innerWidth);
+      } else {
+        renderDetailView(lines, innerWidth);
+      }
+
+      // ── Footer ──────────────────────────────────────────────────────
+      lines.push(theme.fg("accent", `├${"─".repeat(innerWidth)}┤`));
+      const footer =
+        state.view === "list"
+          ? ` ${theme.fg("accent", "j/k")} navigate  ${theme.fg("success", "Enter")} view details  ${theme.fg("error", "q/Esc")} close`
+          : ` ${theme.fg("accent", "j/k")} scroll  ${theme.fg("error", "q/Esc")} back to list`;
+      lines.push(
+        theme.fg("accent", "│") +
+        padVisible(truncateToWidth(footer, innerWidth), innerWidth) +
+        theme.fg("accent", "│"),
+      );
+      lines.push(theme.fg("accent", `╰${"─".repeat(innerWidth)}╯`));
+
+      return lines;
+    };
+
+    const renderListView = (lines: string[], innerWidth: number) => {
+      if (state.entries.length === 0) {
+        lines.push(
+          theme.fg("accent", "│") +
+          padVisible(theme.fg("muted", "  No changelog available."), innerWidth) +
+          theme.fg("accent", "│"),
+        );
+        return;
+      }
+
+      state.listIndex = Math.min(state.listIndex, state.entries.length - 1);
+      state.listIndex = Math.max(0, state.listIndex);
+
+      // Show visible entries
+      const maxLines = 20;
+      if (state.listIndex < state.listScroll) state.listScroll = state.listIndex;
+      if (state.listIndex >= state.listScroll + maxLines) {
+        state.listScroll = state.listIndex - maxLines + 1;
+      }
+
+      const visible = state.entries.slice(state.listScroll, state.listScroll + maxLines);
+
+      for (let i = 0; i < visible.length; i++) {
+        const entry = visible[i]!;
+        const globalIdx = state.listScroll + i;
+        const selected = globalIdx === state.listIndex;
+        const prefix = selected ? theme.fg("accent", "▸ ") : "  ";
+
+        let label: string;
+        if (entry.version === "Unreleased") {
+          label = theme.fg("muted", "Unreleased");
+        } else if (entry.version === state.installedVersion) {
+          label = theme.fg("success", "✓ Current");
+        } else {
+          const pa = entry.version.split(".").map(Number);
+          const pb = state.installedVersion.split(".").map(Number);
+          const isNewer =
+            pa[0]! > pb[0]! ||
+            (pa[0] === pb[0] && pa[1]! > pb[1]!) ||
+            (pa[0] === pb[0] && pa[1] === pb[1] && pa[2]! > pb[2]!);
+          label = isNewer ? theme.fg("warning", "↑ New") : "";
+        }
+
+        const version = selected ? theme.bold(entry.version) : theme.fg("text", entry.version);
+        const date = entry.date ? ` — ${theme.fg("muted", entry.date)}` : "";
+        const line = ` ${prefix}${version}${date}  ${label}`;
+        lines.push(
+          theme.fg("accent", "│") +
+          padVisible(
+            selected ? theme.bg("selectedBg", truncateToWidth(line, innerWidth)) : truncateToWidth(line, innerWidth),
+            innerWidth,
+          ) +
+          theme.fg("accent", "│"),
+        );
+      }
+    };
+
+    const renderDetailView = (lines: string[], innerWidth: number) => {
+      const entry = state.entries[state.listIndex];
+      if (!entry) {
+        lines.push(
+          theme.fg("accent", "│") +
+          padVisible(theme.fg("muted", "  No entry selected."), innerWidth) +
+          theme.fg("accent", "│"),
+        );
+        return;
+      }
+
+      const title = entry.date
+        ? `${theme.bold(entry.version)} — ${theme.fg("muted", entry.date)}`
+        : `${theme.bold(entry.version)} — ${theme.fg("muted", "Unreleased")}`;
+      lines.push(
+        theme.fg("accent", "│") +
+        padVisible(truncateToWidth(`  ${title}`, innerWidth), innerWidth) +
+        theme.fg("accent", "│"),
+      );
+      lines.push(
+        theme.fg("accent", "│") +
+        padVisible("", innerWidth) +
+        theme.fg("accent", "│"),
+      );
+
+      const bodyLines = renderMarkdown(entry.body, innerWidth - 2, theme);
+      const maxScroll = Math.max(0, bodyLines.length - 15);
+      state.detailScroll = Math.min(state.detailScroll, maxScroll);
+      state.detailScroll = Math.max(0, state.detailScroll);
+
+      const visible = bodyLines.slice(state.detailScroll, state.detailScroll + 15);
+      for (const line of visible) {
+        lines.push(
+          theme.fg("accent", "│") +
+          padVisible(truncateToWidth(`  ${line}`, innerWidth), innerWidth) +
+          theme.fg("accent", "│"),
+        );
+      }
+    };
+
+    const handleInput = (data: string) => {
+      ensureLoaded();
+
+      // Close from list view
+      if ((matchesKey(data, Key.escape) || data === "q") && state.view === "list") {
+        done({ viewed: true });
+        return;
+      }
+
+      // Back from detail view
+      if ((matchesKey(data, Key.escape) || data === "q") && state.view === "detail") {
+        state.view = "list";
+        state.detailScroll = 0;
+        tui.requestRender();
+        return;
+      }
+
+      // Navigation
+      if (state.view === "list") {
+        if (matchesKey(data, Key.down) || data === "j") {
+          state.listIndex = Math.min(state.listIndex + 1, state.entries.length - 1);
+        } else if (matchesKey(data, Key.up) || data === "k") {
+          state.listIndex = Math.max(state.listIndex - 1, 0);
+        } else if (matchesKey(data, Key.enter)) {
+          if (state.entries.length > 0) {
+            state.view = "detail";
+            state.detailScroll = 0;
+          }
+        } else if (data === "g") {
+          state.listIndex = 0;
+        } else if (data === "G") {
+          state.listIndex = state.entries.length - 1;
+        }
+      } else {
+        if (matchesKey(data, Key.down) || data === "j") {
+          state.detailScroll++;
+        } else if (matchesKey(data, Key.up) || data === "k") {
+          state.detailScroll = Math.max(0, state.detailScroll - 1);
+        } else if (data === "g") {
+          state.detailScroll = 0;
+        } else if (data === "G") {
+          state.detailScroll = 999999;
+        }
+      }
+
+      tui.requestRender();
+    };
+
+    return { render, handleInput, invalidate: () => {}, focused: true };
+  };
+}

package/src/tui/readme-overlay.ts

@@ -0,0 +1,236 @@
+/**
+ * @pi-unipi/updater — Readme TUI Overlay
+ *
+ * Package list with versions, Enter opens content view.
+ * No-arg /unipi:readme opens directly to root README content.
+ * With arg, opens directly to that package's content.
+ */
+
+import { readFileSync } from "fs";
+import { Key, matchesKey, truncateToWidth, visibleWidth } from "@mariozechner/pi-tui";
+import type { Theme } from "@mariozechner/pi-coding-agent";
+import { discoverReadmes, resolveReadmePath } from "../readme.js";
+import { renderMarkdown } from "../markdown.js";
+import type { ReadmeEntry } from "../../types.js";
+
+type View = "list" | "content";
+
+interface ReadmeState {
+  view: View;
+  entries: ReadmeEntry[];
+  listIndex: number;
+  listScroll: number;
+  contentScroll: number;
+  contentLines: string[];
+}
+
+/**
+ * Pad content to exact visible width.
+ */
+function padVisible(content: string, targetWidth: number): string {
+  const vw = visibleWidth(content);
+  const pad = Math.max(0, targetWidth - vw);
+  return content + " ".repeat(pad);
+}
+
+/**
+ * Render the readme overlay.
+ */
+export function renderReadmeOverlay(params?: { openDirect?: string }) {
+  return (
+    tui: any,
+    theme: Theme,
+    _kb: any,
+    done: (result: { viewed: boolean } | null) => void,
+  ) => {
+    const state: ReadmeState = {
+      view: "list",
+      entries: [],
+      listIndex: 0,
+      listScroll: 0,
+      contentScroll: 0,
+      contentLines: [],
+    };
+
+    let loaded = false;
+    const ensureLoaded = () => {
+      if (loaded) return;
+      state.entries = discoverReadmes();
+
+      if (params?.openDirect) {
+        const readmePath = resolveReadmePath(params.openDirect);
+        if (readmePath) {
+          const content = readFileSync(readmePath, "utf-8");
+          state.contentLines = renderMarkdown(content, (tui.width ?? 80) - 4, theme);
+          state.view = "content";
+        }
+      }
+      loaded = true;
+    };
+
+    const render = (width: number): string[] => {
+      ensureLoaded();
+
+      const innerWidth = Math.max(22, width - 2);
+      const lines: string[] = [];
+
+      // ── Header ──────────────────────────────────────────────────────
+      lines.push(theme.fg("accent", `╭${"─".repeat(innerWidth)}╮`));
+      lines.push(
+        theme.fg("accent", "│") +
+        padVisible(theme.fg("accent", theme.bold(" 📖 README Browser ")), innerWidth) +
+        theme.fg("accent", "│"),
+      );
+      lines.push(theme.fg("accent", `├${"─".repeat(innerWidth)}┤`));
+
+      // ── Content ─────────────────────────────────────────────────────
+      if (state.view === "list") {
+        renderListView(lines, innerWidth);
+      } else {
+        renderContentView(lines, innerWidth);
+      }
+
+      // ── Footer ──────────────────────────────────────────────────────
+      lines.push(theme.fg("accent", `├${"─".repeat(innerWidth)}┤`));
+      const footer =
+        state.view === "list"
+          ? ` ${theme.fg("accent", "j/k")} navigate  ${theme.fg("success", "Enter")} read  ${theme.fg("error", "q/Esc")} close`
+          : ` ${theme.fg("accent", "j/k")} scroll  ${theme.fg("error", "q/Esc")} back to list`;
+      lines.push(
+        theme.fg("accent", "│") +
+        padVisible(truncateToWidth(footer, innerWidth), innerWidth) +
+        theme.fg("accent", "│"),
+      );
+      lines.push(theme.fg("accent", `╰${"─".repeat(innerWidth)}╯`));
+
+      return lines;
+    };
+
+    const renderListView = (lines: string[], innerWidth: number) => {
+      if (state.entries.length === 0) {
+        lines.push(
+          theme.fg("accent", "│") +
+          padVisible(theme.fg("muted", "  No README files found."), innerWidth) +
+          theme.fg("accent", "│"),
+        );
+        return;
+      }
+
+      state.listIndex = Math.min(state.listIndex, state.entries.length - 1);
+      state.listIndex = Math.max(0, state.listIndex);
+
+      const maxLines = 20;
+      if (state.listIndex < state.listScroll) state.listScroll = state.listIndex;
+      if (state.listIndex >= state.listScroll + maxLines) {
+        state.listScroll = state.listIndex - maxLines + 1;
+      }
+
+      const visible = state.entries.slice(state.listScroll, state.listScroll + maxLines);
+
+      for (let i = 0; i < visible.length; i++) {
+        const entry = visible[i]!;
+        const globalIdx = state.listScroll + i;
+        const selected = globalIdx === state.listIndex;
+        const prefix = selected ? theme.fg("accent", "▸ ") : "  ";
+
+        const name = selected ? theme.bold(entry.name) : theme.fg("text", entry.name);
+        const version = theme.fg("muted", `v${entry.version}`);
+        const line = ` ${prefix}${name}  ${version}`;
+        lines.push(
+          theme.fg("accent", "│") +
+          padVisible(
+            selected ? theme.bg("selectedBg", truncateToWidth(line, innerWidth)) : truncateToWidth(line, innerWidth),
+            innerWidth,
+          ) +
+          theme.fg("accent", "│"),
+        );
+      }
+    };
+
+    const renderContentView = (lines: string[], innerWidth: number) => {
+      if (state.contentLines.length === 0) {
+        lines.push(
+          theme.fg("accent", "│") +
+          padVisible(theme.fg("muted", "  No content available."), innerWidth) +
+          theme.fg("accent", "│"),
+        );
+        return;
+      }
+
+      const maxLines = 20;
+      const maxScroll = Math.max(0, state.contentLines.length - maxLines);
+      state.contentScroll = Math.min(state.contentScroll, maxScroll);
+      state.contentScroll = Math.max(0, state.contentScroll);
+
+      const visible = state.contentLines.slice(state.contentScroll, state.contentScroll + maxLines);
+      for (const line of visible) {
+        lines.push(
+          theme.fg("accent", "│") +
+          padVisible(truncateToWidth(` ${line}`, innerWidth), innerWidth) +
+          theme.fg("accent", "│"),
+        );
+      }
+    };
+
+    const handleInput = (data: string) => {
+      ensureLoaded();
+
+      // Close from list view
+      if ((matchesKey(data, Key.escape) || data === "q") && state.view === "list") {
+        done({ viewed: true });
+        return;
+      }
+
+      // Back from content view
+      if ((matchesKey(data, Key.escape) || data === "q") && state.view === "content") {
+        if (params?.openDirect) {
+          done({ viewed: true });
+          return;
+        }
+        state.view = "list";
+        state.contentScroll = 0;
+        tui.requestRender();
+        return;
+      }
+
+      if (state.view === "list") {
+        if (matchesKey(data, Key.down) || data === "j") {
+          state.listIndex = Math.min(state.listIndex + 1, state.entries.length - 1);
+        } else if (matchesKey(data, Key.up) || data === "k") {
+          state.listIndex = Math.max(state.listIndex - 1, 0);
+        } else if (matchesKey(data, Key.enter)) {
+          if (state.entries.length > 0) {
+            const entry = state.entries[state.listIndex]!;
+            try {
+              const content = readFileSync(entry.path, "utf-8");
+              state.contentLines = renderMarkdown(content, (tui.width ?? 80) - 4, theme);
+              state.contentScroll = 0;
+              state.view = "content";
+            } catch {
+              state.contentLines = ["  Error reading README file."];
+              state.view = "content";
+            }
+          }
+        } else if (data === "g") {
+          state.listIndex = 0;
+        } else if (data === "G") {
+          state.listIndex = state.entries.length - 1;
+        }
+      } else {
+        if (matchesKey(data, Key.down) || data === "j") {
+          state.contentScroll++;
+        } else if (matchesKey(data, Key.up) || data === "k") {
+          state.contentScroll = Math.max(0, state.contentScroll - 1);
+        } else if (data === "g") {
+          state.contentScroll = 0;
+        } else if (data === "G") {
+          state.contentScroll = 999999;
+        }
+      }
+
+      tui.requestRender();
+    };
+
+    return { render, handleInput, invalidate: () => {}, focused: true };
+  };
+}

package/src/tui/settings-overlay.ts

@@ -0,0 +1,191 @@
+/**
+ * @pi-unipi/updater — Settings TUI Overlay
+ *
+ * Check interval radio (30min/1h/6h/1d), auto-update radio (disabled/notify/auto).
+ * Space cycles options, Enter saves, Esc cancels.
+ */
+
+import {
+  loadConfig,
+  saveConfig,
+  getIntervalOptions,
+  getAutoUpdateOptions,
+  getIntervalLabel,
+} from "../settings.js";
+import type { UpdaterConfig } from "../../types.js";
+
+/** ANSI codes */
+const ESC = "\x1b";
+const BOLD = `${ESC}[1m`;
+const DIM = `${ESC}[2m`;
+const TEAL = `${ESC}[36m`;
+const GREEN = `${ESC}[32m`;
+const RESET = `${ESC}[0m`;
+
+/** Truncate string to visible width */
+function trunc(text: string, width: number): string {
+  let vw = 0;
+  let result = "";
+  let inEsc = false;
+  for (const ch of text) {
+    if (ch === "\x1b") { inEsc = true; result += ch; continue; }
+    if (inEsc) { result += ch; if (ch === "m") inEsc = false; continue; }
+    if (vw >= width) break;
+    result += ch;
+    vw++;
+  }
+  return result;
+}
+
+/**
+ * Render the settings overlay.
+ */
+export function renderSettingsOverlay() {
+  return (
+    tui: any,
+    _theme: any,
+    _kb: any,
+    done: (result: { saved: boolean } | null) => void,
+  ) => {
+    const state = {
+      config: { ...loadConfig() } as UpdaterConfig,
+      row: 0,
+    };
+
+    const intervalOptions = getIntervalOptions();
+    const modeOptions = getAutoUpdateOptions();
+
+    const render = (width: number): string[] => {
+      const lines: string[] = [];
+
+      lines.push(trunc(` ${BOLD}⚙ Updater Settings${RESET}`, width));
+      lines.push("─".repeat(width));
+      lines.push("");
+
+      // Row 0: Check Interval
+      const intervalLabel = getIntervalLabel(state.config.checkIntervalMs);
+      const row0Selected = state.row === 0;
+      const row0Prefix = row0Selected ? `${TEAL}▸${RESET} ` : "  ";
+      lines.push(
+        trunc(
+          `  ${row0Prefix}${BOLD}Check Interval${RESET}  ${DIM}${intervalLabel}${RESET}`,
+          width,
+        ),
+      );
+
+      const intervalLine = intervalOptions
+        .map((opt) => {
+          const active = opt.ms === state.config.checkIntervalMs;
+          return active
+            ? `${GREEN}● ${opt.label}${RESET}`
+            : `${DIM}○ ${opt.label}${RESET}`;
+        })
+        .join("   ");
+      lines.push(trunc(`      ${intervalLine}`, width));
+      lines.push("");
+
+      // Row 1: Auto Update
+      const modeLabel = state.config.autoUpdate;
+      const row1Selected = state.row === 1;
+      const row1Prefix = row1Selected ? `${TEAL}▸${RESET} ` : "  ";
+      lines.push(
+        trunc(
+          `  ${row1Prefix}${BOLD}Auto Update${RESET}  ${DIM}${modeLabel}${RESET}`,
+          width,
+        ),
+      );
+
+      const modeLine = modeOptions
+        .map((mode) => {
+          const active = mode === state.config.autoUpdate;
+          return active
+            ? `${GREEN}● ${mode}${RESET}`
+            : `${DIM}○ ${mode}${RESET}`;
+        })
+        .join("   ");
+      lines.push(trunc(`      ${modeLine}`, width));
+      lines.push("");
+
+      lines.push("─".repeat(width));
+      lines.push(
+        trunc(
+          `  j/k: navigate  Space: cycle  ${GREEN}Enter: save${RESET}  ${DIM}Esc: cancel${RESET}`,
+          width,
+        ),
+      );
+
+      return lines;
+    };
+
+    const handleInput = (data: string) => {
+      const key = data.toLowerCase();
+
+      // Close without saving
+      if (key === "\x1b") {
+        done({ saved: false });
+        return;
+      }
+
+      // Save and close
+      if (key === "\r" || key === "\n") {
+        saveConfig(state.config);
+        done({ saved: true });
+        return;
+      }
+
+      // Navigate rows
+      if (key === "j" || key === "\x1b[B") {
+        state.row = Math.min(state.row + 1, 1);
+      } else if (key === "k" || key === "\x1b[A") {
+        state.row = Math.max(state.row - 1, 0);
+      }
+
+      // Cycle with Space
+      if (key === " ") {
+        if (state.row === 0) {
+          const currentIdx = intervalOptions.findIndex(
+            (opt) => opt.ms === state.config.checkIntervalMs,
+          );
+          const nextIdx = (currentIdx + 1) % intervalOptions.length;
+          state.config.checkIntervalMs = intervalOptions[nextIdx].ms;
+        } else {
+          const currentIdx = modeOptions.indexOf(state.config.autoUpdate);
+          const nextIdx = (currentIdx + 1) % modeOptions.length;
+          state.config.autoUpdate = modeOptions[nextIdx];
+        }
+      }
+
+      // Cycle with left/right
+      if (key === "h" || key === "\x1b[D") {
+        if (state.row === 0) {
+          const currentIdx = intervalOptions.findIndex(
+            (opt) => opt.ms === state.config.checkIntervalMs,
+          );
+          const prevIdx = (currentIdx - 1 + intervalOptions.length) % intervalOptions.length;
+          state.config.checkIntervalMs = intervalOptions[prevIdx].ms;
+        } else {
+          const currentIdx = modeOptions.indexOf(state.config.autoUpdate);
+          const prevIdx = (currentIdx - 1 + modeOptions.length) % modeOptions.length;
+          state.config.autoUpdate = modeOptions[prevIdx];
+        }
+      }
+      if (key === "l" || key === "\x1b[C") {
+        if (state.row === 0) {
+          const currentIdx = intervalOptions.findIndex(
+            (opt) => opt.ms === state.config.checkIntervalMs,
+          );
+          const nextIdx = (currentIdx + 1) % intervalOptions.length;
+          state.config.checkIntervalMs = intervalOptions[nextIdx].ms;
+        } else {
+          const currentIdx = modeOptions.indexOf(state.config.autoUpdate);
+          const nextIdx = (currentIdx + 1) % modeOptions.length;
+          state.config.autoUpdate = modeOptions[nextIdx];
+        }
+      }
+
+      tui.requestRender();
+    };
+
+    return { render, handleInput, invalidate: () => {}, focused: true };
+  };
+}