mergie-cli 0.1.0

package/src/web/components/CommitRail.tsx

@@ -0,0 +1,64 @@
+import { useState } from "react";
+import { formatCommitTime } from "@/web/lib/time.ts";
+import type { CommitInfo } from "@/services/git.ts";
+
+/** Truncate a commit subject for display. */
+function truncate(text: string, max = 60): string {
+  return text.length > max ? `${text.slice(0, max - 1)}…` : text;
+}
+
+/** Class name for a commit row given its position in the selected range. */
+function rowClass(i: number, fromIndex: number, toIndex: number): string {
+  const parts: string[] = ["rail-row"];
+  if (i >= fromIndex && i <= toIndex) parts.push("in-range");
+  if (i === fromIndex) parts.push("range-start");
+  if (i === toIndex) parts.push("range-end");
+  return parts.join(" ");
+}
+
+/**
+ * A vertical list of the PR's commits (oldest → newest) with timestamps. The
+ * currently-selected inclusive range is shown as a highlighted band. Click a
+ * commit to start a selection, then click another to complete the range.
+ */
+export function CommitRail(props: {
+  commits: CommitInfo[];
+  fromIndex: number;
+  toIndex: number;
+  onSelect: (fromIndex: number, toIndex: number) => void;
+}): React.JSX.Element {
+  const { commits, fromIndex, toIndex, onSelect } = props;
+  const [anchor, setAnchor] = useState<number | null>(null);
+
+  function clickRow(i: number): void {
+    if (anchor === null) {
+      setAnchor(i);
+      onSelect(i, i);
+    } else {
+      onSelect(Math.min(anchor, i), Math.max(anchor, i));
+      setAnchor(null);
+    }
+  }
+
+  return (
+    <div className="commit-rail">
+      <p className="rail-hint">
+        {anchor === null
+          ? "Click a commit to start, then click another to set the range."
+          : "Now click the other end of the range."}
+      </p>
+      <div className="rail-base">◦ base — before the PR</div>
+      <ol className="rail-list">
+        {commits.map((c, i) => (
+          <li key={c.sha}>
+            <button type="button" className={rowClass(i, fromIndex, toIndex)} onClick={() => clickRow(i)}>
+              <code className="rail-sha">{c.shortSha}</code>
+              <span className="rail-subject">{truncate(c.subject)}</span>
+              <span className="rail-time">{formatCommitTime(c.isoDate)}</span>
+            </button>
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}

package/src/web/components/ConfirmButton.tsx

@@ -0,0 +1,32 @@
+import { useState } from "react";
+
+/**
+ * A destructive-action button that requires a second click to confirm. The
+ * first click "arms" it, swapping in a confirm/cancel pair (with an optional
+ * warning line); confirming fires `onConfirm`, cancelling reverts.
+ */
+export function ConfirmButton(props: {
+  /** Label for the initial (unarmed) button. */
+  label?: string;
+  /** Label for the armed confirm button. */
+  confirmLabel?: string;
+  /** Extra warning shown once armed (e.g. "also deletes on GitHub"). */
+  warning?: string;
+  /** Called when the user confirms. */
+  onConfirm: () => void;
+}): React.JSX.Element {
+  const [armed, setArmed] = useState(false);
+
+  if (!armed) {
+    return <button type="button" className="btn btn-ghost btn-sm" onClick={() => setArmed(true)}>{props.label ?? "Delete"}</button>;
+  }
+  return (
+    <span className="confirm-inline">
+      {props.warning && <span className="confirm-warn">{props.warning}</span>}
+      <button type="button" className="btn btn-danger btn-sm" onClick={() => { setArmed(false); props.onConfirm(); }}>
+        {props.confirmLabel ?? "Confirm delete"}
+      </button>
+      <button type="button" className="btn btn-sm" onClick={() => setArmed(false)}>Cancel</button>
+    </span>
+  );
+}

package/src/web/components/CopyButton.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * A copy-to-clipboard button that briefly confirms the copy by swapping its
+ * label to "Copied!" for ~1.2s, then reverting — so the user gets feedback that
+ * an otherwise-silent clipboard write actually happened.
+ */
+export function CopyButton(props: {
+  /** Text to place on the clipboard. */
+  text: string;
+  /** Optional class name for styling parity with sibling buttons. */
+  className?: string;
+}): React.JSX.Element {
+  const [copied, setCopied] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => () => { if (timer.current) clearTimeout(timer.current); }, []);
+
+  const onClick = (): void => {
+    // Guard: navigator.clipboard is undefined outside secure contexts; the
+    // confirmation should still show rather than the click throwing silently.
+    if (navigator.clipboard) void navigator.clipboard.writeText(props.text);
+    setCopied(true);
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setCopied(false), 1200);
+  };
+
+  return (
+    <button type="button" className={props.className ?? "btn btn-ghost btn-sm"} onClick={onClick}>
+      {copied ? "Copied!" : "Copy"}
+    </button>
+  );
+}

package/src/web/components/CopyIconButton.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useRef, useState } from "react";
+import { CopyIcon, CheckIcon } from "./Icons.tsx";
+import { Tooltip } from "./Tooltip.tsx";
+
+/**
+ * An icon-only copy-to-clipboard button: shows a copy glyph, briefly swaps to a
+ * check on click to confirm the (otherwise silent) clipboard write, and exposes
+ * its purpose via a hover tooltip + `aria-label`. Matches the app's small
+ * ghost-icon button style.
+ *
+ * @param props.text  - Text to place on the clipboard.
+ * @param props.label - Tooltip + accessible label (e.g. "Copy PR URL").
+ * @param props.size  - Icon pixel size (default 13).
+ */
+export function CopyIconButton(props: { text: string; label: string; size?: number }): React.JSX.Element {
+  const { text, label, size = 13 } = props;
+  const [copied, setCopied] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => () => { if (timer.current) clearTimeout(timer.current); }, []);
+
+  const onClick = (): void => {
+    // navigator.clipboard is undefined outside secure contexts; still confirm
+    // rather than let the click throw silently.
+    if (navigator.clipboard) void navigator.clipboard.writeText(text);
+    setCopied(true);
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setCopied(false), 1200);
+  };
+
+  return (
+    <Tooltip label={copied ? "Copied!" : label} placement="bottom">
+      <button type="button" className="icon-copy-btn" aria-label={label} onClick={onClick}>
+        {copied ? <CheckIcon size={size} /> : <CopyIcon size={size} />}
+      </button>
+    </Tooltip>
+  );
+}

package/src/web/components/DiffFrame.tsx

@@ -0,0 +1,133 @@
+import { useEffect, useRef, useState } from "react";
+import { trpc } from "../trpc.ts";
+import { firstChangedIndexFrom } from "@/web/lib/anchorRow.ts";
+import { highlightToHtml, languageForPath } from "@/web/lib/highlight.ts";
+import { applyDiffMarks } from "@/web/lib/diffMarks.ts";
+import { splitSideIsEmpty } from "@/web/lib/splitSide.ts";
+import { FileIcon } from "./Icons.tsx";
+import type { SplitCell, SplitRow } from "@/daemon/splitView.ts";
+
+/** Render one side's code cell (blank for padding). The `side` (left=base,
+ * right=head) is stamped as `data-side` so a symbol selected here defaults its
+ * lookup to that checkout. */
+function codeCell(cell: SplitCell, language: string | undefined, side: "base" | "head"): React.JSX.Element {
+  const html: string = cell.kind === "empty" ? "" : applyDiffMarks(highlightToHtml(cell.text, language), cell.changes ?? []);
+  return (
+    <>
+      <td className="split-no">{cell.no ?? ""}</td>
+      <td className={`split-code split-${cell.kind}`} data-side={side} dangerouslySetInnerHTML={{ __html: html }} />
+    </>
+  );
+}
+
+/** Row index whose left/right line number equals `anchorLine`, or -1. */
+function anchorMatchIndex(rows: SplitRow[], anchorLine: number | null): number {
+  if (anchorLine === null) return -1;
+  return rows.findIndex((r) => r.right.no === anchorLine || r.left.no === anchorLine);
+}
+
+/**
+ * The split base/head body of a file over a range: the synced-scroll table
+ * (single table so both columns scroll together), the anchor-line nudge onto
+ * the first real +/- line, the one-shot open flash, and the single-column
+ * placeholder when one side is empty (added/deleted file). Presentational:
+ * owns only the `fileSplit` query + the anchor/flash effect. Reused by the
+ * full-file modal and the file navigator.
+ *
+ * @param props.prId - PR id the file belongs to.
+ * @param props.path - Repo-relative file path.
+ * @param props.start - Base SHA of the range.
+ * @param props.end - Head SHA of the range.
+ * @param props.anchorLine - 1-based line to center + flash, or null.
+ * @param props.hideWhitespace - When true, collapse whitespace-only changes
+ *   (keeps the split view consistent with the main diff's toggle).
+ */
+export function DiffFrame(props: {
+  prId: string;
+  path: string;
+  start: string;
+  end: string;
+  anchorLine: number | null;
+  hideWhitespace?: boolean;
+}): React.JSX.Element {
+  const { prId, path, start, end, anchorLine, hideWhitespace } = props;
+  const language: string | undefined = languageForPath(path);
+  const split = trpc.fileSplit.useQuery({ id: prId, path, start, end, ignoreWhitespace: hideWhitespace ?? false });
+  const rows: SplitRow[] = split.data ?? [];
+  const anchorRef = useRef<HTMLTableRowElement>(null);
+  // Nudge the anchor off the context line it was opened at (e.g. a `}`) onto the
+  // first real +/- line at or below it.
+  const anchorIdx: number = firstChangedIndexFrom(rows, anchorMatchIndex(rows, anchorLine));
+  const baseEmpty: boolean = splitSideIsEmpty(rows, "left");
+  const headEmpty: boolean = splitSideIsEmpty(rows, "right");
+  // A one-shot flash: highlight the anchor on open, then fade out (see the
+  // `.split-anchor` animation). Reset to false first so the animation re-runs
+  // whenever the anchor changes (reopening View file / a different hunk).
+  const [flashing, setFlashing] = useState(false);
+
+  useEffect(() => {
+    if (anchorRef.current) anchorRef.current.scrollIntoView({ block: "center" });
+    if (anchorIdx < 0) return;
+    setFlashing(false);
+    const id = requestAnimationFrame(() => setFlashing(true));
+    return () => cancelAnimationFrame(id);
+  }, [rows.length, anchorIdx]);
+
+  const anchorClass = (i: number): string | undefined => (i === anchorIdx && flashing ? "split-anchor" : undefined);
+
+  return (
+    <div className="full-file-body">
+      {split.isLoading && <p className="notice">Loading file…</p>}
+      {baseEmpty && !split.isLoading && (
+        <FileBody rows={rows} side="right" language={language} anchorIdx={anchorIdx} anchorRef={anchorRef} anchorClass={anchorClass}
+          placeholder="This file was added — there is no base version to compare against." />
+      )}
+      {headEmpty && !split.isLoading && (
+        <FileBody rows={rows} side="left" language={language} anchorIdx={anchorIdx} anchorRef={anchorRef} anchorClass={anchorClass}
+          placeholder="This file was deleted — there is no head version to compare against." />
+      )}
+      {!baseEmpty && !headEmpty && (
+        <table className="split-table">
+          <tbody>
+            {rows.map((r, i) => (
+              <tr key={i} ref={i === anchorIdx ? anchorRef : undefined} className={anchorClass(i)}>
+                {codeCell(r.left, language, "base")}
+                {codeCell(r.right, language, "head")}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}
+
+/**
+ * A single-column body used when the other side is empty: renders only the
+ * side that has content, with a placeholder banner explaining the empty side.
+ */
+function FileBody(props: {
+  rows: SplitRow[];
+  side: "left" | "right";
+  language: string | undefined;
+  anchorIdx: number;
+  anchorRef: React.RefObject<HTMLTableRowElement | null>;
+  anchorClass: (i: number) => string | undefined;
+  placeholder: string;
+}): React.JSX.Element {
+  const { rows, side, language, anchorIdx, anchorRef, anchorClass, placeholder } = props;
+  return (
+    <>
+      <div className="modal-empty-side"><FileIcon size={28} />{placeholder}</div>
+      <table className="split-table">
+        <tbody>
+          {rows.map((r, i) => (
+            <tr key={i} ref={i === anchorIdx ? anchorRef : undefined} className={anchorClass(i)}>
+              {codeCell(r[side], language, side === "left" ? "base" : "head")}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </>
+  );
+}

package/src/web/components/DiffLines.tsx

@@ -0,0 +1,149 @@
+import { Fragment, useEffect, useState } from "react";
+import { highlightToHtml, languageForPath } from "@/web/lib/highlight.ts";
+import { applyDiffMarks } from "@/web/lib/diffMarks.ts";
+import { buildLinesAnchor } from "@/web/lib/lineSelection.ts";
+import { sideForLineKind } from "@/web/lib/identifierMenu.ts";
+import { CommentComposer } from "./CommentComposer.tsx";
+import { CommentItem } from "./CommentItem.tsx";
+import { GithubThreadView } from "./GithubThreadView.tsx";
+import type { DiffLine } from "@/domain/diff.ts";
+import type { AnchoredComment, AnchoredGithubThread } from "@/daemon/reviewService.ts";
+import type { PostPreview, PostTarget } from "@/daemon/registry.ts";
+import type { AddCommentArgs } from "../state/useReview.ts";
+
+/** Marker character for a diff line kind. */
+function marker(kind: DiffLine["kind"]): string {
+  return kind === "add" ? "+" : kind === "del" ? "-" : " ";
+}
+
+/** Group a hunk's line-level comments by their line index. */
+function commentsByLine(comments: AnchoredComment[]): Map<number, AnchoredComment[]> {
+  const map = new Map<number, AnchoredComment[]>();
+  for (const c of comments) {
+    if (c.lineIndex < 0) continue;
+    map.set(c.lineIndex, [...(map.get(c.lineIndex) ?? []), c]);
+  }
+  return map;
+}
+
+/** Group synced GitHub threads by their anchored line index. */
+function threadsByLine(threads: AnchoredGithubThread[]): Map<number, AnchoredGithubThread[]> {
+  const map = new Map<number, AnchoredGithubThread[]>();
+  for (const t of threads) {
+    if (t.lineIndex < 0) continue;
+    map.set(t.lineIndex, [...(map.get(t.lineIndex) ?? []), t]);
+  }
+  return map;
+}
+
+/** An inclusive range of line indices. */
+interface Span {
+  start: number;
+  end: number;
+}
+
+/** Normalise a span to [lo, hi]. */
+function bounds(span: Span | null): { lo: number; hi: number } {
+  if (!span) return { lo: -1, hi: -1 };
+  return { lo: Math.min(span.start, span.end), hi: Math.max(span.start, span.end) };
+}
+
+/**
+ * Render a hunk's lines with gutters, markers, highlighting, and inline
+ * comments. Press the `+` on a line and drag over lines (GitHub-style) to
+ * select a range, then release to open a comment composer for that range.
+ */
+export function DiffLines(props: {
+  lines: DiffLine[];
+  path: string;
+  comments: AnchoredComment[];
+  githubThreads: AnchoredGithubThread[];
+  endSha: string;
+  onAddComment: (args: AddCommentArgs) => void;
+  onEditComment: (id: number, body: string) => void;
+  onDeleteComment: (id: number) => void;
+  onReplyToThread: (rootGithubId: string, body: string) => void;
+  previewPost: (commentId: number, target: PostTarget) => Promise<PostPreview>;
+  onPostComment: (commentId: number, target: PostTarget) => void;
+}): React.JSX.Element {
+  const { lines, path, comments, githubThreads, endSha, onAddComment, onEditComment, onDeleteComment } = props;
+  const { onReplyToThread, previewPost, onPostComment } = props;
+  const language: string | undefined = languageForPath(path);
+  const byLine = commentsByLine(comments);
+  const threadLines = threadsByLine(githubThreads);
+  const [dragging, setDragging] = useState<Span | null>(null);
+  const [composing, setComposing] = useState<Span | null>(null);
+
+  // Finish the drag on mouse release anywhere in the window.
+  useEffect(() => {
+    if (!dragging) return;
+    const onUp = (): void => { setComposing(dragging); setDragging(null); };
+    window.addEventListener("mouseup", onUp);
+    return () => window.removeEventListener("mouseup", onUp);
+  }, [dragging]);
+
+  const submit = (body: string): void => {
+    if (composing) {
+      const anchor = buildLinesAnchor(lines, composing.start, composing.end);
+      if (anchor) onAddComment({ kind: "lines", path, body, madeAtSha: endSha, ...anchor });
+    }
+    setComposing(null);
+  };
+
+  const active = bounds(dragging ?? composing);
+
+  return (
+    <table className={dragging ? "diff-lines dragging" : "diff-lines"}>
+      <tbody>
+        {lines.map((line, i) => (
+          <Fragment key={i}>
+            <tr
+              className={`line line-${line.kind}${i >= active.lo && i <= active.hi ? " selected" : ""}`}
+              onMouseEnter={() => setDragging((d) => (d ? { start: d.start, end: i } : d))}
+            >
+              <td className="line-act">
+                <button
+                  type="button"
+                  className="add-comment"
+                  title="Comment — drag over lines to select a range"
+                  onMouseDown={(e) => { e.preventDefault(); setComposing(null); setDragging({ start: i, end: i }); }}
+                >+</button>
+              </td>
+              <td className="gutter old">{line.oldNo ?? ""}</td>
+              <td className="gutter new">{line.newNo ?? ""}</td>
+              <td className="marker">{marker(line.kind)}</td>
+              <td className="code" data-side={sideForLineKind(line.kind)} dangerouslySetInnerHTML={{ __html: applyDiffMarks(highlightToHtml(line.text, language), line.changes ?? []) }} />
+            </tr>
+            {(byLine.get(i) ?? []).map((c) => (
+              <tr key={`c${c.id}`} className="comment-row">
+                <td colSpan={5}>
+                  <CommentItem
+                    comment={c}
+                    onEdit={(body) => onEditComment(c.id, body)}
+                    onDelete={() => onDeleteComment(c.id)}
+                    previewPost={(target) => previewPost(c.id, target)}
+                    onPost={(target) => onPostComment(c.id, target)}
+                  />
+                </td>
+              </tr>
+            ))}
+            {(threadLines.get(i) ?? []).map((t) => (
+              <tr key={`t${t.root.githubId}`} className="comment-row">
+                <td colSpan={5}>
+                  <GithubThreadView thread={t} onReply={(body) => onReplyToThread(t.root.githubId, body)} />
+                </td>
+              </tr>
+            ))}
+            {composing && bounds(composing).hi === i && (
+              <tr className="comment-row">
+                <td colSpan={5}>
+                  <CommentComposer onSubmit={submit} onCancel={() => setComposing(null)} />
+                </td>
+              </tr>
+            )}
+          </Fragment>
+        ))}
+      </tbody>
+    </table>
+  );
+}

package/src/web/components/FileFrame.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useRef } from "react";
+import { trpc } from "../trpc.ts";
+import { highlightToHtml, languageForPath } from "@/web/lib/highlight.ts";
+import type { SearchSide } from "../state/useCodeSearch.ts";
+
+/**
+ * The single-version body of a file at one commit: the full text with the
+ * target line centered on open and flashed via `.split-anchor`. Presentational;
+ * owns only the `fileAt` query + the center-on-open effect. Reused by the
+ * plain file modal and the file navigator.
+ *
+ * @param props.prId - PR id the file belongs to.
+ * @param props.path - Repo-relative file path.
+ * @param props.sha - Commit SHA to read the file at.
+ * @param props.line - 1-based line to center and briefly highlight.
+ * @param props.side - Which checkout this version is (base/head), stamped as
+ *   `data-side` so a symbol selected here defaults its lookup to that side.
+ */
+export function FileFrame(props: { prId: string; path: string; sha: string; line: number; side: SearchSide }): React.JSX.Element {
+  const { prId, path, sha, line, side } = props;
+  const query = trpc.fileAt.useQuery({ id: prId, sha, path });
+  const lines: string[] = (query.data ?? "").split("\n");
+  const language: string | undefined = languageForPath(path);
+  const anchor = useRef<HTMLTableRowElement>(null);
+
+  useEffect(() => {
+    if (anchor.current) anchor.current.scrollIntoView({ block: "center" });
+  }, [query.data, line]);
+
+  return (
+    <div className="full-file-body">
+      {query.isLoading && <p className="notice">Loading file…</p>}
+      <table className="split-table">
+        <tbody>
+          {lines.map((text, i) => (
+            <tr key={i} ref={i + 1 === line ? anchor : undefined} className={i + 1 === line ? "split-anchor" : undefined}>
+              <td className="split-no">{i + 1}</td>
+              <td className="split-code" data-side={side} dangerouslySetInnerHTML={{ __html: highlightToHtml(text, language) }} />
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}