feat(code-review): mark files as viewed in diff review

[MattPua]

Problem

When reviewing a diff there's no way to track which files you've already looked at, no signal when a file changes after you've reviewed it, and nothing to get reviewed files out of the way.

Changes

CleanShot.2026-06-18.at.15.53.53.mp4

• Adds a Read checkbox to each file header in the diff/review viewer
• Marking a file read collapses it; unmarking expands it (like GitHub)
• Already-read files auto-collapse when you reopen the panel
• If a file changes after you marked it read, it shows a Changed badge (and stays expanded) so you know to look again
• Shows a read count (read / total) next to the file count
• Read state is saved per task and survives restarts, across local, branch, PR, and cloud diffs
• Read state is cleared when a task is archived or its PR is merged, with a size cap so storage stays bounded

How did you test this?

• Unit tests for the read-state store (mark/unmark, clearing, size-cap eviction) and the change-detection signatures
• pnpm --filter @posthog/ui typecheck and biome lint pass on the changed files (the one remaining typecheck error is a pre-existing, unrelated issue in canvas/WebsiteLayout.tsx)
• Not yet exercised in the running app

Automatic notifications

• Publish to changelog?
• Alert Sales and Marketing teams?

---

Created with PostHog Code

[github-actions]

React Doctor found 5 issues in 2 files · 5 warnings.

5 warnings

src/features/code-review/components/ReviewShell.tsx

• ⚠️ src/features/code-review/components/ReviewShell.tsx:126 Event logic handled in an effect no-event-handler
• ⚠️ src/features/code-review/components/ReviewShell.tsx:143 Ref initializer runs on every render rerender-lazy-ref-init
• ⚠️ src/features/code-review/components/ReviewShell.tsx:185 Event logic handled in an effect no-event-handler
• ⚠️ src/features/code-review/components/ReviewShell.tsx:187 Parent kept in sync with a callback effect no-prop-callback-in-effect

src/features/code-review/reviewShellParts.tsx

• ⚠️ src/features/code-review/reviewShellParts.tsx:265 Non-component export in component file only-export-components

_{Reviewed by React Doctor for commit 8b93513.}

[greptile-apps]

Prompt To Fix All With AI

Fix the following 2 code review issues. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 2
packages/ui/src/features/code-review/reviewShellParts.tsx:206-241
**Nested `<button>` inside `<button>` — invalid HTML**

`FileHeaderRow` renders a `<button>` (line 206) and `ViewedCheckbox` renders another `<button>` inside it (line 251). Nesting interactive elements inside a `<button>` is prohibited by the HTML spec. While React's synthetic event system makes `e.stopPropagation()` work in practice, the resulting DOM is invalid and screen readers / keyboard-navigation tools may behave unpredictably (e.g. some AT software flattens or skips the inner button). A straightforward fix is to change `FileHeaderRow`'s root element to a `<div>` with `role="button"` and `tabIndex={0}`, or to restructure the layout so the viewed checkbox sits adjacent to rather than inside the collapse button.

### Issue 2 of 2
packages/ui/src/features/code-review/reviewViewedStore.ts:28-33
**`clearTask` is defined but never called — store grows unbounded**

The persisted store accumulates a `taskId → fileKey → true` entry for every task the user ever reviews and never prunes them. Over time this silently inflates the `localStorage` entry for `"review-viewed-storage"`. Consider calling `clearTask` when a task is deleted or archived, or add a storage migration / TTL that removes entries older than a configurable window.

_{Reviews (1): Last reviewed commit: "feat(code-review): mark files as viewed ..." | Re-trigger Greptile}

[greptile-apps]

_{Reviews (2): Last reviewed commit: "feat(code-review): auto-collapse already..." | Re-trigger Greptile}