Description

  Add line numbers in a gutter and implement URL hash navigation for sharing and bookmarking specific log lines.

  Requirements

  1. Display Line Numbers

  - Show line numbers in a gutter (left side of each log line)
  - Line numbers should be non-selectable (user-select: none)
  - Style: subtle color, right-aligned, fixed width (e.g., 50px)

  2. Click Behavior

  - Click a line number → Update URL to #L{n} (e.g., #L123)
  - Shift+Click two line numbers → Update URL to #L{a}-L{b} (e.g., #L50-L100)
  - Update browser history without page reload (window.history.pushState or replaceState)

  3. Visual Highlighting

  - Selected line(s) get a distinct background color
    - Single line: highlight that line
    - Range: highlight all lines in range
  - Highlight color suggestions:
    - Dark theme: rgba(255, 255, 255, 0.1)
    - Light theme: rgba(0, 0, 0, 0.05)

  4. Hash Navigation

  - When visiting URL with #L123:
    - Scroll to line 123
    - Highlight line 123
    - Use react-window's scrollToRow({ index: 122, align: 'center' })
  - When visiting URL with #L50-L100:
    - Scroll to line 50
    - Highlight lines 50-100

  5. URL Format

  Single line:  /app/pipeline-runs/abc123#L42
  Line range:   /app/pipeline-runs/abc123#L50-L100

  Acceptance Criteria

  - ✅ Line numbers are visible in gutter for all log lines
  - ✅ Clicking line number updates URL to #L{n}
  - ✅ Shift+clicking two line numbers updates URL to #L{a}-L{b}
  - ✅ Selected line(s) have distinct background color
  - ✅ Opening URL with #L{n} scrolls to and highlights that line
  - ✅ Opening URL with #L{a}-L{b} scrolls to and highlights that range
  - ✅ Browser back/forward buttons work correctly
  - ✅ URL updates don't trigger page reload