mergie-cli 0.1.0

package/src/web/components/FileNavigator.tsx

@@ -0,0 +1,195 @@
+import { useEffect, useReducer, useState } from "react";
+import { DiffFrame } from "./DiffFrame.tsx";
+import { FileFrame } from "./FileFrame.tsx";
+import { ResultsList, type OpenLocation, type ResultsHeader } from "./ResultsList.tsx";
+import { IdentifierMenuPortal } from "./IdentifierMenuPortal.tsx";
+import { useIdentifierMenu } from "@/web/lib/useIdentifierMenu.ts";
+import { useNavLookup } from "@/web/lib/useNavLookup.ts";
+import { opLabel } from "@/web/lib/navRouting.ts";
+import {
+  navStackReducer, initNavStack, currentFrame, canGoBack, canGoForward, frameKey,
+  type NavFrame, type NavStack, type NavStackAction,
+} from "@/web/lib/navStack.ts";
+import { CloseIcon, FileIcon, ChevronLeftIcon, ChevronRightIcon } from "./Icons.tsx";
+import type { CodeResultFilters } from "@/web/lib/filterCodeResults.ts";
+import type { MenuOp, SearchSide } from "../state/useCodeSearch.ts";
+
+/** Breadcrumb-style title for the frame currently on screen. */
+function frameTitle(frame: NavFrame): React.JSX.Element {
+  if (frame.kind === "diff") return <><FileIcon size={14} />{frame.path} <span className="split-base-head">diff</span></>;
+  if (frame.kind === "file") return <><FileIcon size={14} />{frame.path}:{frame.line} <span className="split-base-head">@ <code>{frame.sha.slice(0, 7)}</code></span></>;
+  return <><strong>{opLabel(frame.op)}</strong> <code>{frame.term}</code> <span className="symbol-side-tag">{frame.side}</span></>;
+}
+
+/** Resolve the SHA to run a lookup against for a given side + range. */
+function shaForSide(side: SearchSide, range: { start: string; end: string }): string {
+  return side === "base" ? range.start : range.end;
+}
+
+/**
+ * A stackable file/results overlay with Back/Forward history. Hosts a frame
+ * stack (a starting diff or file frame, plus frames pushed by double-clicking a
+ * symbol inside a diff/file frame or by opening a hit from a results frame).
+ * Every visited frame stays mounted (hidden when not current) so returning to a
+ * file restores the scroll position rather than re-centering.
+ *
+ * Double-click routing: Usages/Search and multi-result Definition push a
+ * results frame; an *unscoped* single-result Definition and a results-hit "View
+ * file" push a file frame (a *scoped* single-result Definition stays a results
+ * frame so its scope chip + broaden control remain reachable). The navigator is
+ * the topmost overlay: it owns Esc (closes the whole navigator) and — via the
+ * results list — ↑/↓/Enter, without collapsing the rail behind it. An open
+ * symbol menu takes Esc precedence over it.
+ *
+ * @param props.prId - PR id everything runs against.
+ * @param props.origin - The frame to seed the history with.
+ * @param props.range - The current review range (base/head SHAs for diffs + lookups).
+ * @param props.hideWhitespace - When true, collapse whitespace-only changes in
+ *   the split diff (mirrors the main diff's toggle).
+ * @param props.onClose - Close the whole navigator.
+ */
+export function FileNavigator(props: {
+  prId: string;
+  origin: NavFrame;
+  range: { start: string; end: string };
+  hideWhitespace?: boolean;
+  onClose: () => void;
+}): React.JSX.Element {
+  const { prId, origin, range, hideWhitespace, onClose } = props;
+  const [state, dispatch] = useReducer(navStackReducer, origin, initNavStack);
+  const push = (frame: NavFrame): void => dispatch({ type: "push", frame });
+  const menu = useIdentifierMenu();
+  const lookup = useNavLookup(prId, push);
+  const [filters, setFilters] = useState<CodeResultFilters>({});
+
+  useOverlayEsc(menu.menu !== null, menu.close, onClose);
+
+  const frame: NavFrame = currentFrame(state);
+  const pick = (op: MenuOp, side: SearchSide): void => {
+    // Scope the lookup to the file being viewed. The diff/file frame's own path
+    // is the reliable scope hint here (navigator frames have no `.file-section`
+    // for the selection-based hint to read), so prefer it.
+    if (menu.menu) {
+      const file: string = frame.kind === "results" ? menu.menu.file : frame.path;
+      lookup.run({ op, term: menu.menu.term, side, file, sha: shaForSide(side, range) });
+    }
+    menu.close();
+  };
+  const openHit = (loc: OpenLocation): void => push({ kind: "file", path: loc.path, sha: loc.sha, line: loc.line });
+  // Re-run a scoped results frame's lookup repo-wide (the "search everywhere" chip action).
+  const broaden = (f: NavFrame): void => {
+    if (f.kind !== "results" || f.scopeFile === "") return;
+    lookup.run({ op: f.op, term: f.term, side: f.side, file: "", sha: f.sha });
+  };
+
+  return (
+    <>
+      <div className="modal-overlay" onClick={onClose}>
+        <div className="modal full-file file-navigator" onClick={(e) => e.stopPropagation()}>
+          <NavControls state={state} dispatch={dispatch} onClose={onClose} title={frameTitle(frame)} />
+          {lookup.loading && (
+            <div className="diff-loading"><span className="chat-spinner" aria-hidden="true" /> Looking up…</div>
+          )}
+          {lookup.error && <p className="notice results-error">{lookup.error}</p>}
+          {/* All visited frames stay mounted; only the current one is visible.
+              Keys combine the history index with the frame identity so going
+              Back/Forward reuses the same mounted instance (preserving scroll),
+              while pushing a new frame after going Back replaces the slot. */}
+          {state.stack.map((f, i) => (
+            <NavFrameBody
+              key={`${i}:${frameKey(f)}`}
+              visible={i === state.index}
+              prId={prId} frame={f} range={range} menu={menu}
+              filters={filters} onFilters={setFilters} onOpenHit={openHit}
+              onClose={onClose} onBroaden={() => broaden(f)}
+              hideWhitespace={hideWhitespace}
+            />
+          ))}
+        </div>
+      </div>
+      {/* The menu portals to document.body but React re-dispatches its events
+          through this parent; keeping it a SIBLING of the overlay (not a child)
+          stops a menu click from bubbling into the overlay's close-on-click. */}
+      <IdentifierMenuPortal menu={menu.menu} onPick={pick} onClose={menu.close} />
+    </>
+  );
+}
+
+/** Back/Forward + breadcrumb title + close, along the navigator's top edge. */
+function NavControls(props: {
+  state: NavStack;
+  dispatch: (a: NavStackAction) => void;
+  title: React.ReactNode;
+  onClose: () => void;
+}): React.JSX.Element {
+  const { state, dispatch, title, onClose } = props;
+  return (
+    <header className="modal-header nav-header">
+      <span className="nav-nav">
+        <button type="button" className="btn btn-ghost btn-sm" disabled={!canGoBack(state)} onClick={() => dispatch({ type: "back" })} aria-label="Back"><ChevronLeftIcon size={16} /></button>
+        <button type="button" className="btn btn-ghost btn-sm" disabled={!canGoForward(state)} onClick={() => dispatch({ type: "forward" })} aria-label="Forward"><ChevronRightIcon size={16} /></button>
+      </span>
+      <span className="modal-title nav-title">{title}</span>
+      <button type="button" className="modal-close" onClick={onClose} aria-label="Close"><CloseIcon size={18} /></button>
+    </header>
+  );
+}
+
+/**
+ * Render the body for one frame, attaching the identifier menu to code frames.
+ * Hidden (rather than unmounted) when not the current frame so its query result
+ * and scroll position survive Back/Forward.
+ */
+function NavFrameBody(props: {
+  prId: string;
+  frame: NavFrame;
+  range: { start: string; end: string };
+  menu: ReturnType<typeof useIdentifierMenu>;
+  filters: CodeResultFilters;
+  onFilters: (f: CodeResultFilters) => void;
+  onOpenHit: (loc: OpenLocation) => void;
+  onClose: () => void;
+  onBroaden: () => void;
+  visible: boolean;
+  hideWhitespace?: boolean;
+}): React.JSX.Element {
+  const { prId, frame, range, menu, filters, onFilters, onOpenHit, onClose, onBroaden, visible, hideWhitespace } = props;
+  const hidden: string = visible ? "" : " hidden";
+  if (frame.kind === "results") {
+    const header: ResultsHeader = { op: opLabel(frame.op), term: frame.term, scope: frame.side, scopeFile: frame.scopeFile };
+    return (
+      <div className={`nav-slot${hidden}`}>
+        <ResultsList
+          results={frame.results} loading={false} error={null}
+          filters={filters} onFilters={onFilters} sha={frame.sha}
+          header={header} onOpen={onOpenHit} onClose={onClose} onBroaden={onBroaden}
+        />
+      </div>
+    );
+  }
+  return (
+    <div className={`nav-code${hidden}`} onMouseUp={menu.onMouseUp} onDoubleClick={menu.onDoubleClick}>
+      {frame.kind === "diff"
+        ? <DiffFrame prId={prId} path={frame.path} start={range.start} end={range.end} anchorLine={frame.anchorLine ?? null} hideWhitespace={hideWhitespace} />
+        : <FileFrame prId={prId} path={frame.path} sha={frame.sha} line={frame.line} side={frame.sha === range.start ? "base" : "head"} />}
+    </div>
+  );
+}
+
+/**
+ * Single topmost-overlay keyboard owner. On Escape: if the symbol menu is open,
+ * close it; otherwise close the navigator. Either way the event is stopped
+ * (capture-phase) so the rail behind never collapses on the same keypress.
+ */
+function useOverlayEsc(menuOpen: boolean, closeMenu: () => void, closeNav: () => void): void {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent): void => {
+      if (e.key !== "Escape") return;
+      e.stopPropagation();
+      if (menuOpen) closeMenu();
+      else closeNav();
+    };
+    window.addEventListener("keydown", onKey, true);
+    return () => window.removeEventListener("keydown", onKey, true);
+  }, [menuOpen, closeMenu, closeNav]);
+}

package/src/web/components/FileTree.tsx

@@ -0,0 +1,45 @@
+import { CheckIcon, FileIcon, SearchIcon } from "./Icons.tsx";
+import { fileStatusClass } from "@/web/lib/fileStatus.ts";
+import type { FileView } from "@/daemon/reviewService.ts";
+
+/** DOM id for a file's section in the main diff area (for scroll-to). */
+export function fileSectionId(path: string): string {
+  return `file-${path}`;
+}
+
+/** Left-column file list with fuzzy search and viewed indicators. */
+export function FileTree(props: {
+  files: FileView[];
+  query: string;
+  onQuery: (q: string) => void;
+}): React.JSX.Element {
+  const { files, query, onQuery } = props;
+  return (
+    <nav className="file-tree">
+      <div className="file-search-wrap">
+        <SearchIcon size={14} />
+        <input
+          className="file-search"
+          type="search"
+          placeholder="Filter files…"
+          value={query}
+          onChange={(e) => onQuery(e.target.value)}
+        />
+      </div>
+      <ul>
+        {files.map((f) => (
+          <li key={f.newPath} className={f.viewed ? "file-item viewed" : "file-item"}>
+            <a href={`#${fileSectionId(f.newPath)}`} title={f.newPath}>
+              <span className="file-flag">{f.viewed && <CheckIcon size={13} />}</span>
+              <span className={`file-status-icon ${fileStatusClass(f.status)}`} title={f.status}>
+                <FileIcon size={13} />
+              </span>
+              <span className="file-name">{f.newPath}</span>
+              <span className="file-hunkcount">{f.hunks.length}</span>
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}

package/src/web/components/FileView.tsx

@@ -0,0 +1,53 @@
+import { useEffect } from "react";
+import { FileFrame } from "./FileFrame.tsx";
+import { CloseIcon, FileIcon } from "./Icons.tsx";
+
+/** A single-version, full-file view of a file at one commit, centered on a line. */
+export interface FileTarget {
+  /** Repo-relative file path. */
+  path: string;
+  /** Commit SHA to read the file at. */
+  sha: string;
+  /** 1-based line to center and briefly highlight. */
+  line: number;
+}
+
+/**
+ * A modal showing the full text of a file at a single commit, centered on a
+ * line. A thin shell around {@link FileFrame}: the modal chrome plus a
+ * capture-phase Esc handler so closing this modal does not also collapse the
+ * rail behind it.
+ *
+ * @param props.prId - PR id the file belongs to.
+ * @param props.target - The file/sha/line to show.
+ * @param props.onClose - Called to dismiss the modal.
+ */
+export function FileView(props: { prId: string; target: FileTarget; onClose: () => void }): React.JSX.Element {
+  const { prId, target, onClose } = props;
+  const { path, sha, line } = target;
+
+  // Capture-phase + stopPropagation so Esc closes only this modal, not the
+  // rail sidebar behind it, on the same keypress.
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent): void => {
+      if (e.key !== "Escape") return;
+      e.stopPropagation();
+      onClose();
+    };
+    window.addEventListener("keydown", onKey, true);
+    return () => window.removeEventListener("keydown", onKey, true);
+  }, [onClose]);
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal full-file" onClick={(e) => e.stopPropagation()}>
+        <header className="modal-header">
+          <span className="modal-title"><FileIcon size={15} />{path}</span>
+          <span className="split-base-head">@ <code>{sha.slice(0, 7)}</code></span>
+          <button type="button" className="modal-close" onClick={onClose} aria-label="Close"><CloseIcon size={18} /></button>
+        </header>
+        <FileFrame prId={prId} path={path} sha={sha} line={line} side="head" />
+      </div>
+    </div>
+  );
+}

package/src/web/components/GithubThreadView.tsx

@@ -0,0 +1,56 @@
+import { useState } from "react";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { formatCommitTime } from "@/web/lib/time.ts";
+import { CommentComposer } from "./CommentComposer.tsx";
+import { CopyButton } from "./CopyButton.tsx";
+import { CommentIcon } from "./Icons.tsx";
+import { githubCommentDomId } from "@/web/lib/commentVisibility.ts";
+import type { AnchoredGithubThread } from "@/daemon/reviewService.ts";
+import type { ThreadComment } from "@/daemon/githubThreads.ts";
+
+/** Render a single GitHub comment (author, time, GitHub link, markdown body). */
+function GhComment(props: { comment: ThreadComment }): React.JSX.Element {
+  const { comment } = props;
+  return (
+    <div className="gh-comment">
+      <div className="comment-meta">
+        <strong>{comment.author || "unknown"}</strong>
+        {comment.createdAt !== null && (
+          <span className="comment-time">{formatCommitTime(new Date(comment.createdAt).toISOString())}</span>
+        )}
+        <a href={comment.htmlUrl} target="_blank" rel="noreferrer">on GitHub</a>
+        <span className="comment-tools"><CopyButton text={comment.body} /></span>
+      </div>
+      <div className="comment-body">
+        <Markdown remarkPlugins={[remarkGfm]}>{comment.body}</Markdown>
+      </div>
+    </div>
+  );
+}
+
+/** A synced GitHub inline thread with its replies and a reply composer. */
+export function GithubThreadView(props: {
+  thread: AnchoredGithubThread;
+  onReply: (body: string) => void;
+}): React.JSX.Element {
+  const { thread, onReply } = props;
+  const [replying, setReplying] = useState(false);
+
+  return (
+    <div className="gh-thread" id={githubCommentDomId(thread.root.githubId)}>
+      <div className="gh-thread-tag"><CommentIcon size={11} /> GitHub thread</div>
+      <GhComment comment={thread.root} />
+      {thread.replies.map((r) => <GhComment key={r.githubId} comment={r} />)}
+      {replying ? (
+        <CommentComposer
+          submitLabel="Reply"
+          onSubmit={(body) => { onReply(body); setReplying(false); }}
+          onCancel={() => setReplying(false)}
+        />
+      ) : (
+        <button type="button" className="btn btn-ghost btn-sm" onClick={() => setReplying(true)}>Reply</button>
+      )}
+    </div>
+  );
+}

package/src/web/components/HunkCard.tsx

@@ -0,0 +1,121 @@
+import { useEffect, useState } from "react";
+import { DiffLines } from "./DiffLines.tsx";
+import { CommentComposer } from "./CommentComposer.tsx";
+import { CommentItem } from "./CommentItem.tsx";
+import { Tooltip } from "./Tooltip.tsx";
+import { ChevronDownIcon, ChevronRightIcon, SparkleIcon, EyeIcon, CommentPlusIcon } from "./Icons.tsx";
+import type { HunkView } from "@/daemon/reviewService.ts";
+import type { PostPreview, PostTarget } from "@/daemon/registry.ts";
+import type { AddCommentArgs } from "../state/useReview.ts";
+
+/**
+ * A single hunk card: collapse toggle, viewed checkbox (auto-collapse on
+ * viewed), whole-hunk comments, and the diff lines with inline line comments.
+ */
+export function HunkCard(props: {
+  path: string;
+  hunk: HunkView;
+  endSha: string;
+  onToggleViewed: (viewed: boolean) => void;
+  addComment: (args: AddCommentArgs) => void;
+  editComment: (id: number, body: string) => void;
+  deleteComment: (id: number) => void;
+  onViewFile: (anchorLine: number) => void;
+  previewPost: (commentId: number, target: PostTarget) => Promise<PostPreview>;
+  postComment: (commentId: number, target: PostTarget) => void;
+  replyToThread: (rootGithubId: string, body: string) => void;
+  onAskAi: () => void;
+  /** When true, force the hunk expanded (e.g. jumped-to from the comments panel). */
+  revealed?: boolean;
+}): React.JSX.Element {
+  const { path, hunk, endSha, onToggleViewed, addComment, editComment, deleteComment, onViewFile } = props;
+  const { previewPost, postComment, replyToThread, onAskAi, revealed } = props;
+  const [collapsed, setCollapsed] = useState<boolean>(hunk.viewed);
+  const [composingHunk, setComposingHunk] = useState(false);
+  useEffect(() => setCollapsed(hunk.viewed), [hunk.viewed]);
+  // Expand when this hunk is revealed (jumped to) so its comment is on screen.
+  useEffect(() => { if (revealed) setCollapsed(false); }, [revealed]);
+
+  const hunkComments = hunk.comments.filter((c) => c.lineIndex < 0);
+
+  return (
+    <section className={hunk.viewed ? "hunk-card viewed" : "hunk-card"}>
+      <header className="hunk-header">
+        <button type="button" className="hunk-collapse" aria-label={collapsed ? "Expand hunk" : "Collapse hunk"} onClick={() => setCollapsed((c) => !c)}>
+          {collapsed ? <ChevronRightIcon size={14} /> : <ChevronDownIcon size={14} />}
+        </button>
+        <code className="hunk-title">{hunk.header}</code>
+        <div className="hunk-actions">
+          <HunkAction label="View file" onClick={() => onViewFile(hunk.newStart)}><EyeIcon size={14} /></HunkAction>
+          <HunkAction label="Ask AI" onClick={onAskAi}><SparkleIcon size={14} /></HunkAction>
+          <HunkAction label="Comment on hunk" onClick={() => setComposingHunk(true)}><CommentPlusIcon size={14} /></HunkAction>
+        </div>
+        <label className="hunk-viewed">
+          <input type="checkbox" checked={hunk.viewed} onChange={(e) => onToggleViewed(e.target.checked)} />
+          Viewed
+        </label>
+      </header>
+      {!collapsed && (
+        <>
+          {hunkComments.map((c) => (
+            <div key={c.id} className="hunk-level-comment">
+              <CommentItem
+                comment={c}
+                onEdit={(body) => editComment(c.id, body)}
+                onDelete={() => deleteComment(c.id)}
+                previewPost={(target) => previewPost(c.id, target)}
+                onPost={(target) => postComment(c.id, target)}
+              />
+            </div>
+          ))}
+          {composingHunk && (
+            <div className="hunk-level-comment">
+              <CommentComposer
+                onSubmit={(body) => {
+                  addComment({ kind: "hunk", side: "RIGHT", path, body, madeAtSha: endSha, hunkHash: hunk.hash });
+                  setComposingHunk(false);
+                }}
+                onCancel={() => setComposingHunk(false)}
+              />
+            </div>
+          )}
+          <DiffLines
+            lines={hunk.lines}
+            path={path}
+            comments={hunk.comments}
+            githubThreads={hunk.githubThreads}
+            endSha={endSha}
+            onAddComment={addComment}
+            onEditComment={editComment}
+            onDeleteComment={deleteComment}
+            onReplyToThread={replyToThread}
+            previewPost={previewPost}
+            onPostComment={postComment}
+          />
+        </>
+      )}
+    </section>
+  );
+}
+
+/**
+ * A hunk-header action rendered icon-only, with a near-instant tooltip (below
+ * the icon) revealing its label on hover and keyboard focus. The label is always
+ * present for assistive tech via aria-label.
+ */
+function HunkAction(props: {
+  /** Accessible name + the tooltip text. */
+  label: string;
+  /** Click handler for the action. */
+  onClick: () => void;
+  /** The action's icon. */
+  children: React.ReactNode;
+}): React.JSX.Element {
+  return (
+    <Tooltip label={props.label} placement="bottom">
+      <button type="button" className="hunk-action" aria-label={props.label} onClick={props.onClick}>
+        {props.children}
+      </button>
+    </Tooltip>
+  );
+}