mergie-cli 0.1.0

package/src/web/components/RightRail.tsx

@@ -0,0 +1,146 @@
+import { useEffect } from "react";
+import { trpc } from "../trpc.ts";
+import { nextRailTab, type RailTab } from "@/web/lib/railState.ts";
+import { CommentsPanel } from "./CommentsPanel.tsx";
+import { AiReviewsPanel } from "./AiReviewsPanel.tsx";
+import { PrDescription } from "./PrDescription.tsx";
+import { SearchRailPanel } from "./SearchRailPanel.tsx";
+import type { FileTarget } from "./FileView.tsx";
+import { Tooltip } from "./Tooltip.tsx";
+import {
+  CommentIcon, SparkleIcon, DocumentIcon, SearchIcon, CloseIcon,
+} from "./Icons.tsx";
+import type { FileView } from "@/daemon/reviewService.ts";
+import type { CodeSearchState } from "../state/useCodeSearch.ts";
+
+/** Static presentation for each rail tab: icon, label, tooltip. */
+interface RailTabMeta {
+  /** The rail tab this metadata describes. */
+  tab: RailTab;
+  /** Human-readable panel title + tooltip / aria-label. */
+  label: string;
+  /** The inline-SVG icon component for the rail button. */
+  Icon: (props: { size?: number }) => React.JSX.Element;
+}
+
+/** Order + presentation of the rail tabs (top → bottom). */
+const TAB_META: readonly RailTabMeta[] = [
+  { tab: "comments", label: "Comments", Icon: CommentIcon },
+  { tab: "reviews", label: "AI reviews", Icon: SparkleIcon },
+  { tab: "description", label: "PR description", Icon: DocumentIcon },
+  { tab: "search", label: "Search", Icon: SearchIcon },
+] as const;
+
+/**
+ * The right icon rail plus its expandable sidebar. The rail (three icon
+ * buttons) is always visible, pinned to the right edge. Clicking an icon
+ * expands the sidebar to its left showing that surface and pushes the diff
+ * aside; clicking the active icon again — or pressing Esc — collapses it.
+ *
+ * All three surfaces stay MOUNTED whenever the sidebar is open; the inactive
+ * ones are hidden via `hidden`, so each keeps its own scroll position and
+ * internal state across tab switches within a session.
+ */
+export function RightRail(props: {
+  /** PR id. */
+  prId: string;
+  /** The active rail tab, or null when the sidebar is collapsed. */
+  active: RailTab | null;
+  /** Set the active tab (null collapses). */
+  onActiveChange: (tab: RailTab | null) => void;
+  /** All files/hunks in the selected range (before view toggles). */
+  rangeFiles: FileView[];
+  /** The subset currently rendered on screen (after view toggles). */
+  renderedFiles: FileView[];
+  /** Baseline SHA for the comments panel's "view in context" link. */
+  baselineSha: string;
+  /** Force a hunk visible so a jumped-to comment can be scrolled into view. */
+  onReveal: (hunkHash: string) => void;
+  /** The PR body markdown for the description panel. */
+  prBody: string;
+  /** The code-search state hosting the Search tab. */
+  codeSearch: CodeSearchState;
+  /** Open a result location in the file navigator (owned by ReviewView). */
+  onOpenFile: (target: FileTarget) => void;
+}): React.JSX.Element {
+  const { prId, active, onActiveChange, rangeFiles, renderedFiles, baselineSha, onReveal, prBody, codeSearch, onOpenFile } = props;
+
+  // Live total comment count for the Comments icon badge. Shares react-query's
+  // cache with the panel's own listAllComments query, so the two always agree.
+  const commentCount: number = trpc.listAllComments.useQuery({ id: prId }).data?.length ?? 0;
+
+  // Esc collapses the sidebar when a tab is open. The comments panel dismisses
+  // its own out-of-range prompt first (capture-phase handler stops propagation).
+  useEffect(() => {
+    if (active === null) return;
+    const onKey = (e: KeyboardEvent): void => {
+      if (e.key === "Escape") onActiveChange(null);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [active, onActiveChange]);
+
+  const activeLabel: string = TAB_META.find((m) => m.tab === active)?.label ?? "";
+
+  return (
+    <>
+      {/* The sidebar stays MOUNTED across collapse (hidden, not unmounted) so
+          every panel's scroll position and internal state survive a
+          collapse→reopen within the session. */}
+      <aside className="rail-sidebar" aria-label={activeLabel} hidden={active === null}>
+        <header className="rail-sidebar-header">
+          <strong>{activeLabel}</strong>
+          <button
+            type="button"
+            className="symbol-panel-close"
+            onClick={() => onActiveChange(null)}
+            title="Close (Esc)"
+            aria-label="Close"
+          >
+            <CloseIcon size={16} />
+          </button>
+        </header>
+        <div className="rail-sidebar-body">
+          <div className="rail-panel" hidden={active !== "comments"}>
+            <CommentsPanel
+              prId={prId}
+              rangeFiles={rangeFiles}
+              renderedFiles={renderedFiles}
+              baselineSha={baselineSha}
+              onReveal={onReveal}
+            />
+          </div>
+          <div className="rail-panel" hidden={active !== "reviews"}>
+            <AiReviewsPanel prId={prId} />
+          </div>
+          <div className="rail-panel" hidden={active !== "description"}>
+            <PrDescription body={prBody} />
+          </div>
+          <div className="rail-panel" hidden={active !== "search"}>
+            <SearchRailPanel state={codeSearch} onOpenFile={onOpenFile} />
+          </div>
+        </div>
+      </aside>
+      <nav className="right-rail" aria-label="Review panels">
+        {TAB_META.map(({ tab, label, Icon }) => (
+          <div key={tab} className="rail-item">
+            <Tooltip label={label} placement="left">
+              <button
+                type="button"
+                className={active === tab ? "rail-btn active" : "rail-btn"}
+                aria-pressed={active === tab}
+                aria-label={label}
+                onClick={() => onActiveChange(nextRailTab(active, tab))}
+              >
+                <Icon size={20} />
+                {tab === "comments" && commentCount > 0 && (
+                  <span className="rail-badge" aria-hidden="true">{commentCount}</span>
+                )}
+              </button>
+            </Tooltip>
+          </div>
+        ))}
+      </nav>
+    </>
+  );
+}

package/src/web/components/SearchRailPanel.tsx

@@ -0,0 +1,127 @@
+import { ResultsList, type OpenLocation, type ResultsHeader } from "./ResultsList.tsx";
+import { Tooltip } from "./Tooltip.tsx";
+import type { FileTarget } from "./FileView.tsx";
+import type { CodeSearchState, RunSnapshot } from "../state/useCodeSearch.ts";
+
+/** Human label for a run's lookup, for the results header. */
+function opLabel(run: Pick<RunSnapshot, "mode" | "symbolAction">): string {
+  if (run.mode === "general") return "Search";
+  return run.symbolAction === "usages" ? "Usages" : "Definition";
+}
+
+/** One segmented pill, wrapped in the app's hover Tooltip (matches the icon rail). */
+function Pill(props: { label: string; tip: string; active: boolean; onClick: () => void }): React.JSX.Element {
+  const { label, tip, active, onClick } = props;
+  return (
+    <Tooltip label={tip} placement="bottom">
+      <button type="button" className={active ? "segmented-item active" : "segmented-item"} aria-pressed={active} onClick={onClick}>{label}</button>
+    </Tooltip>
+  );
+}
+
+/** General|Symbol mode segmented toggle. */
+function ModeToggle(props: { state: CodeSearchState }): React.JSX.Element {
+  const { state } = props;
+  return (
+    <div className="segmented" role="group" aria-label="Search mode">
+      <Pill label="General" tip="Plain-text search across the code (ripgrep)." active={state.mode === "general"} onClick={() => state.setMode("general")} />
+      <Pill label="Symbol" tip="Look up a symbol semantically — its definition or usages." active={state.mode === "symbol"} onClick={() => state.setMode("symbol")} />
+    </div>
+  );
+}
+
+/** Definition|Usages segmented toggle (symbol mode). */
+function ActionToggle(props: { state: CodeSearchState }): React.JSX.Element {
+  const { state } = props;
+  return (
+    <div className="segmented" role="group" aria-label="Symbol lookup">
+      <Pill label="Definition" tip="Find where the symbol is defined (lists all matching definitions)." active={state.symbolAction === "definition"} onClick={() => state.setSymbolAction("definition")} />
+      <Pill label="Usages" tip="Find where the symbol is referenced. Best-effort — some references may be missed." active={state.symbolAction === "usages"} onClick={() => state.setSymbolAction("usages")} />
+    </div>
+  );
+}
+
+/** Head|Base segmented toggle. */
+function SideToggle(props: { state: CodeSearchState }): React.JSX.Element {
+  const { state } = props;
+  return (
+    <div className="segmented" role="group" aria-label="Checkout side">
+      <Pill label="Head" tip="Search the head version — the code at the end of the selected commit range." active={state.side === "head"} onClick={() => state.setSide("head")} />
+      <Pill label="Base" tip="Search the base version — the code at the start of the selected commit range." active={state.side === "base"} onClick={() => state.setSide("base")} />
+    </div>
+  );
+}
+
+/**
+ * The right-rail "Search" tab: a query input, a General|Symbol mode toggle,
+ * mode-specific options (case/regex for general; Definition|Usages for symbol),
+ * a Head|Base checkout toggle, and the shared {@link ResultsList}. Runs on
+ * Enter. "View file" opens the file in the shared file navigator (owned by
+ * ReviewView).
+ *
+ * @param props.state - The code-search state from `useCodeSearch`.
+ * @param props.onOpenFile - Open a result location in the file navigator.
+ */
+export function SearchRailPanel(props: { state: CodeSearchState; onOpenFile: (target: FileTarget) => void }): React.JSX.Element {
+  const { state, onOpenFile } = props;
+
+  // The header reflects the last run (frozen), not the live controls, so editing
+  // the query/mode does not change it until Run is pressed.
+  const run: RunSnapshot | null = state.lastRun;
+  const header: ResultsHeader = run
+    ? { op: opLabel(run), term: run.term, scope: run.side, scopeFile: run.scopeFile }
+    : { op: opLabel(state), term: "", scope: state.side };
+  const openFile = (loc: OpenLocation): void => onOpenFile({ path: loc.path, sha: loc.sha, line: loc.line });
+
+  return (
+    <div className="search-rail-panel">
+      <div className="search-rail-controls">
+        <input
+          type="text"
+          className="search-rail-query"
+          placeholder={state.mode === "symbol" ? "Symbol name…" : "Search text…"}
+          value={state.query}
+          onChange={(e) => state.setQuery(e.target.value)}
+          onKeyDown={(e) => { if (e.key === "Enter") state.runFromRail(); }}
+        />
+        <div className="search-rail-row">
+          <ModeToggle state={state} />
+          <SideToggle state={state} />
+        </div>
+        {state.mode === "general" ? (
+          <div className="search-rail-row">
+            <label className="results-toggle"><input type="checkbox" checked={state.caseSensitive} onChange={(e) => state.setCaseSensitive(e.target.checked)} /> Case sensitive</label>
+            <label className="results-toggle"><input type="checkbox" checked={state.regex} onChange={(e) => state.setRegex(e.target.checked)} /> Regex</label>
+          </div>
+        ) : (
+          <div className="search-rail-row"><ActionToggle state={state} /></div>
+        )}
+        <div className="search-rail-run">
+          <button
+            type="button"
+            className={state.dirty ? "btn btn-accent btn-sm" : "btn btn-sm"}
+            onClick={state.runFromRail}
+            disabled={state.query.trim() === "" || !state.dirty}
+          >
+            Run
+          </button>
+          {state.dirty && state.results.length > 0 && (
+            <span className="search-rail-stale">Inputs changed — press Run to update</span>
+          )}
+        </div>
+      </div>
+      <ResultsList
+        results={state.results}
+        loading={state.loading}
+        error={state.error}
+        filters={state.filters}
+        onFilters={state.setFilters}
+        sha={state.resultSha}
+        header={header}
+        onOpen={openFile}
+        onClose={() => { /* rail Esc collapse is owned by RightRail */ }}
+        onBroaden={state.broaden}
+      />
+    </div>
+  );
+}

package/src/web/components/Switch.tsx

@@ -0,0 +1,31 @@
+/**
+ * A labelled iOS-style on/off toggle switch. The whole row (label + switch) is
+ * one click target: it is a `<label>` wrapping a visually-hidden native
+ * checkbox (given `role="switch"` so it is announced as a switch), so it stays
+ * keyboard-operable (Space toggles), shows the shared focus ring on keyboard
+ * focus, and clicking the label toggles it — all for free from the native
+ * control. The visible track + knob are driven purely by the checkbox state.
+ */
+export function Switch(props: {
+  /** Whether the switch is on. */
+  checked: boolean;
+  /** Called with the new on/off state when toggled. */
+  onChange: (checked: boolean) => void;
+  /** Visible label, also the control's accessible name. */
+  label: string;
+}): React.JSX.Element {
+  const { checked, onChange, label } = props;
+  return (
+    <label className="switch-row">
+      <span className="switch-label">{label}</span>
+      <input
+        type="checkbox"
+        role="switch"
+        className="switch-input"
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+      />
+      <span className="switch-track" aria-hidden="true"><span className="switch-knob" /></span>
+    </label>
+  );
+}

package/src/web/components/SwitchPrModal.tsx

@@ -0,0 +1,28 @@
+import { PrPicker } from "./PrPicker.tsx";
+import { useEscToClose } from "@/web/lib/useEscToClose.ts";
+import { CloseIcon } from "./Icons.tsx";
+
+/**
+ * The in-review "Switch PR" overlay: the same {@link PrPicker} shown on the
+ * home screen, in a modal. Closes on Escape, the close button, or a click on
+ * the backdrop. The current PR is marked (and not clickable) inside the picker.
+ */
+export function SwitchPrModal(props: { currentPrId: string; onClose: () => void }): React.JSX.Element {
+  useEscToClose(props.onClose);
+  return (
+    <div className="modal-overlay" onClick={props.onClose}>
+      <div className="modal picker-modal" onClick={(e) => e.stopPropagation()}>
+        <header className="modal-header">
+          <strong>Switch pull request</strong>
+          <span className="modal-header-spacer" />
+          <button type="button" className="modal-close" onClick={props.onClose} aria-label="Close">
+            <CloseIcon size={16} />
+          </button>
+        </header>
+        <div className="picker-modal-body">
+          <PrPicker currentPrId={props.currentPrId} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/web/components/SymbolLookupMenu.tsx

@@ -0,0 +1,35 @@
+import { useState } from "react";
+import { CloseIcon } from "./Icons.tsx";
+import type { MenuOp, SearchSide } from "../state/useCodeSearch.ts";
+
+/**
+ * A small floating menu shown when a symbol is selected in the diff, offering
+ * the three lookup actions and a head/base checkout toggle. The side toggle
+ * starts on `defaultSide` — which reflects the column/line the symbol was
+ * selected in (before → base, after → head) — and stays overridable.
+ */
+export function SymbolLookupMenu(props: {
+  term: string;
+  x: number;
+  y: number;
+  defaultSide: SearchSide;
+  onPick: (op: MenuOp, side: SearchSide) => void;
+  onClose: () => void;
+}): React.JSX.Element {
+  const { term, x, y, defaultSide, onPick, onClose } = props;
+  const [side, setSide] = useState<SearchSide>(defaultSide);
+
+  return (
+    <div className="symbol-menu" style={{ left: x, top: y }}>
+      <code className="symbol-menu-term">{term}</code>
+      <span className="symbol-menu-side">
+        <button type="button" className={side === "head" ? "active" : ""} onClick={() => setSide("head")}>Head</button>
+        <button type="button" className={side === "base" ? "active" : ""} onClick={() => setSide("base")}>Base</button>
+      </span>
+      <button type="button" className="btn btn-sm" onClick={() => onPick("definition", side)}>Definition</button>
+      <button type="button" className="btn btn-sm" onClick={() => onPick("usages", side)}>Usages</button>
+      <button type="button" className="btn btn-sm" onClick={() => onPick("search", side)}>Search</button>
+      <button type="button" className="btn btn-ghost btn-sm" onClick={onClose} aria-label="Close"><CloseIcon size={14} /></button>
+    </div>
+  );
+}

package/src/web/components/Toolbar.tsx

@@ -0,0 +1,79 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Switch } from "./Switch.tsx";
+import { Tooltip } from "./Tooltip.tsx";
+import { useEscToClose } from "@/web/lib/useEscToClose.ts";
+import { ChevronDownIcon } from "./Icons.tsx";
+import type { VisibilityToggles } from "@/web/lib/visibleFiles.ts";
+
+/** Tooltip explaining that viewed-progress is scoped to each whitespace mode. */
+const HIDE_WHITESPACE_HINT =
+  "Hide changes that are only whitespace (re-diffs ignoring spacing). " +
+  "Viewed-hunk progress is tracked separately for each mode, so hunks may " +
+  "reappear as un-viewed when you turn this off — your original marks return unchanged.";
+
+/**
+ * The "View" group of visibility filters. To stay compact now that there are
+ * four filters, the two most-used ones ("Hide viewed files" and "Hide
+ * whitespace changes") are pinned as switches, and the remaining two live in a
+ * "More filters" popover whose button carries a count badge when any of them
+ * are active.
+ */
+export function Toolbar(props: {
+  toggles: VisibilityToggles;
+  onChange: (t: VisibilityToggles) => void;
+  hideWhitespace: boolean;
+  onHideWhitespaceChange: (value: boolean) => void;
+}): React.JSX.Element {
+  const { toggles, onChange, hideWhitespace, onHideWhitespaceChange } = props;
+  const [moreOpen, setMoreOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const closeMore = useCallback(() => setMoreOpen((o) => (o ? false : o)), []);
+  useEscToClose(closeMore);
+
+  // Close the popover on any pointer press outside it (bound only while open).
+  useEffect(() => {
+    if (!moreOpen) return;
+    const onPointerDown = (e: PointerEvent): void => {
+      const target: Node | null = e.target instanceof Node ? e.target : null;
+      if (target && rootRef.current?.contains(target)) return;
+      setMoreOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [moreOpen]);
+
+  const toggleRow = (key: keyof VisibilityToggles, label: string) => (
+    <Switch label={label} checked={toggles[key]} onChange={(checked) => onChange({ ...toggles, [key]: checked })} />
+  );
+
+  // Filters hidden behind "More"; the badge counts how many are currently on.
+  const hiddenActive: number = [toggles.hideViewedHunks, toggles.hideLockFiles].filter(Boolean).length;
+
+  return (
+    <div className="toolbar" ref={rootRef}>
+      {toggleRow("hideViewedFiles", "Hide viewed files")}
+      <Tooltip label={HIDE_WHITESPACE_HINT} placement="bottom" className="tooltip-block">
+        <Switch label="Hide whitespace changes" checked={hideWhitespace} onChange={onHideWhitespaceChange} />
+      </Tooltip>
+
+      <div className="more-filters">
+        <button
+          type="button"
+          className="more-filters-btn"
+          aria-expanded={moreOpen}
+          onClick={() => setMoreOpen((o) => !o)}
+        >
+          <span>More filters</span>
+          {hiddenActive > 0 && <span className="more-filters-badge">{hiddenActive}</span>}
+          <ChevronDownIcon size={14} />
+        </button>
+        {moreOpen && (
+          <div className="more-filters-pop">
+            {toggleRow("hideViewedHunks", "Hide viewed hunks")}
+            {toggleRow("hideLockFiles", "Hide lock files")}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/web/components/Tooltip.tsx

@@ -0,0 +1,72 @@
+import { useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+/** Which side of the trigger the tooltip is placed on. */
+export type TooltipPlacement = "left" | "bottom";
+
+/** A resolved on-screen position for the floating tooltip bubble. */
+interface TooltipPos {
+  /** Viewport x (px) — the bubble's left or right edge depending on placement. */
+  x: number;
+  /** Viewport y (px) — the bubble's vertical anchor. */
+  y: number;
+}
+
+/** Gap in px between the trigger and the tooltip bubble. */
+const GAP = 8;
+
+/**
+ * A near-instant hover/focus tooltip. Wraps a single trigger element and renders
+ * the label in a small pill that is **portaled to `document.body`**, so it is
+ * never clipped by an ancestor's `clip-path`/`overflow` (e.g. the hunk card).
+ * The tooltip appears on `mouseenter`/`focus` with no show-delay (only a tiny
+ * CSS fade) and hides immediately on `mouseleave`/`blur`. The trigger keeps its
+ * own `aria-label`; the visual bubble is `aria-hidden`.
+ */
+export function Tooltip(props: {
+  /** The text shown in the tooltip bubble. */
+  label: string;
+  /** Which side of the trigger to place the bubble on. Defaults to "bottom". */
+  placement?: TooltipPlacement;
+  /** Extra class(es) for the wrapper span (e.g. to make it a full-width block). */
+  className?: string;
+  /** The single trigger element (a button). */
+  children: React.ReactElement;
+}): React.JSX.Element {
+  const placement: TooltipPlacement = props.placement ?? "bottom";
+  const wrapRef = useRef<HTMLSpanElement>(null);
+  const [pos, setPos] = useState<TooltipPos | null>(null);
+
+  const show = (): void => {
+    const trigger = wrapRef.current?.firstElementChild;
+    if (!trigger) return;
+    const r = trigger.getBoundingClientRect();
+    setPos(placement === "left"
+      ? { x: r.left - GAP, y: r.top + r.height / 2 }
+      : { x: r.left + r.width / 2, y: r.bottom + GAP });
+  };
+  const hide = (): void => setPos(null);
+
+  return (
+    <span
+      ref={wrapRef}
+      className={props.className ? `tooltip-wrap ${props.className}` : "tooltip-wrap"}
+      onMouseEnter={show}
+      onMouseLeave={hide}
+      onFocusCapture={show}
+      onBlurCapture={hide}
+    >
+      {props.children}
+      {pos !== null && createPortal(
+        <span
+          className={`tooltip tooltip-${placement}`}
+          aria-hidden="true"
+          style={{ left: pos.x, top: pos.y }}
+        >
+          {props.label}
+        </span>,
+        document.body,
+      )}
+    </span>
+  );
+}

package/src/web/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>mergie</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/src/web/lib/aiReviewIndicator.ts

@@ -0,0 +1,29 @@
+import type { AiReviewState, AiReviewStatus } from "@/daemon/aiReviewTracker.ts";
+
+/** What the header indicator should display, derived from raw statuses. */
+export interface AiReviewSummary {
+  /** Which state the indicator reflects. */
+  state: AiReviewState;
+  /** How many reviews are currently running (0 when not in a running state). */
+  runningCount: number;
+  /** The status to act on (open its range) when the indicator is clicked. */
+  primary: AiReviewStatus;
+}
+
+/**
+ * Reduce the per-range AI-review statuses to the one thing the header indicator
+ * should show. Priority: any running review wins (with a count of how many are
+ * running); otherwise a completed (done) review is surfaced as clickable-ready;
+ * otherwise a failed one. Returns null when there is nothing to show.
+ */
+export function summariseAiReviewStatuses(statuses: AiReviewStatus[]): AiReviewSummary | null {
+  const running = statuses.filter((s) => s.state === "running");
+  if (running.length > 0 && running[0]) {
+    return { state: "running", runningCount: running.length, primary: running[0] };
+  }
+  const done = statuses.find((s) => s.state === "done");
+  if (done) return { state: "done", runningCount: 0, primary: done };
+  const failed = statuses.find((s) => s.state === "failed");
+  if (failed) return { state: "failed", runningCount: 0, primary: failed };
+  return null;
+}

package/src/web/lib/anchorRow.ts

@@ -0,0 +1,25 @@
+import type { SplitRow } from "@/daemon/splitView.ts";
+
+/** Whether a split row represents a change (either side is not a context cell). */
+function isChangedRow(row: SplitRow): boolean {
+  return row.left.kind !== "ctx" || row.right.kind !== "ctx";
+}
+
+/**
+ * Index of the first changed row (an addition/deletion, i.e. a row where a side
+ * is `add`/`del`/`empty` rather than `ctx`) at or after `startIdx`. Used to move
+ * the full-file modal's anchor highlight off the context line it was opened at
+ * (e.g. a `}`) and onto the real +/- line just below.
+ *
+ * Falls back to `startIdx` unchanged when there is no changed row at/after it —
+ * including a negative `startIdx` (no anchor) — so the caller never jumps to the
+ * top or crashes.
+ */
+export function firstChangedIndexFrom(rows: SplitRow[], startIdx: number): number {
+  if (startIdx < 0) return startIdx;
+  for (let i = startIdx; i < rows.length; i++) {
+    const row = rows[i];
+    if (row && isChangedRow(row)) return i;
+  }
+  return startIdx;
+}

package/src/web/lib/codeSearchFetch.ts

@@ -0,0 +1,46 @@
+import type { trpc } from "@/web/trpc.ts";
+import { BadRegexError, type CodeResult } from "@/services/symbols.ts";
+import type { SearchMode, SymbolAction, SearchSide } from "@/web/state/useCodeSearch.ts";
+
+/** The tRPC utils object (`trpc.useUtils()`), used for imperative fetches. */
+export type TrpcUtils = ReturnType<typeof trpc.useUtils>;
+
+/** Parameters resolved for one lookup run. */
+export interface RunParams {
+  /** Search mode to run in. */
+  mode: SearchMode;
+  /** Symbol lookup (used only in symbol mode). */
+  symbolAction: SymbolAction;
+  /** The term/query to run. */
+  term: string;
+  /** The checkout side to run against. */
+  side: SearchSide;
+  /** Case-sensitive (general mode). */
+  caseSensitive: boolean;
+  /** Regex (general mode). */
+  regex: boolean;
+  /** Optional file scope hint for symbol lookups. */
+  file?: string;
+}
+
+/**
+ * Fetch results for one resolved run via the tRPC utils. The single place the
+ * symbol/search tRPC procedures are called, so the rail and the navigator share
+ * one fetch path.
+ */
+export async function fetchResults(utils: TrpcUtils, prId: string, sha: string, p: RunParams): Promise<CodeResult[]> {
+  if (p.mode === "general") {
+    return utils.symbolSearch.fetch({ id: prId, word: p.term, sha, caseSensitive: p.caseSensitive, regex: p.regex });
+  }
+  if (p.symbolAction === "usages") {
+    return utils.symbolUsages.fetch({ id: prId, symbol: p.term, sha, file: p.file });
+  }
+  return utils.symbolDefinition.fetch({ id: prId, symbol: p.term, sha, file: p.file });
+}
+
+/** A human message for a lookup error (bad regex vs generic failure). */
+export function errorMessage(err: unknown): string {
+  if (err instanceof BadRegexError) return err.message;
+  if (err instanceof Error && /regex|pattern/i.test(err.message)) return "Invalid search pattern.";
+  return "Search failed. Please try again.";
+}