mergie-cli 0.1.0

package/src/web/components/Icons.tsx

@@ -0,0 +1,215 @@
+/**
+ * A small hand-rolled inline-SVG icon set (no dependency). Every icon inherits
+ * the current text color via `stroke="currentColor"` and sizes to the `size`
+ * prop (default 16px). Icons are decorative by default (aria-hidden); pass a
+ * `title` only where the icon stands alone as a control's label.
+ */
+interface IconProps {
+  /** Pixel width/height of the square icon. Defaults to 16. */
+  size?: number;
+  /** Extra class name for spacing tweaks at a call site. */
+  className?: string;
+}
+
+/** Shared SVG wrapper: square viewBox, stroke-based, inherits color. */
+function Svg(props: IconProps & { children: React.ReactNode }): React.JSX.Element {
+  const { size = 16, className, children } = props;
+  return (
+    <svg
+      className={className ? `icon ${className}` : "icon"}
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      {children}
+    </svg>
+  );
+}
+
+/** Circular refresh / re-fetch arrows. */
+export function RefreshIcon(props: IconProps): React.JSX.Element {
+  return (
+    <Svg {...props}>
+      <path d="M21 12a9 9 0 1 1-2.64-6.36" />
+      <polyline points="21 3 21 9 15 9" />
+    </Svg>
+  );
+}
+
+/** Two-arrow sync / fetch glyph. */
+export function SyncIcon(props: IconProps): React.JSX.Element {
+  return (
+    <Svg {...props}>
+      <polyline points="17 1 21 5 17 9" />
+      <path d="M3 11V9a4 4 0 0 1 4-4h14" />
+      <polyline points="7 23 3 19 7 15" />
+      <path d="M21 13v2a4 4 0 0 1-4 4H3" />
+    </Svg>
+  );
+}
+
+/** External-link (open in new tab) arrow-out-of-box. */
+export function ExternalIcon(props: IconProps): React.JSX.Element {
+  return (
+    <Svg {...props}>
+      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+      <polyline points="15 3 21 3 21 9" />
+      <line x1="10" y1="14" x2="21" y2="3" />
+    </Svg>
+  );
+}
+
+/** Copy to clipboard: two overlapping document rectangles. */
+export function CopyIcon(props: IconProps): React.JSX.Element {
+  return (
+    <Svg {...props}>
+      <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+    </Svg>
+  );
+}
+
+/** Close / dismiss X. */
+export function CloseIcon(props: IconProps): React.JSX.Element {
+  return (
+    <Svg {...props}>
+      <line x1="18" y1="6" x2="6" y2="18" />
+      <line x1="6" y1="6" x2="18" y2="18" />
+    </Svg>
+  );
+}
+
+/** Downward chevron (disclosure / dropdown). */
+export function ChevronDownIcon(props: IconProps): React.JSX.Element {
+  return (
+    <Svg {...props}>
+      <polyline points="6 9 12 15 18 9" />
+    </Svg>
+  );
+}
+
+/** Rightward chevron (collapsed disclosure). */
+export function ChevronRightIcon(props: IconProps): React.JSX.Element {
+  return (
+    <Svg {...props}>
+      <polyline points="9 6 15 12 9 18" />
+    </Svg>
+  );
+}
+
+/** Leftward chevron (collapse toward the left edge). */
+export function ChevronLeftIcon(props: IconProps): React.JSX.Element {
+  return (
+    <Svg {...props}>
+      <polyline points="15 6 9 12 15 18" />
+    </Svg>
+  );
+}
+
+/** Sparkle / AI glyph. */
+export function SparkleIcon(props: IconProps): React.JSX.Element {
+  return (
+    <Svg {...props}>
+      <path d="M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z" />
+      <path d="M19 15l.7 1.8L21.5 17.5 19.7 18.2 19 20l-.7-1.8L16.5 17.5 18.3 16.8z" />
+    </Svg>
+  );
+}
+
+/** Speech-bubble comment glyph. */
+export function CommentIcon(props: IconProps): React.JSX.Element {
+  return (
+    <Svg {...props}>
+      <path d="M21 11.5a8.38 8.38 0 0 1-8.5 8.5 8.5 8.5 0 0 1-3.8-.9L3 21l1.9-5.7A8.5 8.5 0 0 1 12.5 3 8.38 8.38 0 0 1 21 11.5z" />
+    </Svg>
+  );
+}
+
+/** Magnifier search glyph. */
+export function SearchIcon(props: IconProps): React.JSX.Element {
+  return (
+    <Svg {...props}>
+      <circle cx="11" cy="11" r="7" />
+      <line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </Svg>
+  );
+}
+
+/** Info glyph: a circled "i" (caveats / help). */
+export function InfoIcon(props: IconProps): React.JSX.Element {
+  return (
+    <Svg {...props}>
+      <circle cx="12" cy="12" r="10" />
+      <line x1="12" y1="11" x2="12" y2="16" />
+      <line x1="12" y1="8" x2="12" y2="8" />
+    </Svg>
+  );
+}
+
+/** Check / done glyph. */
+export function CheckIcon(props: IconProps): React.JSX.Element {
+  return (
+    <Svg {...props}>
+      <polyline points="20 6 9 17 4 12" />
+    </Svg>
+  );
+}
+
+/** Generic file glyph (file-status contexts). */
+export function FileIcon(props: IconProps): React.JSX.Element {
+  return (
+    <Svg {...props}>
+      <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
+      <polyline points="13 2 13 9 20 9" />
+    </Svg>
+  );
+}
+
+/** Inbox / empty-state glyph. */
+export function InboxIcon(props: IconProps): React.JSX.Element {
+  return (
+    <Svg {...props}>
+      <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
+      <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+    </Svg>
+  );
+}
+
+/** Document / lined-page glyph (PR description). */
+export function DocumentIcon(props: IconProps): React.JSX.Element {
+  return (
+    <Svg {...props}>
+      <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
+      <polyline points="13 2 13 9 20 9" />
+      <line x1="8" y1="13" x2="16" y2="13" />
+      <line x1="8" y1="17" x2="13" y2="17" />
+    </Svg>
+  );
+}
+
+/** Eye / view glyph (open the full file). */
+export function EyeIcon(props: IconProps): React.JSX.Element {
+  return (
+    <Svg {...props}>
+      <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z" />
+      <circle cx="12" cy="12" r="3" />
+    </Svg>
+  );
+}
+
+/** Speech-bubble with a plus (add a comment on the hunk). */
+export function CommentPlusIcon(props: IconProps): React.JSX.Element {
+  return (
+    <Svg {...props}>
+      <path d="M21 11.5a8.38 8.38 0 0 1-8.5 8.5 8.5 8.5 0 0 1-3.8-.9L3 21l1.9-5.7A8.5 8.5 0 0 1 12.5 3 8.38 8.38 0 0 1 21 11.5z" />
+      <line x1="12" y1="8" x2="12" y2="14" />
+      <line x1="9" y1="11" x2="15" y2="11" />
+    </Svg>
+  );
+}

package/src/web/components/IdentifierMenuPortal.tsx

@@ -0,0 +1,33 @@
+import { createPortal } from "react-dom";
+import { SymbolLookupMenu } from "./SymbolLookupMenu.tsx";
+import type { IdentifierMenu } from "@/web/lib/useIdentifierMenu.ts";
+import type { MenuOp, SearchSide } from "../state/useCodeSearch.ts";
+
+/**
+ * Renders {@link SymbolLookupMenu} for an open identifier selection via a portal
+ * to `document.body`, so the floating menu escapes any `overflow`/`clip`
+ * ancestor and layers above modals (the navigator, the full-file view). Returns
+ * null when no menu is open.
+ *
+ * @param props.menu - The open menu descriptor, or null.
+ * @param props.onPick - Called with the chosen lookup op + checkout side.
+ * @param props.onClose - Dismiss the menu.
+ */
+export function IdentifierMenuPortal(props: {
+  menu: IdentifierMenu | null;
+  onPick: (op: MenuOp, side: SearchSide) => void;
+  onClose: () => void;
+}): React.JSX.Element | null {
+  const { menu, onPick, onClose } = props;
+  if (!menu) return null;
+  // Key by the selection so a new selection remounts the menu, re-seeding its
+  // side toggle from the new selection's default side.
+  return createPortal(
+    <SymbolLookupMenu
+      key={`${menu.term}:${menu.x}:${menu.y}`}
+      term={menu.term} x={menu.x} y={menu.y} defaultSide={menu.side}
+      onPick={onPick} onClose={onClose}
+    />,
+    document.body,
+  );
+}

package/src/web/components/PostMenu.tsx

@@ -0,0 +1,63 @@
+import { useState } from "react";
+import { ChevronDownIcon } from "./Icons.tsx";
+import type { PostPreview, PostTarget } from "@/daemon/registry.ts";
+
+/**
+ * A "Post to GitHub" control offering the two targets (the reviewed range-end
+ * commit, or the live PR head). Each choice first previews whether the exact
+ * line still exists at that target and shows a warning instead of posting when
+ * it does not.
+ */
+export function PostMenu(props: {
+  preview: (target: PostTarget) => Promise<PostPreview>;
+  onPost: (target: PostTarget) => void;
+}): React.JSX.Element {
+  const { preview, onPost } = props;
+  const [open, setOpen] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [warning, setWarning] = useState<string | null>(null);
+
+  const choose = async (target: PostTarget): Promise<void> => {
+    setBusy(true);
+    setWarning(null);
+    const result: PostPreview = await preview(target);
+    setBusy(false);
+    if (!result.canPost) {
+      setWarning(result.warning ?? "The line no longer exists at this target.");
+      return;
+    }
+    onPost(target);
+    setOpen(false);
+  };
+
+  if (!open) {
+    return (
+      <button type="button" className="btn btn-ghost btn-sm" onClick={() => setOpen(true)}>
+        Post to GitHub <ChevronDownIcon size={12} />
+      </button>
+    );
+  }
+
+  return (
+    <span className="post-menu" role="menu">
+      <span className="post-menu-hint">Post as an inline comment on:</span>
+      <button
+        type="button"
+        className="btn btn-sm"
+        disabled={busy}
+        title="Pins the comment to the exact code you reviewed (the range's end commit)."
+        onClick={() => void choose("end")}
+      >Reviewed commit</button>
+      <button
+        type="button"
+        className="btn btn-sm"
+        disabled={busy}
+        title="Attaches to the latest code on the PR — relocated if the line moved."
+        onClick={() => void choose("head")}
+      >Latest PR head</button>
+      <button type="button" className="btn btn-ghost btn-sm" disabled={busy} onClick={() => { setOpen(false); setWarning(null); }}>Cancel</button>
+      {busy && <span className="post-busy">Checking target…</span>}
+      {warning && <span className="post-warning">{warning}</span>}
+    </span>
+  );
+}

package/src/web/components/PrDescription.tsx

@@ -0,0 +1,29 @@
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+/** Force any link in the rendered markdown to open in a new tab. */
+const MARKDOWN_COMPONENTS = {
+  a: (props: React.ComponentPropsWithoutRef<"a">) => (
+    <a {...props} target="_blank" rel="noreferrer" />
+  ),
+} as const;
+
+/**
+ * The PR description (body) rendered as GitHub-flavored markdown. Hosted in the
+ * right-rail "PR description" panel. An empty body shows a muted "No description
+ * provided." note.
+ */
+export function PrDescription(props: { body: string }): React.JSX.Element {
+  const hasBody: boolean = props.body.trim().length > 0;
+  return (
+    <div className="pr-description-body comment-body">
+      {hasBody ? (
+        <Markdown remarkPlugins={[remarkGfm]} components={MARKDOWN_COMPONENTS}>
+          {props.body}
+        </Markdown>
+      ) : (
+        <p className="notice">No description provided.</p>
+      )}
+    </div>
+  );
+}

package/src/web/components/PrLoading.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useRef } from "react";
+import { trpc } from "../trpc.ts";
+
+/**
+ * The loading gate shown after picking a not-yet-loaded PR. Fires `loadPr`
+ * once on mount (idempotent server-side) and, once it resolves, replaces the
+ * URL with the review deep-link so App routes into the review screen. Failures
+ * are shown here with a way back to the picker.
+ */
+export function PrLoading(props: { url: string }): React.JSX.Element {
+  const load = trpc.loadPr.useMutation();
+  const started = useRef(false);
+  const { mutate } = load;
+
+  useEffect(() => {
+    if (started.current) return;
+    started.current = true;
+    mutate(
+      { url: props.url },
+      { onSuccess: (pr) => window.location.replace(`/?pr=${encodeURIComponent(pr.id)}`) },
+    );
+  }, [mutate, props.url]);
+
+  if (load.isError) {
+    return (
+      <main className="landing">
+        <div className="pr-loading-fail" role="alert">
+          <p className="empty-state-title">Couldn’t load that pull request</p>
+          <p className="empty-state-hint">{load.error.message}</p>
+          <a className="btn" href="/">Back to pull requests</a>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className="landing">
+      <div className="pr-loading">
+        <span className="chat-spinner" aria-hidden="true" />
+        <p className="empty-state-title">Loading pull request…</p>
+        <p className="empty-state-hint">Fetching from GitHub and preparing the diff.</p>
+      </div>
+    </main>
+  );
+}

package/src/web/components/PrPicker.tsx

@@ -0,0 +1,201 @@
+import { useState } from "react";
+import { trpc } from "../trpc.ts";
+import { parsePrUrl } from "@/domain/url.ts";
+import { filterPrs } from "@/web/lib/filterPrs.ts";
+import { excludeLoaded } from "@/web/lib/prPickerModel.ts";
+import { RefreshIcon, SearchIcon, InboxIcon } from "./Icons.tsx";
+import type { MyPrSummary, PrRelationship } from "@/services/ghSearch.ts";
+import type { LoadedPr } from "@/daemon/registry.ts";
+
+/** Human labels for each PR relationship, shown as row chips. */
+const RELATION_LABEL: Record<PrRelationship, string> = {
+  authored: "Created by me",
+  assigned: "Assigned",
+  "review-requested": "Review requested",
+};
+
+/** Navigate the browser, letting App re-route on the new query string. */
+function go(href: string): void {
+  window.location.assign(href);
+}
+
+/** Deep-link for an already-loaded PR (opens straight into review). */
+function loadedHref(id: string): string {
+  return `/?pr=${encodeURIComponent(id)}`;
+}
+
+/** Deep-link that routes through the loading gate for a not-yet-loaded PR. */
+function loadHref(url: string): string {
+  return `/?load=${encodeURIComponent(url)}`;
+}
+
+/**
+ * The PR picker: a custom-URL input, a text filter, the PRs already loaded in
+ * mergie ("Recently reviewed"), and the viewer's open PRs from GitHub. Used
+ * both as the home screen and inside the in-review "Switch PR" overlay.
+ */
+export function PrPicker(props: { currentPrId?: string }): React.JSX.Element {
+  const [query, setQuery] = useState("");
+  const health = trpc.health.useQuery();
+  const mine = trpc.listMyPrs.useQuery(undefined, { staleTime: Infinity, retry: false });
+
+  const loaded: LoadedPr[] = health.data?.prs ?? [];
+  const loadedShown: LoadedPr[] = filterPrs(query, loaded);
+  const searchShown: MyPrSummary[] = filterPrs(query, excludeLoaded(mine.data ?? [], loaded));
+
+  return (
+    <div className="picker">
+      <UrlForm />
+      <div className="picker-filter">
+        <SearchIcon size={14} />
+        <input
+          type="text"
+          className="picker-filter-input"
+          placeholder="Filter by repo, owner, title, or #number"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          aria-label="Filter pull requests"
+        />
+      </div>
+
+      {loadedShown.length > 0 && (
+        <section className="picker-section">
+          <h3 className="picker-section-title">Recently reviewed</h3>
+          <ul className="pr-cards">
+            {loadedShown.map((p) => (
+              <LoadedRow key={p.id} pr={p} isCurrent={p.id === props.currentPrId} />
+            ))}
+          </ul>
+        </section>
+      )}
+
+      <section className="picker-section">
+        <div className="picker-section-head">
+          <h3 className="picker-section-title">From GitHub</h3>
+          <button
+            type="button"
+            className="btn btn-ghost btn-sm"
+            onClick={() => void mine.refetch()}
+            disabled={mine.isFetching}
+            title="Refresh the list from GitHub"
+          >
+            <RefreshIcon size={13} /> {mine.isFetching ? "Refreshing…" : "Refresh"}
+          </button>
+        </div>
+        <GithubResults query={query} loading={mine.isLoading} error={mine.error?.message ?? null} prs={searchShown} />
+      </section>
+    </div>
+  );
+}
+
+/** The "load a PR by URL" input; validates the URL before navigating. */
+function UrlForm(): React.JSX.Element {
+  const [url, setUrl] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  const submit = (): void => {
+    const trimmed: string = url.trim();
+    if (trimmed.length === 0) return;
+    try {
+      parsePrUrl(trimmed);
+    } catch {
+      setError("Enter a GitHub pull-request URL, e.g. https://github.com/owner/repo/pull/123");
+      return;
+    }
+    go(loadHref(trimmed));
+  };
+
+  return (
+    <form className="picker-url" onSubmit={(e) => { e.preventDefault(); submit(); }}>
+      <input
+        type="text"
+        className="picker-url-input"
+        placeholder="Paste a pull-request URL…"
+        value={url}
+        onChange={(e) => { setUrl(e.target.value); setError(null); }}
+        aria-label="Pull request URL"
+      />
+      <button type="submit" className="btn btn-accent" disabled={url.trim().length === 0}>Open</button>
+      {error && <p className="picker-url-error" role="alert">{error}</p>}
+    </form>
+  );
+}
+
+/** Render the GitHub-search section body: spinner, error, empty, or rows. */
+function GithubResults(props: {
+  query: string;
+  loading: boolean;
+  error: string | null;
+  prs: MyPrSummary[];
+}): React.JSX.Element {
+  if (props.loading) {
+    return <div className="picker-status"><span className="chat-spinner" aria-hidden="true" /> Finding your pull requests…</div>;
+  }
+  if (props.error !== null) {
+    return (
+      <div className="picker-status picker-error" role="alert">
+        Couldn’t reach GitHub: {props.error}
+      </div>
+    );
+  }
+  if (props.prs.length === 0) {
+    return (
+      <div className="empty-state">
+        <InboxIcon size={32} />
+        <p className="empty-state-title">{props.query ? "No matching pull requests" : "No open pull requests"}</p>
+        <p className="empty-state-hint">
+          {props.query ? "Try a different filter, or paste a URL above." : "PRs you created, are assigned to, or are asked to review show up here."}
+        </p>
+      </div>
+    );
+  }
+  return (
+    <ul className="pr-cards">
+      {props.prs.map((p) => <GithubRow key={p.url} pr={p} />)}
+    </ul>
+  );
+}
+
+/** One already-loaded PR row. */
+function LoadedRow(props: { pr: LoadedPr; isCurrent: boolean }): React.JSX.Element {
+  const { pr, isCurrent } = props;
+  const meta = (
+    <span className="pr-card-meta">
+      <span className="pr-card-repo">{pr.owner}/{pr.repo}</span>
+      <span className="pr-card-num">#{pr.number}</span>
+      {isCurrent && <span className="pr-chip pr-chip-current">Reviewing now</span>}
+    </span>
+  );
+  if (isCurrent) {
+    return <li><div className="pr-card pr-card-current">{meta}<span className="pr-card-title">{pr.title}</span></div></li>;
+  }
+  return (
+    <li>
+      <a className="pr-card" href={loadedHref(pr.id)}>
+        {meta}
+        <span className="pr-card-title">{pr.title}</span>
+      </a>
+    </li>
+  );
+}
+
+/** One GitHub-search PR row, tagged with the viewer's relationship(s). */
+function GithubRow(props: { pr: MyPrSummary }): React.JSX.Element {
+  const { pr } = props;
+  return (
+    <li>
+      <a className="pr-card" href={loadHref(pr.url)}>
+        <span className="pr-card-meta">
+          <span className="pr-card-repo">{pr.owner}/{pr.repo}</span>
+          <span className="pr-card-num">#{pr.number}</span>
+          {pr.isDraft && <span className="pr-chip pr-chip-draft">Draft</span>}
+          {pr.relationships.map((r) => (
+            <span key={r} className="pr-chip">{RELATION_LABEL[r]}</span>
+          ))}
+        </span>
+        <span className="pr-card-title">{pr.title}</span>
+        {pr.author && <span className="pr-card-author">by {pr.author}</span>}
+      </a>
+    </li>
+  );
+}