cherrypick-interactive 1.7.1 → 1.8.0

package/package.json

@@ -1,23 +1,32 @@
 {
   "name": "cherrypick-interactive",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "description": "Interactively cherry-pick commits that are in dev but not in main, using subject-based comparison.",
   "main": "cli.js",
   "bin": "cli.js",
   "type": "module",
+  "files": [
+    "cli.js",
+    "src/"
+  ],
   "scripts": {
     "lint": "biome lint .",
     "format": "biome format --write .",
     "check": "biome check .",
     "fix": "biome check --write .",
-    "release": "npm publish --access public"
+    "release": "npm publish --access public",
+    "test": "node --test test/**/*.test.js"
   },
   "engines": {
     "node": ">=20"
   },
   "dependencies": {
     "chalk": "^5.6.2",
+    "htm": "^3.1.1",
+    "ink": "^6.8.0",
     "inquirer": "^13.0.2",
+    "react": "^19.2.4",
+    "safe-regex2": "^5.1.0",
     "semver": "^7.7.3",
     "simple-git": "^3.30.0",
     "update-notifier": "^7.3.1",
@@ -34,5 +43,5 @@
     "devops"
   ],
   "license": "MIT",
-  "packageManager": "yarn@4.6.0"
-}
+  "packageManager": "yarn@4.13.0"
+}

package/src/tui/App.js

@@ -0,0 +1,194 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Text, Box, useInput, useApp } from 'ink';
+import { html } from './html.js';
+import { Header } from './Header.js';
+import { CommitList } from './CommitList.js';
+import { Preview } from './Preview.js';
+import { KeyBar } from './KeyBar.js';
+
+export function App({ commits, gitRawFn, devBranch, mainBranch, since, onDone }) {
+    const { exit } = useApp();
+    const [cursorIndex, setCursorIndex] = useState(0);
+    const [selected, setSelected] = useState(new Set());
+    const [previewText, setPreviewText] = useState('');
+    const [filterText, setFilterText] = useState('');
+    const [isSearching, setIsSearching] = useState(false);
+    const [searchInput, setSearchInput] = useState('');
+    const [showDiff, setShowDiff] = useState(false);
+    const [diffText, setDiffText] = useState('');
+    const [confirmQuit, setConfirmQuit] = useState(false);
+
+    const filtered = filterText
+        ? commits.filter((c) => c.subject.toLowerCase().includes(filterText.toLowerCase()))
+        : commits;
+
+    const currentCommit = filtered[cursorIndex];
+
+    // Load preview for current commit
+    useEffect(() => {
+        if (!currentCommit) return;
+        let cancelled = false;
+        gitRawFn(['show', '--stat', '--format=', currentCommit.hash]).then((text) => {
+            if (!cancelled) setPreviewText(text.trim());
+        }).catch(() => {
+            if (!cancelled) setPreviewText('(unable to load preview)');
+        });
+        return () => { cancelled = true; };
+    }, [currentCommit?.hash, gitRawFn]);
+
+    useInput((input, key) => {
+        // Confirm quit dialog
+        if (confirmQuit) {
+            if (input === 'y' || input === 'Y') {
+                onDone([]);
+                exit();
+            } else {
+                setConfirmQuit(false);
+            }
+            return;
+        }
+
+        // Diff overlay
+        if (showDiff) {
+            if (key.escape) setShowDiff(false);
+            return;
+        }
+
+        // Search mode
+        if (isSearching) {
+            if (key.escape) {
+                setIsSearching(false);
+                setSearchInput('');
+            } else if (key.return) {
+                setFilterText(searchInput);
+                setIsSearching(false);
+                setCursorIndex(0);
+            } else if (key.backspace || key.delete) {
+                setSearchInput((s) => s.slice(0, -1));
+            } else if (input && !key.ctrl && !key.meta) {
+                setSearchInput((s) => s + input);
+            }
+            return;
+        }
+
+        // Navigation
+        if (key.upArrow || input === 'k') {
+            setCursorIndex((i) => Math.max(0, i - 1));
+        } else if (key.downArrow || input === 'j') {
+            setCursorIndex((i) => Math.min(filtered.length - 1, i + 1));
+        }
+
+        // Toggle selection
+        else if (input === ' ') {
+            if (currentCommit) {
+                setSelected((prev) => {
+                    const next = new Set(prev);
+                    if (next.has(currentCommit.hash)) {
+                        next.delete(currentCommit.hash);
+                    } else {
+                        next.add(currentCommit.hash);
+                    }
+                    return next;
+                });
+            }
+        }
+
+        // Select all
+        else if (input === 'a') {
+            setSelected(new Set(filtered.map((c) => c.hash)));
+        }
+
+        // Deselect all
+        else if (input === 'n') {
+            setSelected(new Set());
+        }
+
+        // Search
+        else if (input === '/') {
+            setIsSearching(true);
+            setSearchInput('');
+        }
+
+        // Diff
+        else if (input === 'd') {
+            if (currentCommit) {
+                setShowDiff(true);
+                setDiffText('Loading...');
+                gitRawFn(['show', '--stat', '-p', currentCommit.hash]).then((text) => {
+                    setDiffText(text.trim());
+                }).catch(() => {
+                    setDiffText('(unable to load diff)');
+                });
+            }
+        }
+
+        // Confirm
+        else if (key.return) {
+            const selectedHashes = [...selected];
+            onDone(selectedHashes);
+            exit();
+        }
+
+        // Quit
+        else if (input === 'q') {
+            if (selected.size > 0) {
+                setConfirmQuit(true);
+            } else {
+                onDone([]);
+                exit();
+            }
+        }
+    });
+
+    // Confirm quit dialog
+    if (confirmQuit) {
+        return html`
+            <${Box} flexDirection="column" padding=${1}>
+                <${Text} color="yellow">You have ${selected.size} commit(s) selected. Quit without cherry-picking?</${Text}>
+                <${Text} color="dim">Press y to quit, any other key to cancel.</${Text}>
+            </${Box}>
+        `;
+    }
+
+    // Diff overlay
+    if (showDiff) {
+        const maxLines = (process.stdout.rows || 24) - 4;
+        const lines = diffText.split('\n').slice(0, maxLines).join('\n');
+        return html`
+            <${Box} flexDirection="column" padding=${1}>
+                <${Text} color="cyan">── Full Diff (press Esc to return) ──</${Text}>
+                <${Text}>${lines}</${Text}>
+            </${Box}>
+        `;
+    }
+
+    return html`
+        <${Box} flexDirection="column">
+            <${Header}
+                devBranch=${devBranch}
+                mainBranch=${mainBranch}
+                commitCount=${filtered.length}
+                since=${since}
+            />
+            ${isSearching
+                ? html`<${Box} paddingX=${1}><${Text} color="yellow">Search: ${searchInput}_</${Text}></${Box}>`
+                : filterText
+                    ? html`<${Box} paddingX=${1}><${Text} color="yellow">Filtered: "${filterText}" (${filtered.length} results)</${Text}></${Box}>`
+                    : null
+            }
+            <${CommitList}
+                commits=${filtered}
+                selected=${selected}
+                cursorIndex=${cursorIndex}
+            />
+            <${KeyBar}
+                isSearching=${isSearching}
+                selectedCount=${selected.size}
+            />
+            <${Preview}
+                previewText=${previewText}
+                hash=${currentCommit?.hash}
+            />
+        </${Box}>
+    `;
+}

package/src/tui/CommitList.js

@@ -0,0 +1,28 @@
+import { Box } from 'ink';
+import { html } from './html.js';
+import { CommitRow } from './CommitRow.js';
+
+export function CommitList({ commits, selected, cursorIndex }) {
+    const maxVisible = Math.max(5, (process.stdout.rows || 24) - 12);
+    const start = Math.max(0, cursorIndex - Math.floor(maxVisible / 2));
+    const visible = commits.slice(start, start + maxVisible);
+
+    return html`
+        <${Box} flexDirection="column">
+            ${visible.map(
+                (c, i) => html`
+                    <${CommitRow}
+                        key=${c.hash}
+                        hash=${c.hash}
+                        subject=${c.subject}
+                        isSelected=${selected.has(c.hash)}
+                        isCursor=${start + i === cursorIndex}
+                    />
+                `,
+            )}
+            ${commits.length > maxVisible
+                ? html`<${Box}><${'Text'} color="dim">  ... ${commits.length - maxVisible} more (scroll with ↑↓)</${'Text'}></${Box}>`
+                : null}
+        </${Box}>
+    `;
+}

package/src/tui/CommitRow.js

@@ -0,0 +1,19 @@
+import { Text, Box } from 'ink';
+import { html } from './html.js';
+
+export function CommitRow({ hash, subject, isSelected, isCursor }) {
+    const checkbox = isSelected ? '☑' : '☐';
+    const checkColor = isSelected ? 'green' : 'gray';
+    const cursor = isCursor ? '>' : ' ';
+    const cursorColor = isCursor ? 'cyan' : undefined;
+    const subjectColor = isCursor ? 'white' : 'gray';
+
+    return html`
+        <${Box}>
+            <${Text} color=${cursorColor}>${cursor} </${Text}>
+            <${Text} color=${checkColor}>${checkbox} </${Text}>
+            <${Text} color="dim">${hash.slice(0, 7)}  </${Text}>
+            <${Text} color=${subjectColor}>${subject}</${Text}>
+        </${Box}>
+    `;
+}

package/src/tui/Header.js

@@ -0,0 +1,14 @@
+import { Text, Box } from 'ink';
+import { html } from './html.js';
+
+export function Header({ devBranch, mainBranch, commitCount, since }) {
+    return html`
+        <${Box} borderStyle="single" borderColor="cyan" paddingX=${1}>
+            <${Text} color="cyan">${devBranch} → ${mainBranch}</${Text}>
+            <${Text}>  │  </${Text}>
+            <${Text} color="yellow">${commitCount} missing</${Text}>
+            <${Text}>  │  </${Text}>
+            <${Text} color="gray">Since: ${since}</${Text}>
+        </${Box}>
+    `;
+}

package/src/tui/KeyBar.js

@@ -0,0 +1,20 @@
+import { Text, Box } from 'ink';
+import { html } from './html.js';
+
+export function KeyBar({ isSearching, selectedCount }) {
+    if (isSearching) {
+        return html`
+            <${Box} paddingX=${1}>
+                <${Text} color="yellow">[Esc] cancel search  [Enter] confirm filter</${Text}>
+            </${Box}>
+        `;
+    }
+
+    return html`
+        <${Box} paddingX=${1}>
+            <${Text} color="dim">
+                [space] toggle  [a] all  [n] none  [/] search  [d] diff  [enter] confirm (${selectedCount})  [q] quit
+            </${Text}>
+        </${Box}>
+    `;
+}

package/src/tui/Preview.js

@@ -0,0 +1,15 @@
+import { Text, Box } from 'ink';
+import { html } from './html.js';
+
+export function Preview({ previewText, hash }) {
+    if (!hash) {
+        return html`<${Box} paddingX=${1}><${Text} color="dim">No commit highlighted</${Text}></${Box}>`;
+    }
+
+    return html`
+        <${Box} flexDirection="column" paddingX=${1}>
+            <${Text} color="cyan">── Preview (${hash.slice(0, 7)}) ──</${Text}>
+            <${Text} color="gray">${previewText || 'Loading...'}</${Text}>
+        </${Box}>
+    `;
+}

package/src/tui/html.js

@@ -0,0 +1,4 @@
+import { createElement } from 'ink';
+import htm from 'htm';
+
+export const html = htm.bind(createElement);

package/src/tui/index.js

@@ -0,0 +1,34 @@
+import { render } from 'ink';
+import { createElement } from 'react';
+import { App } from './App.js';
+
+/**
+ * Render the TUI commit selector.
+ * @param {Array<{hash: string, subject: string}>} commits
+ * @param {Function} gitRawFn
+ * @param {{ devBranch: string, mainBranch: string, since: string }} options
+ * @returns {Promise<string[]>} selected commit hashes
+ */
+export function renderCommitSelector(commits, gitRawFn, { devBranch, mainBranch, since }) {
+    return new Promise((resolve) => {
+        const { unmount, waitUntilExit } = render(
+            createElement(App, {
+                commits,
+                gitRawFn,
+                devBranch,
+                mainBranch,
+                since,
+                onDone: (selectedHashes) => {
+                    resolve(selectedHashes);
+                },
+            }),
+        );
+
+        waitUntilExit().then(() => {
+            // Fallback: if exited without calling onDone, resolve with empty
+            resolve([]);
+        }).catch(() => {
+            resolve([]);
+        });
+    });
+}

package/.github/workflows/release.yml

@@ -1,107 +0,0 @@
-name: Release & Publish
-
-on:
-  push:
-    branches: [main]
-
-permissions:
-  contents: write
-
-jobs:
-  release:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          registry-url: https://registry.npmjs.org
-
-      - name: Get current version
-        id: current
-        run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
-
-      - name: Determine version bump from commits
-        id: bump
-        run: |
-          # Get commits since last tag (or all commits if no tags)
-          LAST_TAG=$(git describe --tags --abbrev=0 2>/dev/null || echo "")
-
-          if [ -z "$LAST_TAG" ]; then
-            COMMITS=$(git log --pretty=format:"%s" HEAD)
-          else
-            COMMITS=$(git log --pretty=format:"%s" "${LAST_TAG}..HEAD")
-          fi
-
-          if [ -z "$COMMITS" ]; then
-            echo "bump=none" >> $GITHUB_OUTPUT
-            exit 0
-          fi
-
-          BUMP="none"
-
-          # Check for breaking changes (major)
-          if echo "$COMMITS" | grep -qE "^[a-z]+(\(.+\))?!:"; then
-            BUMP="major"
-          # Check for feat (minor)
-          elif echo "$COMMITS" | grep -qE "^feat(\(.+\))?:"; then
-            BUMP="minor"
-          # Check for fix, refactor, perf, etc. (patch)
-          elif echo "$COMMITS" | grep -qE "^(fix|refactor|perf|chore|docs|style|test|ci)(\(.+\))?:"; then
-            BUMP="patch"
-          fi
-
-          echo "bump=$BUMP" >> $GITHUB_OUTPUT
-
-      - name: Bump version
-        if: steps.bump.outputs.bump != 'none'
-        id: version
-        run: |
-          BUMP=${{ steps.bump.outputs.bump }}
-          CURRENT=${{ steps.current.outputs.version }}
-
-          IFS='.' read -r MAJOR MINOR PATCH <<< "$CURRENT"
-
-          case "$BUMP" in
-            major) MAJOR=$((MAJOR + 1)); MINOR=0; PATCH=0 ;;
-            minor) MINOR=$((MINOR + 1)); PATCH=0 ;;
-            patch) PATCH=$((PATCH + 1)) ;;
-          esac
-
-          NEW_VERSION="${MAJOR}.${MINOR}.${PATCH}"
-          echo "new_version=$NEW_VERSION" >> $GITHUB_OUTPUT
-
-          # Update package.json
-          node -e "
-            const pkg = require('./package.json');
-            pkg.version = '${NEW_VERSION}';
-            require('fs').writeFileSync('package.json', JSON.stringify(pkg, null, 2) + '\n');
-          "
-
-          echo "Version: $CURRENT → $NEW_VERSION ($BUMP)"
-
-      - name: Publish to npm
-        if: steps.bump.outputs.bump != 'none'
-        run: npm publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      - name: Commit version bump and tag
-        if: steps.bump.outputs.bump != 'none'
-        run: |
-          git config user.name "github-actions[bot]"
-          git config user.email "github-actions[bot]@users.noreply.github.com"
-          git add package.json
-          git commit -m "chore(release): v${{ steps.version.outputs.new_version }}"
-          git tag "v${{ steps.version.outputs.new_version }}"
-          git push
-          git push --tags
-
-      - name: Create GitHub Release
-        if: steps.bump.outputs.bump != 'none'
-        run: gh release create "v${{ steps.version.outputs.new_version }}" --generate-notes --title "v${{ steps.version.outputs.new_version }}"
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/.yarnrc.yml

@@ -1 +0,0 @@
-nodeLinker: node-modules

package/biome.json

@@ -1,23 +0,0 @@
-{
-  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
-  "formatter": {
-    "enabled": true,
-    "indentStyle": "space",
-    "indentWidth": 2,
-    "lineWidth": 100,
-    "ignore": ["node_modules", "yarn.lock"]
-  },
-  "linter": {
-    "enabled": true,
-    "rules": {
-      "recommended": true
-    }
-  },
-  "organizeImports": {
-    "enabled": true
-  },
-  "vcs": {
-    "enabled": true,
-    "clientKind": "git"
-  }
-}