mergie-cli 0.1.0

package/src/web/lib/persistedFlag.ts

@@ -0,0 +1,43 @@
+import { useState } from "react";
+
+/**
+ * The subset of the browser `Storage` API this module needs. Declared as an
+ * interface so tests can supply an in-memory store; `window.localStorage`
+ * satisfies it structurally.
+ */
+export interface FlagStore {
+  /** Read a stored string value, or `null` if absent. */
+  getItem(key: string): string | null;
+  /** Persist a string value. */
+  setItem(key: string, value: string): void;
+}
+
+/**
+ * Read a persisted boolean flag. Only the exact strings `"true"`/`"false"` are
+ * recognised; anything absent or malformed returns `fallback`.
+ */
+export function readFlag(store: FlagStore, key: string, fallback: boolean): boolean {
+  const raw: string | null = store.getItem(key);
+  if (raw === "true") return true;
+  if (raw === "false") return false;
+  return fallback;
+}
+
+/** Persist a boolean flag. */
+export function writeFlag(store: FlagStore, key: string, value: boolean): void {
+  store.setItem(key, value ? "true" : "false");
+}
+
+/**
+ * React hook: a boolean flag persisted in local storage under `key`, so it
+ * survives reloads and navigation. Used for global layout preferences (e.g.
+ * whether the left sidebar is collapsed) that are not scoped to a single PR.
+ */
+export function usePersistedFlag(key: string, fallback: boolean): [boolean, (value: boolean) => void] {
+  const [flag, setFlag] = useState<boolean>(() => readFlag(window.localStorage, key, fallback));
+  const update = (value: boolean): void => {
+    writeFlag(window.localStorage, key, value);
+    setFlag(value);
+  };
+  return [flag, update];
+}

package/src/web/lib/prPickerModel.ts

@@ -0,0 +1,27 @@
+/** The identity fields shared by loaded PRs and GitHub search results. */
+export interface PrIdentity {
+  /** Repository owner / organisation. */
+  owner: string;
+  /** Repository name. */
+  repo: string;
+  /** Pull request number. */
+  number: number;
+}
+
+/** A stable `owner/repo#number` key for deduping across sources. */
+export function prKey(pr: PrIdentity): string {
+  return `${pr.owner}/${pr.repo}#${pr.number}`;
+}
+
+/**
+ * Remove search results that already appear in the loaded set (matched by
+ * {@link prKey}), so the "From GitHub" section never repeats a PR shown under
+ * "Recently reviewed". Inputs are not mutated.
+ */
+export function excludeLoaded<T extends PrIdentity>(
+  search: readonly T[],
+  loaded: readonly PrIdentity[],
+): T[] {
+  const loadedKeys = new Set<string>(loaded.map(prKey));
+  return search.filter((pr) => !loadedKeys.has(prKey(pr)));
+}

package/src/web/lib/railState.ts

@@ -0,0 +1,19 @@
+/** The surfaces the right rail can host, in top-to-bottom order. */
+export type RailTab = "comments" | "reviews" | "description" | "search";
+
+/** All rail tabs in the order they appear in the rail. */
+export const RAIL_TABS: readonly RailTab[] = ["comments", "reviews", "description", "search"] as const;
+
+/**
+ * Compute the next active rail tab after clicking a rail icon.
+ *
+ * @param current - The currently active tab, or null when the sidebar is
+ *   collapsed.
+ * @param clicked - The tab whose icon was clicked.
+ * @returns The tab to activate, or null to collapse. Clicking the already-active
+ *   tab collapses the sidebar; clicking any other tab switches to it (or opens
+ *   the sidebar when it was collapsed).
+ */
+export function nextRailTab(current: RailTab | null, clicked: RailTab): RailTab | null {
+  return current === clicked ? null : clicked;
+}

package/src/web/lib/rangeCoverage.ts

@@ -0,0 +1,27 @@
+/** Inputs for computing a range-coverage label. */
+export interface RangeCoverage {
+  /** Index of the first included commit (0-based, oldest = 0). */
+  fromIndex: number;
+  /** Index of the last included commit (0-based). */
+  toIndex: number;
+  /** Total number of commits in the PR. */
+  total: number;
+}
+
+/** Pluralise "commit" for a count. */
+function commitWord(n: number): string {
+  return n === 1 ? "commit" : "commits";
+}
+
+/**
+ * A compact label describing how much of the PR a commit selection covers, for
+ * the range-selector pill. When the selection spans the whole PR
+ * (`fromIndex === 0` and `toIndex === total - 1`) it reads "All {total}
+ * commit(s)"; otherwise "{K} of {total} commits" where K is the selected count.
+ */
+export function rangeCoverageLabel(cov: RangeCoverage): string {
+  const selected: number = cov.toIndex - cov.fromIndex + 1;
+  const isFull: boolean = cov.fromIndex === 0 && cov.toIndex === cov.total - 1;
+  if (isFull) return `All ${cov.total} ${commitWord(cov.total)}`;
+  return `${selected} of ${cov.total} ${commitWord(cov.total)}`;
+}

package/src/web/lib/rangeMap.ts

@@ -0,0 +1,42 @@
+/** An inclusive commit selection: first and last commit index to include. */
+export interface InclusiveSel {
+  /** Index (in the commits array) of the first included commit. */
+  fromIndex: number;
+  /** Index of the last included commit. */
+  toIndex: number;
+}
+
+/** An exclusive commit range (diff = start→end, start excluded). */
+export interface ExclusiveRange {
+  /** Baseline SHA (excluded). */
+  start: string;
+  /** End SHA (included). */
+  end: string;
+}
+
+/** Clamp a number into [min, max]. */
+function clamp(n: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, n));
+}
+
+/**
+ * Convert an exclusive range into an inclusive selection (first/last included
+ * commit indices) for display. The exclusive `start` is the commit *before*
+ * the first included commit (or the baseline).
+ */
+export function toInclusive(range: ExclusiveRange, commits: string[], baselineSha: string): InclusiveSel {
+  const fromIndex: number = range.start === baselineSha ? 0 : commits.indexOf(range.start) + 1;
+  const toIndex: number = commits.indexOf(range.end);
+  return { fromIndex: clamp(fromIndex, 0, commits.length - 1), toIndex: clamp(toIndex, 0, commits.length - 1) };
+}
+
+/**
+ * Convert an inclusive selection back into an exclusive range for the API.
+ * `fromIndex` above `toIndex` is clamped to a single commit.
+ */
+export function toRange(sel: InclusiveSel, commits: string[], baselineSha: string): ExclusiveRange {
+  const to: number = clamp(sel.toIndex, 0, commits.length - 1);
+  const from: number = clamp(sel.fromIndex, 0, to);
+  const start: string = from === 0 ? baselineSha : (commits[from - 1] ?? baselineSha);
+  return { start, end: commits[to] ?? baselineSha };
+}

package/src/web/lib/resultCountLabel.ts

@@ -0,0 +1,11 @@
+/**
+ * A short count label for a results header. When every result is shown it
+ * reads "N result(s)"; when a filter hides some it reads "showing X of Y".
+ *
+ * @param total - The total number of results before filtering.
+ * @param shown - The number of results currently shown after filtering.
+ */
+export function resultCountLabel(total: number, shown: number): string {
+  if (shown < total) return `showing ${shown} of ${total}`;
+  return `${total} ${total === 1 ? "result" : "results"}`;
+}

package/src/web/lib/reviewProgress.ts

@@ -0,0 +1,26 @@
+import type { FileView } from "@/daemon/reviewService.ts";
+
+/** How much of the on-screen range has been reviewed, counted in hunks. */
+export interface ReviewProgress {
+  /** Number of hunks marked viewed. */
+  viewed: number;
+  /** Total number of hunks in the range (lock/generated files included). */
+  total: number;
+}
+
+/**
+ * Count viewed hunks against every hunk in the given file list. Pure — does not
+ * mutate its input. Callers pass the full, unfiltered range file list so the
+ * total reflects the whole on-screen range regardless of visibility toggles.
+ */
+export function reviewProgress(files: readonly FileView[]): ReviewProgress {
+  let viewed = 0;
+  let total = 0;
+  for (const file of files) {
+    for (const hunk of file.hunks) {
+      total += 1;
+      if (hunk.viewed) viewed += 1;
+    }
+  }
+  return { viewed, total };
+}

package/src/web/lib/searchInputsKey.ts

@@ -0,0 +1,35 @@
+import type { SearchMode, SymbolAction, SearchSide } from "@/web/state/useCodeSearch.ts";
+
+/** The run-relevant search inputs whose change makes results stale. */
+export interface SearchInputs {
+  /** General text search vs semantic symbol lookup. */
+  mode: SearchMode;
+  /** The query / symbol term (compared trimmed). */
+  query: string;
+  /** General mode: case-sensitive matching. */
+  caseSensitive: boolean;
+  /** General mode: regex matching. */
+  regex: boolean;
+  /** Symbol mode: which lookup. */
+  symbolAction: SymbolAction;
+  /** Target checkout side. */
+  side: SearchSide;
+}
+
+/**
+ * A stable string identifying a set of search inputs. Two input sets produce
+ * the same key iff running them would issue the same query, so the UI can tell
+ * when the current inputs have drifted from the last run (results are stale and
+ * "Run" should be pressed). The query is trimmed so trailing whitespace alone
+ * is not treated as a change.
+ */
+export function searchInputsKey(inputs: SearchInputs): string {
+  return JSON.stringify([
+    inputs.mode,
+    inputs.query.trim(),
+    inputs.caseSensitive,
+    inputs.regex,
+    inputs.symbolAction,
+    inputs.side,
+  ]);
+}

package/src/web/lib/searchToken.ts

@@ -0,0 +1,25 @@
+/**
+ * Last-wins race-guard primitives for asynchronous lookups.
+ *
+ * Every run issues a fresh, monotonically increasing token. When a request's
+ * results arrive, they are applied only if their token still matches the latest
+ * issued one; results from a request that has since been superseded are
+ * dropped. This makes overlapping/duplicated async runs safe — necessary under
+ * React.StrictMode, where effects and async work double-fire in development.
+ */
+
+/** Issue the next request token after `current` (starts at 1). */
+export function nextToken(current: number): number {
+  return current + 1;
+}
+
+/**
+ * Whether a result tagged with `resultToken` should be applied given that
+ * `latestToken` is the most recently issued request.
+ *
+ * @param resultToken - The token the completed request was tagged with.
+ * @param latestToken - The token of the most recent request that was issued.
+ */
+export function isCurrent(resultToken: number, latestToken: number): boolean {
+  return resultToken === latestToken;
+}

package/src/web/lib/splitSide.ts

@@ -0,0 +1,13 @@
+import type { SplitRow } from "@/daemon/splitView.ts";
+
+/**
+ * Whether one side of a split view carries no content at all — i.e. every cell
+ * on that side is empty padding. True for the base side of an added file and
+ * the head side of a deleted file, so the modal can show a placeholder instead
+ * of a blank column. An empty rows list returns false (there is nothing to lay
+ * out yet, e.g. while loading).
+ */
+export function splitSideIsEmpty(rows: SplitRow[], side: "left" | "right"): boolean {
+  if (rows.length === 0) return false;
+  return rows.every((r) => r[side].kind === "empty");
+}

package/src/web/lib/time.ts

@@ -0,0 +1,9 @@
+/**
+ * Format an ISO commit timestamp as a compact `YYYY-MM-DD HH:MM` (UTC) string.
+ * Returns an empty string for invalid input.
+ */
+export function formatCommitTime(iso: string): string {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return "";
+  return date.toISOString().slice(0, 16).replace("T", " ");
+}

package/src/web/lib/togglePrefs.ts

@@ -0,0 +1,81 @@
+import { useState } from "react";
+import type { VisibilityToggles } from "./visibleFiles.ts";
+
+/** Default visibility toggles: everything shown (all off). */
+export const DEFAULT_TOGGLES: VisibilityToggles = {
+  hideViewedHunks: false,
+  hideViewedFiles: false,
+  hideLockFiles: false,
+};
+
+/**
+ * The subset of the browser `Storage` API this module needs. Declared as an
+ * interface so tests can supply an in-memory store; `window.localStorage`
+ * satisfies it structurally.
+ */
+export interface ToggleStore {
+  /** Read a stored string value, or `null` if absent. */
+  getItem(key: string): string | null;
+  /** Persist a string value. */
+  setItem(key: string, value: string): void;
+}
+
+/** Local-storage key holding the toggle state for one PR. */
+export function toggleStorageKey(prId: string): string {
+  return `mergie:toggles:${prId}`;
+}
+
+/**
+ * Local-storage key holding the per-PR "hide whitespace-only changes" flag.
+ * Separate from {@link toggleStorageKey} because it drives what the server
+ * diffs (an `--ignore-all-space` re-diff), not client-side file visibility.
+ */
+export function hideWhitespaceStorageKey(prId: string): string {
+  return `mergie:hideWhitespace:${prId}`;
+}
+
+/**
+ * Read the persisted toggles for a PR, coercing each known key to a boolean
+ * against {@link DEFAULT_TOGGLES}. Returns the defaults when nothing is stored
+ * or the stored value is malformed.
+ */
+export function readToggles(store: ToggleStore, prId: string): VisibilityToggles {
+  const raw: string | null = store.getItem(toggleStorageKey(prId));
+  if (raw === null) return { ...DEFAULT_TOGGLES };
+  const parsed: Record<string, unknown> | null = safeParse(raw);
+  if (parsed === null) return { ...DEFAULT_TOGGLES };
+  return {
+    hideViewedHunks: parsed.hideViewedHunks === true,
+    hideViewedFiles: parsed.hideViewedFiles === true,
+    hideLockFiles: parsed.hideLockFiles === true,
+  };
+}
+
+/** Persist the toggles for a PR. */
+export function writeToggles(store: ToggleStore, prId: string, toggles: VisibilityToggles): void {
+  store.setItem(toggleStorageKey(prId), JSON.stringify(toggles));
+}
+
+/**
+ * React hook: toggle state that persists per-PR in local storage, so it
+ * survives full-page navigation (e.g. to the AI-reviews view) and browser
+ * restarts.
+ */
+export function usePersistedToggles(prId: string): [VisibilityToggles, (t: VisibilityToggles) => void] {
+  const [toggles, setToggles] = useState<VisibilityToggles>(() => readToggles(window.localStorage, prId));
+  const update = (next: VisibilityToggles): void => {
+    writeToggles(window.localStorage, prId, next);
+    setToggles(next);
+  };
+  return [toggles, update];
+}
+
+/** Parse JSON into a plain object, or `null` on any failure / non-object. */
+function safeParse(raw: string): Record<string, unknown> | null {
+  try {
+    const value: unknown = JSON.parse(raw);
+    return typeof value === "object" && value !== null ? { ...value } : null;
+  } catch {
+    return null;
+  }
+}

package/src/web/lib/useEscToClose.ts

@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+
+/**
+ * Close an overlay (modal/dialog) when the user presses Escape. Registers a
+ * window-level keydown listener while mounted and invokes `onClose` on Escape.
+ * `onClose` should be stable (e.g. from useState's setter or a memoised
+ * callback) so the listener is not re-registered on every render.
+ */
+export function useEscToClose(onClose: () => void): void {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent): void => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+}

package/src/web/lib/useIdentifierMenu.ts

@@ -0,0 +1,77 @@
+import { useCallback, useState } from "react";
+import { isIdentifier, fileFromSectionId, parseDataSide } from "./identifierMenu.ts";
+import type { SearchSide } from "@/web/state/useCodeSearch.ts";
+
+/** A pending symbol-lookup menu anchored at a viewport position. */
+export interface IdentifierMenu {
+  /** The selected identifier term to look up. */
+  term: string;
+  /** Viewport x for the menu's left edge. */
+  x: number;
+  /** Viewport y for the menu's top edge. */
+  y: number;
+  /** Repo-relative path of the `.file-section` the selection is in (scope hint), or "". */
+  file: string;
+  /**
+   * The checkout side the selection sits on (from the code cell's `data-side`):
+   * a deleted/base line → "base", an added/context/head line → "head". Used as
+   * the menu's default side.
+   */
+  side: SearchSide;
+}
+
+/** The identifier-menu trigger: current menu + handlers to attach to a container. */
+export interface UseIdentifierMenu {
+  /** The open menu descriptor, or null when nothing is selected. */
+  menu: IdentifierMenu | null;
+  /** Attach to a code container's `onMouseUp` (drag-select / primary click). */
+  onMouseUp: () => void;
+  /** Attach to a code container's `onDoubleClick` (word select). */
+  onDoubleClick: () => void;
+  /** Dismiss the menu. */
+  close: () => void;
+}
+
+/** The closest ancestor element of a DOM node (the node itself if it is one). */
+function elementFor(node: Node | null): Element | null {
+  return node instanceof Element ? node : node?.parentElement ?? null;
+}
+
+/** The repo-relative file of the section containing a DOM node, or "". */
+function fileForNode(node: Node | null): string {
+  const section = elementFor(node)?.closest(".file-section");
+  return fileFromSectionId(section?.id ?? "");
+}
+
+/** The checkout side of the code cell containing a DOM node (defaults to head). */
+function sideForNode(node: Node | null): SearchSide {
+  const cell = elementFor(node)?.closest("[data-side]");
+  return parseDataSide(cell?.getAttribute("data-side") ?? null);
+}
+
+/** Read the current single-identifier text selection, if any, with its rect. */
+function readSelection(): IdentifierMenu | null {
+  const sel = window.getSelection();
+  const term: string = sel?.toString().trim() ?? "";
+  if (!sel || sel.rangeCount === 0 || !isIdentifier(term)) return null;
+  const range = sel.getRangeAt(0);
+  const rect = range.getBoundingClientRect();
+  return {
+    term, x: rect.left, y: rect.bottom + 4,
+    file: fileForNode(range.startContainer), side: sideForNode(range.startContainer),
+  };
+}
+
+/**
+ * The reusable double-click / drag-select identifier trigger, attachable to any
+ * code container. On mouse-up or double-click it reads the current text
+ * selection and, when it is a single valid identifier, exposes a `menu`
+ * descriptor (term + viewport position + enclosing file scope). The caller
+ * renders the floating menu (portaled above modals) and clears it via `close`.
+ */
+export function useIdentifierMenu(): UseIdentifierMenu {
+  const [menu, setMenu] = useState<IdentifierMenu | null>(null);
+  const update = useCallback((): void => setMenu(readSelection()), []);
+  const close = useCallback((): void => setMenu(null), []);
+  return { menu, onMouseUp: update, onDoubleClick: update, close };
+}

package/src/web/lib/useNavLookup.ts

@@ -0,0 +1,74 @@
+import { useRef, useState } from "react";
+import { trpc } from "@/web/trpc.ts";
+import { nextToken, isCurrent } from "@/web/lib/searchToken.ts";
+import { fetchResults, errorMessage } from "@/web/lib/codeSearchFetch.ts";
+import { frameForLookup } from "@/web/lib/navRouting.ts";
+import type { MenuOp, SearchSide } from "@/web/state/useCodeSearch.ts";
+import type { NavFrame } from "@/web/lib/navStack.ts";
+
+/** A lookup initiated from a double-click inside a navigator frame. */
+export interface NavLookupArgs {
+  /** Which lookup to run. */
+  op: MenuOp;
+  /** The identifier to look up. */
+  term: string;
+  /** The checkout side to run against. */
+  side: SearchSide;
+  /** File scope hint (the enclosing file of the selection), or "". */
+  file: string;
+  /** The SHA to run against (resolved for the chosen side). */
+  sha: string;
+}
+
+/** The navigator lookup runner: loading/error state + a run action. */
+export interface UseNavLookup {
+  /** True while a lookup is running (show a loading overlay). */
+  loading: boolean;
+  /** A user-facing error from the last lookup, or null. */
+  error: string | null;
+  /** Run a lookup and, on success, push the resolved frame. */
+  run: (args: NavLookupArgs) => void;
+}
+
+/**
+ * Runs symbol/search lookups for the navigator and pushes the resolved frame
+ * (via {@link frameForLookup}) when results arrive. Uses the shared
+ * {@link fetchResults} path and the {@link searchToken} last-wins race guard so
+ * overlapping runs — including StrictMode's double-fire — never push a stale
+ * frame. While a run is in flight `loading` is true so the caller can show a
+ * loading state instead of a blank frame (also covers the cold-clone wait).
+ *
+ * @param prId - PR id the lookups run against.
+ * @param push - Pushes a frame onto the navigator history.
+ */
+export function useNavLookup(prId: string, push: (frame: NavFrame) => void): UseNavLookup {
+  const utils = trpc.useUtils();
+  const token = useRef(0);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const run = (args: NavLookupArgs): void => {
+    const id = nextToken(token.current);
+    token.current = id;
+    setLoading(true);
+    setError(null);
+    if (args.sha === "" || args.term === "") { setLoading(false); return; }
+    void (async () => {
+      try {
+        const out = await fetchResults(utils, prId, args.sha, {
+          mode: args.op === "search" ? "general" : "symbol",
+          symbolAction: args.op === "usages" ? "usages" : "definition",
+          term: args.term, side: args.side, caseSensitive: false, regex: false,
+          file: args.file === "" ? undefined : args.file,
+        });
+        if (!isCurrent(id, token.current)) return;
+        setLoading(false);
+        push(frameForLookup(args.op, args.term, args.side, args.sha, out, args.file));
+      } catch (err) {
+        if (isCurrent(id, token.current)) { setError(errorMessage(err)); setLoading(false); }
+      }
+    })();
+  };
+
+  return { loading, error, run };
+}

package/src/web/lib/usePageTitle.ts

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+
+/** Base title used when no PR-specific title is set. */
+const BASE_TITLE = "mergie";
+
+/**
+ * Set the browser tab title, restoring the base title on unmount. A null/empty
+ * value leaves the base title in place (e.g. while data is still loading).
+ */
+export function usePageTitle(title: string | null): void {
+  useEffect(() => {
+    document.title = title && title.length > 0 ? `${title} · ${BASE_TITLE}` : BASE_TITLE;
+    return () => { document.title = BASE_TITLE; };
+  }, [title]);
+}

package/src/web/lib/visibleFiles.ts

@@ -0,0 +1,52 @@
+import { fuzzyFilter } from "@/domain/fuzzy.ts";
+import type { FileView } from "@/daemon/reviewService.ts";
+
+/** Which categories the visibility toggles hide. */
+export interface VisibilityToggles {
+  /** Hide hunks already marked viewed. */
+  hideViewedHunks: boolean;
+  /** Hide files that are fully viewed. */
+  hideViewedFiles: boolean;
+  /** Hide lock/generated files. */
+  hideLockFiles: boolean;
+}
+
+/**
+ * Compute the files to render given the fuzzy search query and the visibility
+ * toggles. Pure — does not mutate its inputs.
+ *
+ * @param files   The full file list for the range.
+ * @param query   Fuzzy search text over file paths (empty = no filter).
+ * @param toggles Active visibility toggles.
+ * @param reveal  Hunk hashes to always show even when a toggle would hide them
+ *                (used to jump to a comment on a toggled-away hunk without
+ *                flipping the toggle). Defaults to none.
+ */
+export function visibleFiles(
+  files: readonly FileView[],
+  query: string,
+  toggles: VisibilityToggles,
+  reveal: ReadonlySet<string> = new Set(),
+): FileView[] {
+  const ordered: FileView[] = applyQuery(files, query);
+  const result: FileView[] = [];
+  for (const file of ordered) {
+    const fileRevealed: boolean = file.hunks.some((h) => reveal.has(h.hash));
+    if (toggles.hideLockFiles && file.isLockfile && !fileRevealed) continue;
+    if (toggles.hideViewedFiles && file.viewed && !fileRevealed) continue;
+    const hunks = toggles.hideViewedHunks
+      ? file.hunks.filter((h) => !h.viewed || reveal.has(h.hash))
+      : file.hunks;
+    if (toggles.hideViewedHunks && hunks.length === 0) continue;
+    result.push({ ...file, hunks });
+  }
+  return result;
+}
+
+/** Order files by fuzzy match when a query is present; otherwise keep order. */
+function applyQuery(files: readonly FileView[], query: string): FileView[] {
+  if (query.length === 0) return [...files];
+  const ranked: string[] = fuzzyFilter(query, files.map((f) => f.newPath));
+  const byPath = new Map(files.map((f) => [f.newPath, f]));
+  return ranked.map((path) => byPath.get(path)).filter((f): f is FileView => f !== undefined);
+}

package/src/web/main.tsx

@@ -0,0 +1,24 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { httpBatchLink } from "@trpc/client";
+import { trpc } from "./trpc.ts";
+import { App } from "./App.tsx";
+import "highlight.js/styles/github.css";
+import "./styles.css";
+
+const rootElement: HTMLElement | null = document.getElementById("root");
+if (!rootElement) throw new Error("Root element #root not found");
+
+const queryClient = new QueryClient();
+const trpcClient = trpc.createClient({ links: [httpBatchLink({ url: "/trpc" })] });
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        <App />
+      </QueryClientProvider>
+    </trpc.Provider>
+  </StrictMode>,
+);

package/src/web/public/favicon.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="mergie">
+  <rect width="32" height="32" rx="7" fill="#ffffff"/>
+  <!-- added line: green "+" and bar -->
+  <line x1="8" y1="8" x2="8" y2="12" stroke="#2da44e" stroke-width="2" stroke-linecap="round"/>
+  <line x1="6" y1="10" x2="10" y2="10" stroke="#2da44e" stroke-width="2" stroke-linecap="round"/>
+  <rect x="13" y="8.5" width="13" height="3" rx="1.5" fill="#2da44e"/>
+  <!-- removed line: red "−" and bar -->
+  <line x1="6" y1="16" x2="10" y2="16" stroke="#cf222e" stroke-width="2" stroke-linecap="round"/>
+  <rect x="13" y="14.5" width="10" height="3" rx="1.5" fill="#cf222e"/>
+  <!-- context line -->
+  <rect x="13" y="20.5" width="8" height="3" rx="1.5" fill="#c8d1da"/>
+</svg>