[muhammad-ali-e]

What

New and changed files in components/patterns/document-viewer/:

• TextView.tsx: text with line highlights, used for Raw Text (V21), HITL text and LLMWhisperer results.
• ImageView.tsx: an image shown as a one-page document.
• DocumentViewer now accepts a DocumentSource: a PDF, an image or text.
• ViewerToolbar gains a leading slot for the document switcher (C10).

Part of the v1 DocumentViewer (P1-T21, UN-4390).

Why

The consumer pages show more than PDFs:

• Prompt Studio shows extracted text.
• Agentic Studio shows raw text.
• HITL shows text and highlights.
• The LLMWhisperer Playground shows images.
• Prompt Studio and Agentic Studio switch between documents.

One viewer handles all of these, so each page doesn't need its own.

How

• Sources. DocumentSource is a union of three shapes:

  • PdfSource (URL or bytes)
  • {kind: "image", url, alt?}
  • {kind: "text", text}

  usePdfDocument only runs for PDFs.

• TextView:

  • Shows one <li> per line, with a line number.
  • Uses whitespace-pre-wrap, so LLMWhisperer's column layout survives.
  • Uses the mono type role and Geist Mono, which the README reserves for model output.
  • Highlights whole lines ({id, line, tone?}, 0-based, matching LLMWhisperer's line_metadata keys) in the default, active and low-confidence tones.
  • With onTextHighlightClick, each highlighted line is a button.
  • scrollToHighlight centres the line.
  • Blank text shows the empty state.

• ImageView:

  • Treats the image as a single page.
  • Its natural size is reported in points, so fit width / fit page and −/+ work exactly as for a PDF page, with zoom 1 = natural size.
  • Page-0 highlights draw over it.
  • A failed load shows the failed state, and Retry remounts the <img>.
  • The image size is stored with its URL, so a new image never reuses the previous one's size.

• Toolbar:

  • The switcher slot sits at the toolbar's leading edge and shows in every state, including loading and failed, so you can always switch away from a broken document.
  • Paging only shows for PDFs. Zoom shows for PDFs and images.
  • Text gets a toolbar only when there's a switcher.

• Keyboard: + and − do nothing in text.

• Not checked against Figma: I couldn't open frame C10 from here. The slot is placed by the plan's description, so please compare it with C10 before this merges. The switcher itself is page-owned (P5-T04); this PR only reserves its place.

Can this PR break any existing features. If yes, please list possible items. If no, please explain why. (PS: Admins do not merge the PR without this section filled)

• No. This is new code under src/v1/ and nothing imports it yet. The only change for existing callers is that source now also accepts image and text sources; PDF sources work as before.

Database Migrations

• None

Env Config

• None

Relevant Docs

• P1-T21 implementation plan. Figma frames C10 (switcher), V21 (raw text) and LLMW P07 (confidence).

Related Issues or PRs

• Jira: UN-4506 (parent UN-4390)
• Stacked on UN-4505 [DEV] Add the v1 DocumentViewer with toolbar, zoom, keys and scroll handle #2408 (UN-4505) → UN-4504 [DEV] Add v1 PDF highlight layer and highlight normalisers #2407 → UN-4503 [DEV] Render v1 PDF pages in a windowed, scrolling list #2405 → UN-4502 [DEV] Add the v1 PDF loader, document hook and viewer states #2404 → UN-4299 [FEAT] v1 design tokens, themes and style isolation (P0-T04) #2399 → UN-4270 [FEAT] v1 scaffold, strict TypeScript and import boundary #2380

Dependencies Versions

• None

Notes on Testing

• bun run typecheck:v1, lint:v1 and test:v1 pass (137 unit tests, 56 boundary fixtures). biome ci src/ reports no errors.
• TextView:
  • every line is shown, including blank ones, with its number
  • highlight tones and the active highlight
  • only highlighted lines are clickable
  • highlights are centred exactly on request
  • blank text shows the empty state
• ImageView:
  • loading state, then size in points, then CSS size at 1× and 0.5×
  • highlights draw over the image
  • after a failure, Retry loads the image again
• DocumentViewer:
  • text shows the switcher with no paging or zoom
  • the switcher stays during loading and after a failure
  • an image fits at 50% and steps to 75%, with no paging
  • a null source shows the empty state

Screenshots

• None yet. The gallery comes in UN-4507.

Checklist

I have read and understood the Contribution Guidelines.

---

Generated by Claude Code

[muhammad-ali-e]

pre-commit.ci - pr is red because of the base branch, not this PR.

The failing hook is check-shebang-scripts-are-executable, on frontend/scripts/check-v1-styles.mjs. That file has a #! line but no executable bit. It comes from the tokens PR #2399 (UN-4299-design-tokens-themes); this PR doesn't touch it. The hook doesn't fail on #2399 itself only because pre-commit.ci doesn't run on that PR. Running pre-commit run --from-ref $(git merge-base origin/main HEAD) locally reproduces it, and this PR's own files pass every hook.

There's no fix to port yet. The fix is a one-line change on #2399: git add --chmod=+x frontend/scripts/check-v1-styles.mjs (or drop the shebang). Once #2399 has it, this check should go green here without any change to this PR.

---

Generated by Claude Code

[greptile-apps]

via Greptile

Confidence Score: 5/5

[Medium impact] The PR appears safe to merge; no new actionable issues were established.

Summary

Adds text and image views to DocumentViewer, plus a leading slot for a document switcher.

• Text documents show numbered lines with clickable highlights.
• Image documents appear as single pages with zoom and highlights.
• The viewer picks content and controls to match each document source.

_{Reviews (8) · Last reviewed commit: "Merge branch 'UN-4505-v1-pdf-toolbar' in..." · Reviewed by Greptile}

Dismissed because a newer commit was pushed; Greptile will re-review the current head.

[praveen-formido]

Text and image views plus the switcher slot. Two items I would fix first: a text content change is treated as a new document, so a live-edited text (the HITL case) remounts, scrolls to the top and re-centres the highlight on every keystroke; and zoom keys pressed while an image is still loading switch to custom mode, so the image never fits once it arrives. The rest are smaller.

One more that sits on a line outside this diff: in scrollTo (DocumentViewer.tsx:247) a highlight on a page other than 0 of an image source never resolves, because ImageView only has one page, so scrollToHighlight returns false and the request stays in pendingRef forever. Dropping the request when the source is an image and highlight.page !== 0 (or clamping to page 0) clears it.

Dismissed because a newer commit was pushed; Greptile will re-review the current head.

[muhammad-ali-e]

Thanks @praveen-formido. On the review note about scrollTo with an image source: fixed in c51fbef. A highlight request for an image is dropped when that highlight is on a page other than 0, so it no longer waits in the pending slot for ever (and can't fire later if the highlight list changes). Test: "drops a scroll to a highlight on another page of an image instead of keeping it".

---

Generated by Claude Code

Dismissed because a newer commit was pushed; Greptile will re-review the current head.

[sonarqubecloud]

Quality Gate passed

Issues
16 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud