feat: edit in the Changes panel, git graph history, plan quota (v2.3.0)

- Changes panel: a working file opens in a CodeMirror editor with its diff inline (DiffEditor.tsx, @codemirror/merge, lazy-loaded); Changes folds the unchanged lines, Whole file shows them; side by side at 50/50 and full width; a Revert per block; original from HEAD or the branch's merge base (`mergeBase` on GET /git/changes?range=branch) - Every diff: green = line added whole, red = removed whole, blue = edited in place (--diff-mod) - History drawn as a commit graph (#58: `parents` on GET /git/log, --date-order; lib/commitGraph.ts) - Per-workspace never-stage list, drawn orange in the Files tree (--kept); closed Terminal rows past three deleted - Status bar plan quota for Claude (per account) and Codex (GET /api/pricing/quota, server/lib/quota.js); compact hover panel that stays open, Refresh button with a spinner - Settings → Appearance holds language, theme and pet; Ctrl+Shift+C copies; compact sidebar navigation and short session times
2026-10-06 15:38:25 +07:00
parent f0500dc592
commit daf5b7be92
65 changed files with 2414 additions and 587 deletions
@@ -0,0 +1,90 @@
+/**
+ * @file Tests for the Changes panel's CodeMirror editor: which changed lines
+ * count as edited in place (blue) rather than added or removed whole, and the
+ * editor's own diff classes on a real mount.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+import { describe, it, expect, vi } from "vitest";
+import { render, waitFor } from "@testing-library/react";
+import DiffEditor, { keepsText } from "../DiffEditor";
+
+// jsdom lays nothing out; CodeMirror's measuring asks a Range for its boxes.
+const EMPTY = Object.assign([], { item: () => null }) as unknown as DOMRectList;
+Range.prototype.getClientRects ??= () => EMPTY;
+Range.prototype.getBoundingClientRect ??= () => new DOMRect();
+
+describe("keepsText", () => {
+  it("is false for a line whose every non-blank character changed", () => {
+    expect(keepsText("  added()", 10, [[12, 19]])).toBe(false);
+    expect(keepsText("", 0, [])).toBe(false);
+    // Only a `;` survived: not the same line.
+    expect(keepsText("export x;", 0, [[0, 8]])).toBe(false);
+  });
+
+  it("is true when some text outside the changes survives", () => {
+    expect(keepsText("const x = 2;", 0, [[10, 11]])).toBe(true);
+  });
+});
+
+describe("DiffEditor", () => {
+  it("marks a whole new line green and a line edited in place blue", async () => {
+    const { container } = render(
+      <DiffEditor
+        value={"keep\nconst x = 2;\nbrand new"}
+        original={"keep\nconst x = 1;"}
+        lang="ts"
+        label="Edit"
+        revertLabel="Revert"
+        onChange={vi.fn()}
+        onSave={vi.fn()}
+      />
+    );
+    await waitFor(() => expect(container.querySelectorAll(".cm-changedLine")).toHaveLength(2));
+    const lines = [...container.querySelectorAll<HTMLElement>(".cm-changedLine")];
+    expect(lines.map((l) => l.classList.contains("cm-ah-mod"))).toEqual([true, false]);
+    await waitFor(() =>
+      expect(container.querySelector(".cm-deletedLine")).toHaveAttribute("data-ah", "mod")
+    );
+  });
+
+  it("side by side: the original read-only on the left, its edited line blue", async () => {
+    const { container } = render(
+      <DiffEditor
+        layout="split"
+        value={"keep\nconst x = 2;"}
+        original={"keep\nconst x = 1;"}
+        lang="ts"
+        label="Edit"
+        revertLabel="Revert"
+        onChange={vi.fn()}
+        onSave={vi.fn()}
+      />
+    );
+    await waitFor(() => expect(container.querySelectorAll(".cm-editor")).toHaveLength(2));
+    const [left, right] = [...container.querySelectorAll<HTMLElement>(".cm-content")];
+    expect(left).toHaveAttribute("contenteditable", "false");
+    expect(right).toHaveAttribute("contenteditable", "true");
+    expect(container.querySelector(".cm-merge-a .cm-changedLine.cm-ah-mod")).not.toBeNull();
+    expect(container.querySelector(".cm-merge-b .cm-changedLine.cm-ah-mod")).not.toBeNull();
+    expect(container.querySelector(".cm-merge-revert button")).toHaveAttribute("title", "Revert");
+  });
+
+  it("folds unchanged lines away when collapsed, and offers Revert on a block", async () => {
+    const same = Array.from({ length: 30 }, (_, i) => `line ${i}`).join("\n");
+    const { container } = render(
+      <DiffEditor
+        collapse
+        value={`${same}\nchanged`}
+        original={`${same}\noriginal`}
+        lang="plain"
+        label="Edit"
+        revertLabel="Revert"
+        onChange={vi.fn()}
+        onSave={vi.fn()}
+      />
+    );
+    await waitFor(() => expect(container.querySelector(".cm-collapsedLines")).not.toBeNull());
+    const buttons = [...container.querySelectorAll<HTMLButtonElement>(".cm-chunkButtons button")];
+    expect(buttons.filter((b) => !b.hidden).map((b) => b.textContent)).toEqual(["Revert"]);
+  });
+});