critique 0.0.1 → 0.0.3

package/AGENTS.md

@@ -6,7 +6,6 @@ IMPORTANT! before starting every task ALWAYS read opentui docs with `curl -s htt
 
 ALWAYS!
 
-
 ## bun
 
 NEVER run bun run index.tsx. You cannot directly run the tui app. it will hang. instead ask me to do so.
@@ -24,6 +23,7 @@ Try to never use useEffect if possible. usually you can move logic directly in e
 ## Rules
 
 - keep types as close as possible to rayacst
+- if you need Node.js apis import the namesapce and not the named exports: `import fs from 'fs'` and not `import { writeFileSync } from 'fs'`
 - DO NOT use as any. instead try to understand how to fix the types in other ways
 - to implement compound components like `List.Item` first define the type of List, using a interface, then use : to implement it and add compound components later using . and omitting the props types given they are already typed by the interface, here is an example
 - DO NOT use console.log. only use logger.log instead
@@ -53,7 +53,12 @@ https://gitchamber.com/repos/repos/vercel/ai/main/files
 
 use gitchamber to read the .md files using curl
 
-
 ## researching opentui patterns
 
 you can read more examples of opentui react code using gitchamber by listing and reading files from the correct endpoint: https://gitchamber.com/repos/sst/opentui/main/files?glob=packages/react/examples/**
+
+## changelog
+
+after any meaningful change update CHANGELOG.md with the version number and the list of changes made. in concise bullet points
+
+before updating the changelog bump the package.json version field first. NEVER do major bumps. NEVER publish yourself

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# 0.0.3
+
+- Add `pick` command to selectively apply files from another branch
+- Use autocomplete multiselect for file selection
+- Support conflict detection and 3-way merge
+
+# 0.0.2
+
+- Add support for pick command

package/bun.lock

@@ -4,6 +4,7 @@
     "": {
       "name": "react",
       "dependencies": {
+        "@clack/prompts": "^1.0.0-alpha.6",
         "@opentui/core": "^0.1.26",
         "@opentui/react": "^0.1.26",
         "@shikijs/langs": "^3.13.0",
@@ -23,6 +24,10 @@
   "packages": {
     "@babel/runtime": ["@babel/runtime@7.28.4", "", {}, "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ=="],
 
+    "@clack/core": ["@clack/core@1.0.0-alpha.6", "", { "dependencies": { "picocolors": "^1.0.0", "sisteransi": "^1.0.5" } }, "sha512-eG5P45+oShFG17u9I1DJzLkXYB1hpUgTLi32EfsMjSHLEqJUR8BOBCVFkdbUX2g08eh/HCi6UxNGpPhaac1LAA=="],
+
+    "@clack/prompts": ["@clack/prompts@1.0.0-alpha.6", "", { "dependencies": { "@clack/core": "1.0.0-alpha.6", "picocolors": "^1.0.0", "sisteransi": "^1.0.5" } }, "sha512-75NCtYOgDHVBE2nLdKPTDYOaESxO0GLAKC7INREp5VbS988Xua1u+588VaGlcvXiLc/kSwc25Cd+4PeTSpY6QQ=="],
+
     "@dimforge/rapier2d-simd-compat": ["@dimforge/rapier2d-simd-compat@0.17.3", "", {}, "sha512-bijvwWz6NHsNj5e5i1vtd3dU2pDhthSaTUZSh14DUGGKJfw8eMnlWZsxwHBxB/a3AXVNDjL9abuHw1k9FGR+jg=="],
 
     "@jimp/core": ["@jimp/core@1.6.0", "", { "dependencies": { "@jimp/file-ops": "1.6.0", "@jimp/types": "1.6.0", "@jimp/utils": "1.6.0", "await-to-js": "^3.0.0", "exif-parser": "^0.1.12", "file-type": "^16.0.0", "mime": "3" } }, "sha512-EQQlKU3s9QfdJqiSrZWNTxBs3rKXgO2W+GxNXDtwchF3a4IqxDheFX1ti+Env9hdJXDiYLp2jTRjlxhPthsk8w=="],
@@ -225,6 +230,8 @@
 
     "peek-readable": ["peek-readable@4.1.0", "", {}, "sha512-ZI3LnwUv5nOGbQzD9c2iDG6toheuXSZP5esSHBjopsXH4dg19soufvpUGA3uohi5anFtGb2lhAVdHzH6R/Evvg=="],
 
+    "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
+
     "pixelmatch": ["pixelmatch@5.3.0", "", { "dependencies": { "pngjs": "^6.0.0" }, "bin": { "pixelmatch": "bin/pixelmatch" } }, "sha512-o8mkY4E/+LNUf6LzX96ht6k6CEDi65k9G2rjMtBe9Oo+VPKSvl+0GKHuH/AlG+GA5LPG/i5hrekkxUc3s2HU+Q=="],
 
     "planck": ["planck@1.4.2", "", { "peerDependencies": { "stage-js": "^1.0.0-alpha.12" } }, "sha512-mNbhnV3g8X2rwGxzcesjmN8BDA6qfXgQxXVMkWau9MCRlQY0RLNEkyHlVp6yFy/X6qrzAXyNONCnZ1cGDLrNew=="],
@@ -261,6 +268,8 @@
 
     "simple-xml-to-json": ["simple-xml-to-json@1.2.3", "", {}, "sha512-kWJDCr9EWtZ+/EYYM5MareWj2cRnZGF93YDNpH4jQiHB+hBIZnfPFSQiVMzZOdk+zXWqTZ/9fTeQNu2DqeiudA=="],
 
+    "sisteransi": ["sisteransi@1.0.5", "", {}, "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="],
+
     "space-separated-tokens": ["space-separated-tokens@2.0.2", "", {}, "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q=="],
 
     "stage-js": ["stage-js@1.0.0-alpha.17", "", {}, "sha512-AzlMO+t51v6cFvKZ+Oe9DJnL1OXEH5s9bEy6di5aOrUpcP7PCzI/wIeXF0u3zg0L89gwnceoKxrLId0ZpYnNXw=="],

package/package.json

@@ -2,11 +2,12 @@
   "name": "critique",
   "module": "src/diff.tsx",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "private": false,
   "bin": "./src/cli.tsx",
   "scripts": {
     "cli": "bun --watch src/cli.tsx",
+    "prepublishonly": "tsc",
     "example": "bun --watch src/example.tsx"
   },
   "devDependencies": {
@@ -14,6 +15,7 @@
     "typescript": "^5.9.3"
   },
   "dependencies": {
+    "@clack/prompts": "^1.0.0-alpha.6",
     "@opentui/core": "^0.1.26",
     "@opentui/react": "^0.1.26",
     "@shikijs/langs": "^3.13.0",

package/src/cli.tsx

@@ -1,17 +1,129 @@
 #!/usr/bin/env bun
 import { cac } from "cac";
-import { parsePatch } from "diff";
-import { render, useOnResize, useTerminalDimensions } from "@opentui/react";
-import * as React from "react";
-import { execSync } from "child_process";
 import {
-  ErrorBoundary,
-  FileEditPreviewTitle,
-  FileEditPreview,
-} from "./diff.tsx";
+  render,
+  useKeyboard,
+  useOnResize,
+  useRenderer,
+  useTerminalDimensions,
+} from "@opentui/react";
+import * as React from "react";
+import { exec, execSync } from "child_process";
+import { promisify } from "util";
+import { MacOSScrollAccel } from "@opentui/core";
+import fs from "fs";
+import { tmpdir } from "os";
+import { join } from "path";
+import * as p from "@clack/prompts";
+
+const execAsync = promisify(exec);
 
 const cli = cac("critique");
 
+class ScrollAcceleration {
+  public multiplier: number = 1;
+  private macosAccel: MacOSScrollAccel;
+  constructor() {
+    this.macosAccel = new MacOSScrollAccel();
+  }
+  tick(delta: number) {
+    return this.macosAccel.tick(delta) * this.multiplier;
+  }
+  reset() {
+    this.macosAccel.reset();
+    // this.multiplier = 1;
+  }
+}
+
+interface AppProps {
+  parsedFiles: Array<{
+    oldFileName?: string;
+    newFileName?: string;
+    hunks: any[];
+  }>;
+}
+
+function App({ parsedFiles }: AppProps) {
+  const { width: initialWidth } = useTerminalDimensions();
+  const [width, setWidth] = React.useState(initialWidth);
+  const [scrollAcceleration] = React.useState(() => new ScrollAcceleration());
+
+  useOnResize(
+    React.useCallback((newWidth: number) => {
+      setWidth(newWidth);
+    }, []),
+  );
+  const useSplitView = width >= 100;
+
+  const renderer = useRenderer();
+
+  useKeyboard((key) => {
+    if (key.name === "z" && key.ctrl) {
+      renderer.console.toggle();
+    }
+    if (key.option) {
+      console.log(key);
+      if (key.eventType === "release") {
+        scrollAcceleration.multiplier = 1;
+      } else {
+        scrollAcceleration.multiplier = 10;
+      }
+    }
+  });
+
+  const { FileEditPreviewTitle, FileEditPreview } = require("./diff.tsx");
+
+  return (
+    <box
+      key={String(useSplitView)}
+      style={{ flexDirection: "column", height: "100%", padding: 1 }}
+    >
+      <scrollbox
+        scrollAcceleration={scrollAcceleration}
+        style={{
+          flexGrow: 1,
+          rootOptions: {
+            backgroundColor: "transparent",
+            border: false,
+          },
+          scrollbarOptions: {
+            showArrows: false,
+            trackOptions: {
+              foregroundColor: "#4a4a4a",
+              backgroundColor: "transparent",
+            },
+          },
+        }}
+        focused
+      >
+        <box style={{ flexDirection: "column" }}>
+          {parsedFiles.map((file, idx) => (
+            <box
+              key={idx}
+              style={{
+                flexDirection: "column",
+                marginBottom: idx < parsedFiles.length - 1 ? 2 : 0,
+              }}
+            >
+              <FileEditPreviewTitle
+                filePath={file.newFileName || file.oldFileName || "unknown"}
+                hunks={file.hunks}
+              />
+              <box paddingTop={1} />
+              <FileEditPreview
+                hunks={file.hunks}
+                paddingLeft={0}
+                splitView={useSplitView}
+                filePath={file.newFileName || file.oldFileName || ""}
+              />
+            </box>
+          ))}
+        </box>
+      </scrollbox>
+    </box>
+  );
+}
+
 cli
   .command(
     "[ref]",
@@ -20,95 +132,196 @@ cli
   .option("--staged", "Show staged changes")
   .option("--commit <ref>", "Show changes from a specific commit")
   .action(async (ref, options) => {
-    let gitDiff: string;
-
     try {
-      if (options.staged) {
-        gitDiff = execSync("git diff --cached", { encoding: "utf-8" });
-      } else if (options.commit) {
-        gitDiff = execSync(`git show ${options.commit}`, { encoding: "utf-8" });
-      } else if (ref) {
-        gitDiff = execSync(`git show ${ref}`, { encoding: "utf-8" });
-      } else {
-        gitDiff = execSync("git diff", { encoding: "utf-8" });
+      const gitCommand = (() => {
+        if (options.staged) return "git diff --cached --no-prefix";
+        if (options.commit) return `git show ${options.commit} --no-prefix`;
+        if (ref) return `git show ${ref} --no-prefix`;
+        return "git diff --no-prefix";
+      })();
+
+      const [{ stdout: gitDiff }, diffModule, { parsePatch }] =
+        await Promise.all([
+          execAsync(gitCommand, { encoding: "utf-8" }),
+          import("./diff.tsx"),
+          import("diff"),
+        ]);
+
+      if (!gitDiff.trim()) {
+        console.log("No changes to display");
+        process.exit(0);
+      }
+
+      const parsedFiles = parsePatch(gitDiff);
+
+      if (parsedFiles.length === 0) {
+        console.log("No changes to display");
+        process.exit(0);
       }
+
+      const { ErrorBoundary } = diffModule;
+
+      await render(
+        React.createElement(
+          ErrorBoundary,
+          null,
+          React.createElement(App, { parsedFiles }),
+        ),
+      );
     } catch (error) {
       console.error("Error getting git diff:", error);
       process.exit(1);
     }
+  });
 
-    if (!gitDiff.trim()) {
-      console.log("No changes to display");
+cli
+  .command("difftool <local> <remote>", "Git difftool integration")
+  .action(async (local: string, remote: string) => {
+    if (!process.stdout.isTTY) {
+      execSync(`git diff --no-ext-diff "${local}" "${remote}"`, {
+        stdio: "inherit",
+      });
       process.exit(0);
     }
 
-    const parsedFiles = parsePatch(gitDiff);
+    try {
+      const [localContent, remoteContent, diffModule, { structuredPatch }] =
+        await Promise.all([
+          fs.readFileSync(local, "utf-8"),
+          fs.readFileSync(remote, "utf-8"),
+          import("./diff.tsx"),
+          import("diff"),
+        ]);
 
-    if (parsedFiles.length === 0) {
-      console.log("No changes to display");
-      process.exit(0);
+      const patch = structuredPatch(
+        local,
+        remote,
+        localContent,
+        remoteContent,
+        "",
+        "",
+      );
+
+      if (patch.hunks.length === 0) {
+        console.log("No changes to display");
+        process.exit(0);
+      }
+
+      const { ErrorBoundary } = diffModule;
+
+      await render(
+        React.createElement(
+          ErrorBoundary,
+          null,
+          React.createElement(App, { parsedFiles: [patch] }),
+        ),
+      );
+    } catch (error) {
+      console.error("Error displaying diff:", error);
+      process.exit(1);
     }
+  });
+
+cli
+  .command(
+    "pick <branch>",
+    "Pick files from another branch to apply to HEAD (experimental)",
+  )
+  .action(async (branch: string) => {
+    try {
+      const { stdout: currentBranch } = await execAsync(
+        "git branch --show-current",
+      );
+      const current = currentBranch.trim();
+
+      if (current === branch) {
+        p.log.error("Cannot pick from the same branch");
+        process.exit(1);
+      }
 
-    function App() {
-      const { width: initialWidth } = useTerminalDimensions();
-      const [width, setWidth] = React.useState(initialWidth);
+      const { stdout: branchExists } = await execAsync(
+        `git rev-parse --verify ${branch}`,
+        { encoding: "utf-8" },
+      ).catch(() => ({ stdout: "" }));
 
-      useOnResize(
-        React.useCallback((newWidth: number) => {
-          setWidth(newWidth);
-        }, []),
+      if (!branchExists.trim()) {
+        p.log.error(`Branch "${branch}" does not exist`);
+        process.exit(1);
+      }
+
+      const { stdout: diffOutput } = await execAsync(
+        `git diff --name-only HEAD ${branch}`,
+        { encoding: "utf-8" },
       );
-      const useSplitView = width >= 100;
-
-      return (
-        <box key={String(useSplitView)} style={{ flexDirection: "column", height: "100%", padding: 1 }}>
-          <scrollbox
-            style={{
-              flexGrow: 1,
-              rootOptions: {
-                backgroundColor: "transparent",
-                border: false,
-              },
-              scrollbarOptions: {
-                showArrows: false,
-                trackOptions: {
-                  foregroundColor: "#4a4a4a",
-                  backgroundColor: "transparent",
-                },
-              },
-            }}
-            focused
-          >
-            <box style={{ flexDirection: "column" }}>
-              {parsedFiles.map((file, idx) => (
-                <box
-                  key={idx}
-                  style={{
-                    flexDirection: "column",
-                    marginBottom: idx < parsedFiles.length - 1 ? 2 : 0,
-                  }}
-                >
-                  <FileEditPreviewTitle
-                    filePath={file.newFileName || file.oldFileName || "unknown"}
-                    hunks={file.hunks}
-                  />
-                  <box paddingTop={1} />
-                  <FileEditPreview
-                    hunks={file.hunks}
-                    paddingLeft={0}
-                    splitView={useSplitView}
-                  />
-                </box>
-              ))}
-            </box>
-          </scrollbox>
-        </box>
+
+      const files = diffOutput
+        .trim()
+        .split("\n")
+        .filter((f) => f);
+
+      if (files.length === 0) {
+        p.log.info("No differences found between branches");
+        process.exit(0);
+      }
+
+      const selectedFiles = await p.autocompleteMultiselect({
+        message: `Select files to pick from "${branch}":`,
+        options: files.map((file) => ({
+          value: file,
+          label: file,
+        })),
+        required: false,
+      });
+
+      if (p.isCancel(selectedFiles)) {
+        p.cancel("Operation cancelled.");
+        process.exit(0);
+      }
+
+      if (!selectedFiles || selectedFiles.length === 0) {
+        p.log.info("No files selected");
+        process.exit(0);
+      }
+
+      const { stdout: patchData } = await execAsync(
+        `git diff HEAD ${branch} -- ${selectedFiles.join(" ")}`,
+        { encoding: "utf-8" },
       );
-    }
 
-    await render(
-      React.createElement(ErrorBoundary, null, React.createElement(App)),
-    );
+      const patchFile = join(tmpdir(), `critique-pick-${Date.now()}.patch`);
+      fs.writeFileSync(patchFile, patchData);
+
+      try {
+        execSync(`git apply --3way "${patchFile}"`, { stdio: "pipe" });
+      } catch {
+        execSync(`git apply "${patchFile}"`, { stdio: "inherit" });
+      }
+
+      fs.unlinkSync(patchFile);
+
+      const { stdout: conflictFiles } = await execAsync(
+        "git diff --name-only --diff-filter=U",
+        { encoding: "utf-8" },
+      );
+
+      const conflicts = conflictFiles
+        .trim()
+        .split("\n")
+        .filter((f) => f);
+
+      if (conflicts.length > 0) {
+        p.log.warn(`Applied with conflicts in ${conflicts.length} file(s):`);
+        conflicts.forEach((file) => p.log.message(`  - ${file}`));
+      } else {
+        p.log.success(`Applied changes from ${selectedFiles.length} file(s)`);
+      }
+      process.exit(0);
+    } catch (error) {
+      p.log.error(
+        `Error: ${error instanceof Error ? error.message : String(error)}`,
+      );
+      process.exit(1);
+    }
   });
 
 cli.help();