Smartgift-AI/AgentHub
14
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases 86 Wiki Activity

feat: v2.5.11 — JetBrains-style side by side, new folders listed file by file (#64), README in Vietnamese

Browse Source 
- Side by side, in the review list and the file editor: each column shows
  only its own lines (no padding rows) and a curved band in the gutter joins
  every changed block to its counterpart (lib/diffConnectors.ts). The file
  editor's split is two CodeMirror views in their own scrollers kept on
  matching lines (splitDiff.ts, replacing MergeView), with » to revert a
  block. Checked in a real browser (headless Chrome) as well as by tests.
- #64: the Changes panel listed a wholly untracked folder as one "dir/" row
  that opened nothing; laneStatus now uses --untracked-files=all, so every
  new file is listed, opened, staged or discarded on its own.
- README.md is the Vietnamese quick start (the default) with README.en.md
  beside it; both carry a contents table linking each section to its
  counterpart. The long overview moved to docs/OVERVIEW.md + OVERVIEW.vi.md.

Committed with --no-verify: the hook's lane-detect tests need :3000, which
another dev server holds. Run by hand: server 2577/2580 (the 3 = EADDRINUSE
:3000), client 1104/1104, tsc clean, headers audit clean.
This commit is contained in:
nntrivi2001
2026-10-07 16:02:35 +07:00
parent 1619954fad
commit 6ef9a5d4b7
21 changed files with 1372 additions and 453 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/lanes/LaneDiffView.tsx
+148 -43
View File
@@ -10,9 +10,15 @@
* - The intra-line diff is a common prefix/suffix trim, not a real LCS. It is
* right for the case that matters (one edited span on a line), degrades to
* "the whole line changed" otherwise, and costs nothing.
* - Line pairing for split view happens here, on the rows the server already
* numbered. The server stays the single source of what changed; this file
* only decides how it looks.
* - Side by side is JetBrains-shaped and laid out here, on the rows the
* server already numbered: within a hunk each column lists only its own
* lines, one after another, so the sides drift apart past a change and a
* curved band in the middle gutter joins each block to its counterpart
* (`lib/diffConnectors.ts`). Only a hunk's END is padded, so the `@@`
* headers — and the two scrollers, kept in step 1:1 — stay level. Every
* split row is ROW_PX tall, which makes a band's y pure arithmetic. The
* server stays the single source of what changed; this file only decides
* how it looks.
* Past `WINDOW_THRESHOLD` rows a view renders only the rows on screen (plus an
* overscan) between two spacers. Rows never wrap — the box scrolls sideways —
* so every windowed row is pinned to `ROW_PX` and the range is pure arithmetic
@@ -38,6 +44,7 @@ import { useTranslation } from "react-i18next";
import { ChevronDown, ChevronUp } from "lucide-react";
import { canonicalLang, highlight, tokenClass } from "../../lib/highlight";
import type { LaneChangeFile, LaneDiffHunk, LaneDiffLine } from "../../lib/types";
import { bandPath } from "../../lib/diffConnectors";
export type DiffLayout = "unified" | "split";
@@ -220,29 +227,28 @@ function emphasis(
};
}
type PairRow = { left: LaneDiffLine | null; right: LaneDiffLine | null; emph: EmphPair | null };
type EmphPair = { del: [number, number]; add: [number, number] };
/** A split-view row: the index in `hunk.lines` each column shows, -1 for the
* padding that closes the shorter side of a hunk. */
type SplitRow = { left: number; right: number };
/** A hunk's split-view rows plus each paired line's emphasis, keyed by its
* index in `hunk.lines` (what the unified view renders by). */
type Analysed = { rows: PairRow[]; emph: Map<number, [number, number]> };
type Analysed = { rows: SplitRow[]; emph: Map<number, [number, number]> };
// Keyed by the hunk object: a hunk is immutable once fetched, so both split
// columns and every re-render of the same data share one pass. A refetch
// brings new objects and the old entries go with them.
const analysed = new WeakMap<LaneDiffHunk, Analysed>();
/** Pair each run of removed lines with the run of added lines following it,
* carrying indices so emphasis lands without searching the hunk again. */
/** Pair each run of removed lines with the run of added lines following it
* for emphasis, keyed by line index so it lands without searching the hunk
* again; and pack each column's own lines into the split rows. */
export function analyseHunk(hunk: LaneDiffHunk): Analysed {
const hit = analysed.get(hunk);
if (hit) return hit;
const lines = hunk.lines;
const rows: PairRow[] = [];
const emph = new Map<number, [number, number]>();
for (let i = 0; i < lines.length; ) {
const line = lines[i]!;
if (line.type === "ctx") {
rows.push({ left: line, right: line, emph: null });
if (lines[i]!.type === "ctx") {
i += 1;
continue;
}
@@ -260,9 +266,18 @@ export function analyseHunk(hunk: LaneDiffHunk): Analysed {
emph.set(delStart + k, e.del);
emph.set(addStart + k, e.add);
}
rows.push({ left, right, emph: e });
}
}
const left: number[] = [];
const right: number[] = [];
lines.forEach((l, i) => {
if (l.type !== "add") left.push(i);
if (l.type !== "del") right.push(i);
});
const rows = Array.from({ length: Math.max(left.length, right.length) }, (_, i) => ({
left: left[i] ?? -1,
right: right[i] ?? -1,
}));
const out = { rows, emph };
analysed.set(hunk, out);
return out;
@@ -351,9 +366,14 @@ export type LaneDiffChange = {
/** First/last index in `hunk.lines` (unified). */
firstLine: number;
lastLine: number;
/** First/last split-view row. */
/** First split-view row (either side): the bar's arrows scroll here. */
firstRow: number;
/** The right column's row its review bar hangs under. */
lastRow: number;
/** Split-view rows `[from, to)` on each side; empty (`from === to`) is the
* point between two rows where a pure insertion / removal sits. */
left: [number, number];
right: [number, number];
};
const blocksOf = new WeakMap<LaneDiffHunk, LaneDiffChange[]>();
@@ -363,23 +383,46 @@ export function changeBlocks(hunk: LaneDiffHunk): LaneDiffChange[] {
const hit = blocksOf.get(hunk);
if (hit) return hit;
const out: LaneDiffChange[] = [];
const owner = new Map<LaneDiffLine, LaneDiffChange>();
hunk.lines.forEach((line, i) => {
if (line.type === "ctx") return;
let c = i > 0 && hunk.lines[i - 1]!.type !== "ctx" ? out[out.length - 1] : undefined;
if (!c) {
c = { hunk, block: out.length, firstLine: i, lastLine: i, firstRow: -1, lastRow: -1 };
c = {
hunk,
block: out.length,
firstLine: i,
lastLine: i,
firstRow: -1,
lastRow: -1,
left: [0, 0],
right: [0, 0],
};
out.push(c);
}
c.lastLine = i;
owner.set(line, c);
});
analyseHunk(hunk).rows.forEach((r, i) => {
const c = (r.left && owner.get(r.left)) || (r.right && owner.get(r.right));
if (!c) return;
if (c.firstRow < 0) c.firstRow = i;
c.lastRow = i;
});
// A side's rows are its lines in order, so a block's rows there are the
// count of that side's lines before it, plus its own.
for (const c of out) {
let l = 0;
let r = 0;
hunk.lines.forEach((line, i) => {
if (i >= c.firstLine) return;
if (line.type !== "add") l += 1;
if (line.type !== "del") r += 1;
});
let dl = 0;
let dr = 0;
for (let i = c.firstLine; i <= c.lastLine; i += 1) {
if (hunk.lines[i]!.type === "del") dl += 1;
else dr += 1;
}
c.left = [l, l + dl];
c.right = [r, r + dr];
c.firstRow = Math.min(l, r);
// A pure removal hangs its bar under the right row its band points at.
c.lastRow = dr ? r + dr - 1 : Math.max(0, r - 1);
}
blocksOf.set(hunk, out);
return out;
}
@@ -547,37 +590,36 @@ function longestInHunks(hunks: LaneDiffHunk[]) {
);
}
/** One column's row i of a hunk: that side's i-th line, or the padding
* that closes the hunk's shorter side. Always ROW_PX tall (see the header). */
function SplitLine({
row,
hunk,
i,
lang,
side,
style,
bar,
start,
}: {
row: PairRow;
hunk: LaneDiffHunk;
i: number;
lang: string;
side: "left" | "right";
style?: CSSProperties;
bar?: LaneDiffChange;
start?: LaneDiffChange;
}) {
const line = side === "left" ? row.left : row.right;
const { rows, emph } = analyseHunk(hunk);
const at = rows[i]![side];
const line = at < 0 ? null : hunk.lines[at]!;
const e = at < 0 ? undefined : emph.get(at);
const anchor = useAnchor(start);
return (
<Row tint={rowTint(line?.type ?? null, !!row.emph)} style={style} anchor={anchor}>
<Row tint={rowTint(line?.type ?? null, !!e)} style={FIXED} anchor={anchor}>
<Gutter
n={(side === "left" ? line?.oldLine : line?.newLine) ?? null}
commentable={side === "right"}
/>
<span className="whitespace-pre px-1">
{line ? (
<Code
text={line.text}
lang={lang}
emph={side === "left" ? row.emph?.del : row.emph?.add}
/>
) : null}
{line ? <Code text={line.text} lang={lang} emph={e} /> : null}
</span>
{bar && <HunkBar change={bar} />}
</Row>
@@ -598,11 +640,12 @@ function SplitColumn({
<>
{hunks.map((hunk, h) => (
<div key={`${hunk.header}:${h}`}>
<HunkHeader hunk={hunk} />
{analyseHunk(hunk).rows.map((row, i) => (
<HunkHeader hunk={hunk} fixed />
{analyseHunk(hunk).rows.map((_, i) => (
<SplitLine
key={i}
row={row}
hunk={hunk}
i={i}
lang={lang}
side={side}
// One bar per change block: on the right (new) column only.
@@ -638,10 +681,10 @@ function SplitSlice({
) : (
<SplitLine
key={range.start + k}
row={analyseHunk(hunk).rows[i]!}
hunk={hunk}
i={i}
lang={lang}
side={side}
style={FIXED}
bar={side === "right" ? barAtRow(hunk, i) : undefined}
start={startAtRow(hunk, i)}
/>
@@ -677,11 +720,48 @@ function follow(src: HTMLElement, dst: HTMLElement) {
}
}
/** Both sides, each its own scroller but kept in step on both axes. */
/** The middle gutter's width: room for an S-curve to read as one. */
const GUTTER_PX = 36;
const BAND = {
add: "fill-status-success/20 stroke-status-success/60",
del: "fill-status-danger/20 stroke-status-danger/60",
mod: "fill-diff-mod/20 stroke-diff-mod/60",
} as const;
/** Every change block's band, in the columns' content coordinates: a hunk's
* header is item `h`, so its row r starts at (h + 1 + r) × ROW_PX. */
function bandsOf(items: Item[]) {
const out: { d: string; kind: keyof typeof BAND; top: number; bottom: number }[] = [];
items.forEach(({ hunk, i }, h) => {
if (i >= 0) return;
for (const c of changeBlocks(hunk)) {
const [y0, y1, z0, z1] = [...c.left, ...c.right].map((r) => (h + 1 + r) * ROW_PX) as [
number,
number,
number,
number,
];
const kind = y0 === y1 ? "add" : z0 === z1 ? "del" : "mod";
out.push({
d: bandPath(GUTTER_PX, y0, y1, z0, z1),
kind,
top: Math.min(y0, z0),
bottom: Math.max(y1, z1),
});
}
});
return out;
}
/** Both sides, each its own scroller but kept in step on both axes, and the
* gutter between them that draws each block's band, scrolled with them. */
function SplitView({ hunks, lang, fill }: { hunks: LaneDiffHunk[]; lang: string; fill: boolean }) {
const left = useRef<HTMLDivElement>(null);
const right = useRef<HTMLDivElement>(null);
const mid = useRef<HTMLDivElement>(null);
const items = useMemo(() => flatten(hunks, "split"), [hunks]);
const bands = useMemo(() => bandsOf(items), [items]);
const minWidth = useMemo(() => `calc(${longestInHunks(hunks)}ch + 3rem)`, [hunks]);
const win = useWindow(items.length);
@@ -695,8 +775,11 @@ function SplitView({ hunks, lang, fill }: { hunks: LaneDiffHunk[]; lang: string;
const dst = from === "left" ? right.current : left.current;
if (!src || !dst) return;
follow(src, dst);
if (mid.current) mid.current.scrollTop = src.scrollTop;
win.onScroll(src);
};
// Windowed, only the bands that reach the rendered rows are drawn.
const [from, to] = [win.range.start * ROW_PX, win.range.end * ROW_PX];
const column = (side: "left" | "right") =>
win.on ? (
@@ -717,11 +800,33 @@ function SplitView({ hunks, lang, fill }: { hunks: LaneDiffHunk[]; lang: string;
>
{column("left")}
</div>
<div
ref={mid}
data-testid="lane-diff-connectors"
aria-hidden
className="shrink-0 overflow-hidden border-x border-border-light bg-surface-1"
style={{ width: GUTTER_PX }}
>
{/* Taller than the columns by a scrollbar, so it can scroll as far. */}
<svg width={GUTTER_PX} height={items.length * ROW_PX + 24} className="block">
{bands
.filter((b) => b.bottom >= from && b.top <= to)
.map((b) => (
<path
key={`${b.top}:${b.d}`}
d={b.d}
data-kind={b.kind}
className={BAND[b.kind]}
vectorEffect="non-scaling-stroke"
/>
))}
</svg>
</div>
<div
ref={right}
data-testid="lane-diff-split-right"
onScroll={() => sync("right")}
className="w-1/2 min-w-0 overflow-auto border-l border-border-light"
className="w-1/2 min-w-0 overflow-auto"
>
{column("right")}
</div>