@profullstack/g1tz 0.2.0

package/dist/github.js

@@ -0,0 +1,154 @@
+/**
+ * The GitHub half of Pulse: pull requests, issues, releases and stars over the
+ * period, read through the gh CLI. gh holds the login, so nothing here ever
+ * sees a token, and a machine without gh (or without a login) simply gets the
+ * git half on its own.
+ *
+ * Pages are walked newest-first and stop at the first item older than the
+ * period, under a small page budget, so a busy repository on "all time"
+ * cannot turn one keypress into a thousand requests. When the budget runs out
+ * the counts are floors and the result says so.
+ */
+import { execFile, spawnSync } from "node:child_process";
+import { git } from "./git.js";
+/**
+ * https, ssh and scp-style GitHub remotes, with or without .git, including
+ * GitHub's "SSH over the HTTPS port" form (ssh.github.com:443) and an explicit
+ * port. Anything else is null.
+ */
+export function parseGitHubRemote(url) {
+    const m = /^(?:https?:\/\/(?:[^@/]+@)?|git@|ssh:\/\/(?:git@)?)(?:ssh\.)?github\.com(?::\d+)?[/:]([^/\s]+)\/([^/\s]+?)(?:\.git)?\/?$/i.exec(url.trim());
+    return m ? { owner: m[1], name: m[2] } : null;
+}
+export function githubRemote(root) {
+    const url = git(root, ["remote", "get-url", "origin"]);
+    return url ? parseGitHubRemote(url) : null;
+}
+export const repoName = (repo) => `${repo.owner}/${repo.name}`;
+let ghPresent = null;
+/** Whether gh is on the PATH. Asked once per process. */
+export function ghInstalled() {
+    if (ghPresent === null)
+        ghPresent = spawnSync("gh", ["--version"], { encoding: "utf8" }).status === 0;
+    return ghPresent;
+}
+/** What to tell the user when gh could not answer. */
+export function ghErrorMessage(error, stderr) {
+    if (error.code === "ENOENT")
+        return "gh is not installed";
+    // `killed` is execFile's own timeout; a signal is gh dying to something else. Neither leaves anything on stderr.
+    if (error.killed || error.signal)
+        return "GitHub did not answer in time (gh was stopped after 60 seconds)";
+    const s = stderr.trim();
+    if (/gh auth login|not logged in|authentication required|HTTP 401/i.test(s))
+        return "gh is not logged in (run gh auth login)";
+    if (/rate limit/i.test(s))
+        return "GitHub API rate limit exceeded; try again later";
+    if (/HTTP 404/.test(s))
+        return "repository not found on GitHub, or the gh login cannot see it";
+    return s.split("\n")[0] || error.message;
+}
+export function ghFetch(path, headers = {}) {
+    return new Promise((resolve, reject) => {
+        const args = ["api", path];
+        for (const [k, v] of Object.entries(headers))
+            args.push("-H", `${k}: ${v}`);
+        execFile("gh", args, { encoding: "utf8", maxBuffer: 64 * 1024 * 1024, timeout: 60_000 }, (error, stdout, stderr) => {
+            if (error) {
+                reject(new Error(ghErrorMessage(error, stderr)));
+                return;
+            }
+            try {
+                resolve(JSON.parse(stdout));
+            }
+            catch {
+                reject(new Error("gh returned something that is not JSON"));
+            }
+        });
+    });
+}
+export const PAGE_BUDGET = { pulls: 5, issues: 5, releases: 2, stars: 3 };
+const STAR_HEADERS = { Accept: "application/vnd.github.star+json" };
+/** Walk numbered pages until `stop` says an item is older than needed, a short page ends the list, or the budget is spent. */
+async function walk(fetch, path, pages, stop) {
+    const items = [];
+    for (let page = 1; page <= pages; page++) {
+        const data = (await fetch(`${path}&page=${page}`));
+        if (!Array.isArray(data) || data.length === 0)
+            return { items, partial: false };
+        for (const item of data) {
+            if (stop(item))
+                return { items, partial: false };
+            items.push(item);
+        }
+        if (data.length < 100)
+            return { items, partial: false };
+    }
+    return { items, partial: true };
+}
+/** GitHub lists stargazers oldest first, so the count of new ones starts at the last page and walks back. */
+async function countStars(fetch, name, total, cutoff, pages) {
+    if (cutoff === 0 || total === 0)
+        return { count: total, partial: false };
+    const lastPage = Math.max(1, Math.ceil(total / 100));
+    let count = 0;
+    for (let page = lastPage, used = 0; page >= 1; page--, used++) {
+        if (used >= pages)
+            return { count, partial: true };
+        let data;
+        try {
+            data = (await fetch(`repos/${name}/stargazers?per_page=100&page=${page}`, STAR_HEADERS));
+        }
+        catch {
+            // GitHub refuses the stargazers list of a very large repository (facebook/react
+            // answers 404 on every page), and a rate limit can land here after everything
+            // else answered. The star count is the only casualty, not the whole read.
+            return { count, partial: true };
+        }
+        if (!Array.isArray(data))
+            return { count, partial: false };
+        for (let i = data.length - 1; i >= 0; i--) {
+            if (Date.parse(data[i].starred_at) < cutoff)
+                return { count, partial: false };
+            count++;
+        }
+    }
+    return { count, partial: false };
+}
+const item = (x, at) => ({ number: x.number, title: x.title, user: x.user?.login ?? "", at });
+const newest = (a, b) => b.at.localeCompare(a.at);
+export async function readGitHubPulse(repo, since, fetch = ghFetch, budget = PAGE_BUDGET) {
+    const name = repoName(repo);
+    const cutoff = since ? since.getTime() : 0;
+    const inRange = (iso) => iso !== null && iso !== undefined && Date.parse(iso) >= cutoff;
+    const stale = (iso) => !inRange(iso);
+    const info = (await fetch(`repos/${name}`));
+    // Sorted by last update, newest first: the first one untouched in the period ends the walk.
+    const pulls = await walk(fetch, `repos/${name}/pulls?state=all&sort=updated&direction=desc&per_page=100`, budget.pulls, (p) => stale(p.updated_at));
+    const sinceParam = since ? `&since=${since.toISOString()}` : "";
+    const issues = await walk(fetch, `repos/${name}/issues?state=all&sort=updated&direction=desc&per_page=100${sinceParam}`, budget.issues, (i) => stale(i.updated_at));
+    // Releases are listed by the tagged commit's date, not by when they were
+    // published, so a release cut this week for an older tag sits below older
+    // ones: no early stop, the budget's pages are read and published_at decides.
+    const releases = await walk(fetch, `repos/${name}/releases?per_page=100`, budget.releases, () => false);
+    const stars = await countStars(fetch, name, info.stargazers_count ?? 0, cutoff, budget.stars);
+    return {
+        repo: name,
+        url: info.html_url ?? `https://github.com/${name}`,
+        description: info.description ?? "",
+        stars: info.stargazers_count ?? 0,
+        forks: info.forks_count ?? 0,
+        openIssues: info.open_issues_count ?? 0,
+        prsOpened: pulls.items.filter((p) => inRange(p.created_at)).map((p) => item(p, p.created_at)).sort(newest),
+        prsMerged: pulls.items.filter((p) => inRange(p.merged_at)).map((p) => item(p, p.merged_at)).sort(newest),
+        prsClosed: pulls.items.filter((p) => !p.merged_at && inRange(p.closed_at)).map((p) => item(p, p.closed_at)).sort(newest),
+        issuesOpened: issues.items.filter((i) => !i.pull_request && inRange(i.created_at)).map((i) => item(i, i.created_at)).sort(newest),
+        issuesClosed: issues.items.filter((i) => !i.pull_request && inRange(i.closed_at)).map((i) => item(i, i.closed_at)).sort(newest),
+        releases: releases.items
+            .filter((r) => !r.draft && inRange(r.published_at))
+            .map((r) => ({ tag: r.tag_name, name: r.name ?? r.tag_name, at: r.published_at }))
+            .sort((a, b) => b.at.localeCompare(a.at)),
+        newStars: stars.count,
+        partial: pulls.partial || issues.partial || releases.partial || stars.partial,
+    };
+}

package/dist/main.d.ts

@@ -0,0 +1,71 @@
+/**
+ * g1tz: a git TUI that shows you the repository, not a menu of git commands.
+ *
+ *   bunx @profullstack/g1tz                        # the repository in the working directory
+ *   bunx @profullstack/g1tz ~/proj                 # somewhere else
+ *   bunx @profullstack/g1tz pulse [--range month]  # start on the Pulse screen
+ *
+ * Files, branches and log on the left; the diff for whatever is selected on
+ * the right. Space stages and unstages. `p` flips to Pulse: what moved in the
+ * repository over a period, from git, from GitHub when gh is logged in, and
+ * from a gh-pulse report when one exists on the machine.
+ */
+import { type Container, type Theme } from "@profullstack/hqtui";
+import { type FileChange, type Repo } from "./git.ts";
+import { type DiffPalette } from "./diff.ts";
+import { type Fetch, type GitHubRepo } from "./github.ts";
+import { type RangeKey } from "./pulse.ts";
+import { type PulseActions, type PulseState } from "./pulse-view.ts";
+export type PaneName = "files" | "branches" | "log";
+export type Screen = "repo" | "pulse";
+export interface State {
+    repo: Repo;
+    /** The origin remote, when it is on GitHub. */
+    github: GitHubRepo | null;
+    screen: Screen;
+    pane: PaneName;
+    selected: Record<PaneName, number>;
+    offset: Record<PaneName, number>;
+    diff: string[];
+    diffOffset: number;
+    note: string;
+    pulse: PulseState;
+}
+export declare function createState(repo: Repo): State;
+export declare function selectedFile(state: State): FileChange | undefined;
+/** The diff pane follows whichever pane has focus. */
+export declare function refreshDiff(state: State): void;
+export declare function move(state: State, delta: number): void;
+export declare function toggleStaged(state: State): void;
+export declare function reload(state: State): void;
+/** Read the git half of the pulse for the current range, and the traffic if a gh-pulse report has this repository. */
+export declare function refreshPulse(state: State, now?: Date): void;
+/** Flip to the Pulse screen, reading it the first time or when the range changed. */
+export declare function openPulse(state: State, range?: RangeKey, now?: Date): void;
+export declare function pickRange(state: State, range: RangeKey, now?: Date): void;
+export declare function scrollPulseFiles(state: State, delta: number): void;
+/**
+ * The GitHub half, off the render loop. Every call takes a ticket; a reply for
+ * an older ticket (the range changed while it was in flight) is dropped.
+ */
+export declare function startGitHub(state: State, onChange: () => void, now?: Date, fetch?: Fetch, installed?: () => boolean): Promise<void>;
+export declare const USAGE: string;
+export interface Cli {
+    path: string;
+    pulse: boolean;
+    range?: RangeKey;
+    help: boolean;
+    error?: string;
+}
+export declare function parseCli(argv: readonly string[]): Cli;
+/** Diff colours from the active theme, so highlighting follows the theme. */
+export declare function diffPalette(theme: Theme): DiffPalette;
+export interface ViewArgs {
+    ui: Container;
+    theme: Theme;
+    width: number;
+    height: number;
+    elapsed: number;
+}
+/** One frame: whichever screen the state is on. */
+export declare function view(args: ViewArgs, state: State, actions?: PulseActions): void;

package/dist/main.js

@@ -0,0 +1,458 @@
+/**
+ * g1tz: a git TUI that shows you the repository, not a menu of git commands.
+ *
+ *   bunx @profullstack/g1tz                        # the repository in the working directory
+ *   bunx @profullstack/g1tz ~/proj                 # somewhere else
+ *   bunx @profullstack/g1tz pulse [--range month]  # start on the Pulse screen
+ *
+ * Files, branches and log on the left; the diff for whatever is selected on
+ * the right. Space stages and unstages. `p` flips to Pulse: what moved in the
+ * repository over a period, from git, from GitHub when gh is logged in, and
+ * from a gh-pulse report when one exists on the machine.
+ */
+import { createApp, elevate, themes } from "@profullstack/hqtui";
+import { resolve } from "node:path";
+import { fileDiff, git, readRepo, stage, unstage, } from "./git.js";
+import { highlightDiff } from "./diff.js";
+import { ghFetch, ghInstalled, githubRemote, readGitHubPulse, repoName } from "./github.js";
+import { RANGE_KEYS, parseRangeKey, rangeForHotkey, readPulse, sinceFor } from "./pulse.js";
+import { NO_ACTIONS, clampOffset, createPulseState, pulseView } from "./pulse-view.js";
+import { readTraffic } from "./traffic.js";
+export function createState(repo) {
+    const state = {
+        repo,
+        github: githubRemote(repo.root),
+        screen: "repo",
+        pane: "files",
+        selected: { files: 0, branches: 0, log: 0 },
+        offset: { files: 0, branches: 0, log: 0 },
+        diff: [],
+        diffOffset: 0,
+        note: "",
+        pulse: createPulseState(),
+    };
+    refreshDiff(state);
+    return state;
+}
+export function selectedFile(state) {
+    return state.repo.files[state.selected.files];
+}
+/** The diff pane follows whichever pane has focus. */
+export function refreshDiff(state) {
+    state.diffOffset = 0;
+    if (state.pane === "files") {
+        const file = selectedFile(state);
+        state.diff = file
+            ? fileDiff(state.repo.root, file, file.staged && !file.unstaged).split("\n")
+            : [];
+        return;
+    }
+    if (state.pane === "log") {
+        const commit = state.repo.commits[state.selected.log];
+        state.diff = commit
+            ? (git(state.repo.root, ["show", "--no-color", "--stat", "--patch", commit.hash]) ?? "").split("\n")
+            : [];
+        return;
+    }
+    state.diff = [];
+}
+const statusGlyph = (file) => {
+    if (file.conflicted)
+        return "!!";
+    if (file.untracked)
+        return "??";
+    return `${file.index === "." ? " " : file.index}${file.work === "." ? " " : file.work}`;
+};
+const statusColor = (theme, file) => {
+    if (file.conflicted)
+        return theme.danger;
+    if (file.untracked)
+        return theme.muted;
+    if (file.staged && !file.unstaged)
+        return theme.success;
+    if (file.staged)
+        return theme.warning;
+    return theme.accent;
+};
+const PANES = ["files", "branches", "log"];
+function count(state, pane) {
+    if (pane === "files")
+        return state.repo.files.length;
+    if (pane === "branches")
+        return state.repo.branches.length;
+    return state.repo.commits.length;
+}
+export function move(state, delta) {
+    const total = count(state, state.pane);
+    if (total === 0)
+        return;
+    const next = Math.max(0, Math.min(total - 1, state.selected[state.pane] + delta));
+    if (next === state.selected[state.pane])
+        return;
+    state.selected[state.pane] = next;
+    refreshDiff(state);
+}
+export function toggleStaged(state) {
+    const file = selectedFile(state);
+    if (!file)
+        return;
+    const ok = file.staged && !file.unstaged
+        ? unstage(state.repo.root, file)
+        : stage(state.repo.root, file);
+    state.note = ok ? "" : `could not ${file.staged ? "unstage" : "stage"} ${file.path}`;
+    reload(state);
+}
+export function reload(state) {
+    const fresh = readRepo(state.repo.root);
+    if (!fresh) {
+        state.note = "repository disappeared";
+        return;
+    }
+    state.repo = fresh;
+    for (const pane of PANES) {
+        state.selected[pane] = Math.max(0, Math.min(count(state, pane) - 1, state.selected[pane]));
+    }
+    refreshDiff(state);
+}
+// ---------------------------------------------------------------- pulse
+/** Read the git half of the pulse for the current range, and the traffic if a gh-pulse report has this repository. */
+export function refreshPulse(state, now = new Date()) {
+    const p = state.pulse;
+    p.data = readPulse(state.repo.root, p.range, now);
+    p.filesOffset = 0;
+    p.traffic = state.github ? readTraffic(repoName(state.github)) : null;
+}
+/** Flip to the Pulse screen, reading it the first time or when the range changed. */
+export function openPulse(state, range, now = new Date()) {
+    state.screen = "pulse";
+    if (range)
+        state.pulse.range = range;
+    if (!state.pulse.data || state.pulse.data.range !== state.pulse.range)
+        refreshPulse(state, now);
+}
+export function pickRange(state, range, now = new Date()) {
+    state.pulse.range = range;
+    state.pulse.note = "";
+    refreshPulse(state, now);
+}
+export function scrollPulseFiles(state, delta) {
+    state.pulse.filesOffset = clampOffset(state.pulse.filesOffset + delta, state.pulse.data?.files.length ?? 0);
+}
+/**
+ * The GitHub half, off the render loop. Every call takes a ticket; a reply for
+ * an older ticket (the range changed while it was in flight) is dropped.
+ */
+export function startGitHub(state, onChange, now = new Date(), fetch = ghFetch, installed = ghInstalled) {
+    const p = state.pulse;
+    const ticket = ++p.githubRequest;
+    const unavailable = (why) => {
+        p.githubStatus = "unavailable";
+        p.githubNote = why;
+        onChange();
+        return Promise.resolve();
+    };
+    if (!state.github)
+        return unavailable("origin is not a GitHub remote");
+    if (!installed())
+        return unavailable("gh is not installed");
+    p.githubStatus = "loading";
+    p.githubNote = "";
+    onChange();
+    return readGitHubPulse(state.github, sinceFor(p.range, now), fetch).then((github) => {
+        if (ticket !== p.githubRequest)
+            return;
+        p.github = github;
+        p.githubStatus = "ready";
+        onChange();
+    }, (error) => {
+        if (ticket !== p.githubRequest)
+            return;
+        p.githubStatus = "unavailable";
+        p.githubNote = error instanceof Error ? error.message : String(error);
+        onChange();
+    });
+}
+// ---------------------------------------------------------------- command line
+export const USAGE = `Usage:
+  g1tz [path]                      the repository (default: the working directory)
+  g1tz pulse [path] [--range KEY]  start on the Pulse screen
+  KEY: ${RANGE_KEYS.join(", ")} (default week)`;
+export function parseCli(argv) {
+    const cli = { path: ".", pulse: false, help: false };
+    for (let i = 0; i < argv.length; i++) {
+        const a = argv[i];
+        if (a === "-h" || a === "--help")
+            cli.help = true;
+        else if (a === "pulse")
+            cli.pulse = true;
+        else if (a === "--range" || a.startsWith("--range=")) {
+            const text = a === "--range" ? (argv[++i] ?? "") : a.slice("--range=".length);
+            const key = parseRangeKey(text);
+            if (!key) {
+                cli.error = `--range wants one of ${RANGE_KEYS.join(", ")}, not "${text}"`;
+                return cli;
+            }
+            cli.range = key;
+            cli.pulse = true;
+        }
+        else if (a.startsWith("-")) {
+            cli.error = `unknown option: ${a}`;
+            return cli;
+        }
+        else
+            cli.path = a;
+    }
+    return cli;
+}
+async function main() {
+    const cli = parseCli(process.argv.slice(2));
+    if (cli.help) {
+        console.log(USAGE);
+        return;
+    }
+    if (cli.error) {
+        console.error(`g1tz: ${cli.error}\n${USAGE}`);
+        process.exit(2);
+    }
+    const repo = readRepo(resolve(cli.path));
+    if (!repo) {
+        console.error("g1tz: not a git repository");
+        process.exit(1);
+    }
+    const state = createState(repo);
+    if (cli.pulse)
+        openPulse(state, cli.range);
+    // focusNavigation off: the app handles every key itself, and with it on,
+    // Enter or Space would activate whichever range button held hqtui's hidden
+    // focus (the first one) and silently switch the range to "day".
+    const app = await createApp({ theme: themes.dark, title: "g1tz", quitKeys: ["ctrl+c"], focusNavigation: false });
+    const changed = () => app.invalidate();
+    const actions = {
+        pickRange: (key) => { pickRange(state, key); void startGitHub(state, changed); changed(); },
+        // The re-read panels and the spinner are the acknowledgement; a sticky note here would mask the GitHub line.
+        refresh: () => { refreshPulse(state); void startGitHub(state, changed); changed(); },
+        back: () => { state.screen = "repo"; changed(); },
+        pulse: () => { openPulse(state); void startGitHub(state, changed); changed(); },
+    };
+    if (cli.pulse)
+        void startGitHub(state, changed);
+    // No `q` here: on this screen q is the quarter range. Ctrl+C quits from
+    // anywhere, and p or Escape go back to the repository, where q quits.
+    const pulseKey = (key) => {
+        switch (key) {
+            case "p":
+            case "escape":
+                actions.back();
+                return;
+            case "r":
+                actions.refresh();
+                return;
+            case "up":
+                scrollPulseFiles(state, -1);
+                return;
+            case "down":
+                scrollPulseFiles(state, 1);
+                return;
+            case "pageup":
+                scrollPulseFiles(state, -10);
+                return;
+            case "pagedown":
+                scrollPulseFiles(state, 10);
+                return;
+            default: {
+                const range = rangeForHotkey(key);
+                if (range)
+                    actions.pickRange(range);
+            }
+        }
+    };
+    app.on("key", (event) => {
+        if (state.screen === "pulse") {
+            pulseKey(event.key);
+            return;
+        }
+        switch (event.key) {
+            case "q":
+                app.quit();
+                return;
+            case "tab":
+                state.pane = PANES[(PANES.indexOf(state.pane) + 1) % PANES.length];
+                refreshDiff(state);
+                return;
+            case "up":
+                move(state, -1);
+                return;
+            case "down":
+                move(state, 1);
+                return;
+            case "pageup":
+                move(state, -10);
+                return;
+            case "pagedown":
+                move(state, 10);
+                return;
+            case "space":
+                toggleStaged(state);
+                return;
+            case "r":
+                reload(state);
+                state.note = "reloaded";
+                return;
+            case "left":
+                state.diffOffset = Math.max(0, state.diffOffset - 10);
+                return;
+            case "right":
+                state.diffOffset += 10;
+                return;
+            case "p":
+                actions.pulse();
+                return;
+        }
+    });
+    app.render((args) => view(args, state, actions));
+    await app.start();
+}
+/** Diff colours from the active theme, so highlighting follows the theme. */
+export function diffPalette(theme) {
+    return {
+        add: theme.success,
+        remove: theme.danger,
+        hunk: theme.accent,
+        meta: theme.muted,
+        context: theme.foreground,
+        // A background wash rather than another foreground: the line already
+        // carries its add/remove colour, and a second one would compete with it.
+        // `elevate` lifts the surface a little so the wash reads on both a light
+        // and a dark palette.
+        addEmphasis: elevate(theme, 0.18),
+        removeEmphasis: elevate(theme, 0.18),
+    };
+}
+/** One frame: whichever screen the state is on. */
+export function view(args, state, actions = NO_ACTIONS) {
+    if (state.screen === "pulse") {
+        pulseView(args, state.pulse, state.repo.root, actions);
+        return;
+    }
+    repoView(args, state, actions);
+}
+function repoView({ ui, theme, height }, state, actions) {
+    const repo = state.repo;
+    const track = repo.upstream
+        ? `${repo.upstream}${repo.ahead ? ` ↑${repo.ahead}` : ""}${repo.behind ? ` ↓${repo.behind}` : ""}`
+        : "no upstream";
+    ui.row({ size: 1 }, (header) => {
+        header.text(" g1tz", { fg: theme.title, bold: true, size: 7 });
+        header.text(repo.branch || "(detached)", { fg: theme.accent, size: 24 });
+        header.text(track, { fg: theme.muted });
+        header.text(`${repo.root}  Tab panes  Space stage  p pulse  q quit `, { fg: theme.muted, align: "right" });
+    });
+    ui.row({ size: height - 2, gap: 1 }, (row) => {
+        row.column({ width: "1fr", gap: 1 }, (left) => {
+            left.panel({
+                title: `Files (${repo.files.length})`,
+                size: "1.2fr",
+                borderColor: state.pane === "files" ? theme.borderFocused : theme.border,
+            }, (p) => {
+                if (repo.files.length === 0) {
+                    p.label("Working tree clean.");
+                    return;
+                }
+                p.table({
+                    rows: repo.files.map((f) => ({
+                        st: statusGlyph(f),
+                        path: f.from ? `${f.from} → ${f.path}` : f.path,
+                        file: f,
+                    })),
+                    selected: state.selected.files,
+                    offset: state.offset.files,
+                    followSelection: true,
+                    scrollbar: true,
+                    onScroll: (d) => { state.offset.files = Math.max(0, state.offset.files + d); },
+                    header: false,
+                    columns: [
+                        // Per row, not per column: staged, unstaged and conflicted files
+                        // each need their own colour, and a column-wide colour would paint
+                        // the whole list whatever the first file happened to be.
+                        { key: "st", title: "", width: 3, color: (row) => statusColor(theme, row.file) },
+                        { key: "path", title: "", min: 8, color: theme.foreground },
+                    ],
+                });
+            });
+            left.panel({
+                title: `Branches (${repo.branches.length})`,
+                size: "0.8fr",
+                borderColor: state.pane === "branches" ? theme.borderFocused : theme.border,
+            }, (p) => {
+                if (repo.branches.length === 0) {
+                    p.label("No branches.");
+                    return;
+                }
+                p.list({
+                    items: repo.branches.map((b) => `${b.current ? "* " : "  "}${b.name}${b.ahead ? ` ↑${b.ahead}` : ""}${b.behind ? ` ↓${b.behind}` : ""}`),
+                    selected: state.selected.branches,
+                    offset: state.offset.branches,
+                    scrollbar: true,
+                    onScroll: (d) => { state.offset.branches = Math.max(0, state.offset.branches + d); },
+                });
+            });
+            left.panel({
+                title: `Log (${repo.commits.length})`,
+                size: "1fr",
+                borderColor: state.pane === "log" ? theme.borderFocused : theme.border,
+            }, (p) => {
+                if (repo.commits.length === 0) {
+                    p.label("No commits.");
+                    return;
+                }
+                p.table({
+                    rows: repo.commits.map((c) => ({ hash: c.short, subject: c.subject, when: c.when })),
+                    selected: state.selected.log,
+                    offset: state.offset.log,
+                    followSelection: true,
+                    scrollbar: true,
+                    onScroll: (d) => { state.offset.log = Math.max(0, state.offset.log + d); },
+                    header: false,
+                    columns: [
+                        { key: "hash", title: "", width: 9, color: theme.warning },
+                        { key: "subject", title: "", min: 8, color: theme.foreground },
+                        { key: "when", title: "", width: 14, align: "right", color: theme.muted },
+                    ],
+                });
+            });
+        });
+        row.panel({ title: "Diff", width: "1.6fr" }, (p) => {
+            if (state.note !== "")
+                p.text(state.note, { fg: theme.warning, size: 1 });
+            if (state.diff.length === 0 || (state.diff.length === 1 && state.diff[0] === "")) {
+                p.label(state.pane === "branches" ? "Select a file or a commit." : "No changes.");
+                return;
+            }
+            // Spans, so the words that actually differ can be emphasised inside an
+            // otherwise green or red line. Highlighting runs over the whole diff
+            // rather than the visible slice, because pairing a removal with its
+            // addition needs to see both even when one is scrolled off.
+            const highlighted = highlightDiff(state.diff, diffPalette(theme));
+            for (const line of highlighted.slice(state.diffOffset, state.diffOffset + 400)) {
+                p.text(line.length === 0 ? " " : line, { size: 1 });
+            }
+        });
+    });
+    ui.statusBar({
+        items: [
+            { key: "Tab", label: state.pane, active: true },
+            { key: "Space", label: "Stage" },
+            { key: "↑↓", label: "Move" },
+            { key: "r", label: "Reload" },
+            { key: "p", label: "Pulse", onPress: actions.pulse },
+            { key: "q", label: "Quit" },
+        ],
+        right: [{ label: repo.errors.length ? `${repo.errors.length} git errors` : "" }],
+    });
+}
+if (import.meta.main) {
+    main().catch((error) => {
+        console.error(error);
+        process.exit(1);
+    });
+}