feat(web): add interactive review mode for web diffs

[ajoslin]

Summary

• Add mode=review web runtime for diff pages with GitHub-style line commenting: hover +, inline composer, queue/delete/edit/reply flows, and grouped Submit Review behavior.
• Add callback posting modes: default structured markdown body (text/markdown) and optional callback_json_template (application/json) with {{text}} validation.
• Wire review runtime into web capture path and line metadata so comments anchor to actionable code lines, including split modified rows on the added/right side.
• Keep PR screenshot artifacts in temporary branch folder tmp-pr-screenshots/.

Screenshot Links (branch files)

Light mode

• Hover + button: https://github.com/ajoslin/critique/blob/feat/web-review-mode/tmp-pr-screenshots/review-light-1-hover.png
• Drafting comment: https://github.com/ajoslin/critique/blob/feat/web-review-mode/tmp-pr-screenshots/review-light-2-drafting.png
• Queued comment: https://github.com/ajoslin/critique/blob/feat/web-review-mode/tmp-pr-screenshots/review-light-3-queued.png
• Sent/disabled comment: https://github.com/ajoslin/critique/blob/feat/web-review-mode/tmp-pr-screenshots/review-light-4-sent-disabled.png
• Reply flow: https://github.com/ajoslin/critique/blob/feat/web-review-mode/tmp-pr-screenshots/review-light-5-reply.png
• Review submitted toast: https://github.com/ajoslin/critique/blob/feat/web-review-mode/tmp-pr-screenshots/review-light-6-review-submitted-toast.png

Dark mode

• Hover + button: https://github.com/ajoslin/critique/blob/feat/web-review-mode/tmp-pr-screenshots/review-dark-1-hover.png
• Drafting comment: https://github.com/ajoslin/critique/blob/feat/web-review-mode/tmp-pr-screenshots/review-dark-2-drafting.png
• Queued comment: https://github.com/ajoslin/critique/blob/feat/web-review-mode/tmp-pr-screenshots/review-dark-3-queued.png
• Sent/disabled comment: https://github.com/ajoslin/critique/blob/feat/web-review-mode/tmp-pr-screenshots/review-dark-4-sent-disabled.png
• Reply flow: https://github.com/ajoslin/critique/blob/feat/web-review-mode/tmp-pr-screenshots/review-dark-5-reply.png
• Review submitted toast: https://github.com/ajoslin/critique/blob/feat/web-review-mode/tmp-pr-screenshots/review-dark-6-review-submitted-toast.png

Split modified row behavior

• Light hover/right-side targeting: https://github.com/ajoslin/critique/blob/feat/web-review-mode/tmp-pr-screenshots/review-light-modified-hover.png
• Dark hover/right-side targeting: https://github.com/ajoslin/critique/blob/feat/web-review-mode/tmp-pr-screenshots/review-dark-modified-hover.png
• Light reply/right-side composer: https://github.com/ajoslin/critique/blob/feat/web-review-mode/tmp-pr-screenshots/review-light-modified-reply.png
• Dark reply/right-side composer: https://github.com/ajoslin/critique/blob/feat/web-review-mode/tmp-pr-screenshots/review-dark-modified-reply.png

Output Breakdown (summary in PR body)

• Default callback mode (callback_json_template omitted):
  • Method: POST
  • Content-Type: text/markdown; charset=utf-8
  • Body format:

## Review of <file-or-selected-changes>[(n comments)]

- `<file:line>` <comment text>
- `<file:line>` In reply to <file:line> - <reply text>

• Template callback mode (callback_json_template provided):
  • Requires {{text}} placeholder in template
  • Method: POST
  • Content-Type: application/json
  • Body is template JSON with {{text}} substituted by the markdown review text

Example template:

{"text":"{{text}}","target":"ext-system","meta":{"kind":"review"}}

Example posted payload:

{
  "text": "## Review of b/README.md\n\n- `b/README.md:6` Template + token test",
  "target": "ext-system",
  "meta": { "kind": "review" }
}

• Invalid template behavior:
  • If {{text}} is missing or template does not produce a JSON object, review mode is disabled and an error banner is shown.
• URL parsing behavior:
  • Tokenized callback query params are preserved (for example ?token=...&authToken=...) in both default and template modes.

Verification

• bun test src/web-utils.test.ts
• bun run prepublishonly
• lsp_diagnostics clean for:
  • src/review/web-review-mode.ts
  • src/web-utils.tsx
  • src/ansi-html.ts
  • src/web-utils.test.ts

[remorses]

Cool! Can you share a url I can try? You can change the domain in the worker and deploy in your Cloudflare account with wrangler deploy

[ajoslin]

Sure, generating, also cleaned up PR body a bit

[ajoslin]

Added review test URLs (plain text):

Base diff:

• https://critique-web-ajoslin-alt.andrew6666.workers.dev/v/19846091656791fd37f28b61d14cac48

Review mode (simple callback):

• https://critique-web-ajoslin-alt.andrew6666.workers.dev/v/19846091656791fd37f28b61d14cac48?mode=review&review_callback_url=https%3A%2F%2Fwebhook.site%2Fyour-id

Review mode + mobile:

• https://critique-web-ajoslin-alt.andrew6666.workers.dev/v/19846091656791fd37f28b61d14cac48?v=mobile&mode=review&review_callback_url=https%3A%2F%2Fwebhook.site%2Fyour-id

Review mode + desktop:

• https://critique-web-ajoslin-alt.andrew6666.workers.dev/v/19846091656791fd37f28b61d14cac48?v=desktop&mode=review&review_callback_url=https%3A%2F%2Fwebhook.site%2Fyour-id

Review mode + JSON template callback:

• https://critique-web-ajoslin-alt.andrew6666.workers.dev/v/19846091656791fd37f28b61d14cac48?mode=review&review_callback_url=https%3A%2F%2Fwebhook.site%2Fyour-id&callback_json_template=%7B%22text%22%3A%22%7B%7Btext%7D%7D%22%2C%22source%22%3A%22critique%22%2C%22meta%22%3A%7B%22kind%22%3A%22review%22%7D%7D

Review mode + tokenized callback URL test:

• https://critique-web-ajoslin-alt.andrew6666.workers.dev/v/19846091656791fd37f28b61d14cac48?mode=review&review_callback_url=https%3A%2F%2Fwebhook.site%2Fyour-id%3Ftoken%3Dabc123%26env%3Dstaging

[ajoslin]

Then of course we could integrate this into Kimaki for world domination with a POST to local kimaki server on review submit 👌👌

[remorses]

I was thinking we could setup a way to read back the comments for the agent. So model can use webfetch with ?commentsonly and get back the comments, with surrounding context.

I am also thinking, what if we make this comments system more general and also add it in traforo tunnel urls?

Similar to Vercel preview comments. So you can add comments to any dev server preview html page url, then the model can fetch those comments and see your instructions close to the element they refer.

For example: imagine working on a Next.js app from the phone on Discord, the agent will show you the kimaki tunnel url to preview the app, you can open it, enable comments and comment "make this button bigger". Then the model can fetch the same url with ?commentsonly and see your instructions and update the right button.

I think I like this more general approach of comments on pages better, the critique case would also become much simpler, and you can comment to a precise keyword instead of a full line. I will work on this this week

[remorses]

Here is how it would look like: https://liveblocks.io/examples/overlay-comments/nextjs-comments-overlay?exampleId=z-WQsI1qaxe_5Rk

This would even work for real time collaboration! for example to work on a project with your teams and send messages to the same thread in Discord, comments on the tunnel url

[ajoslin]

hmm cool idea yeah I like it

does that work with dynamic SPAs that change all the time?

[remorses]

Nice point. I need to think about it. I need a good way to associate comment to a point in the screen, that is responsive too. Will research what Vercel Preview comments do

[ajoslin]

Nice point. I need to think about it. I need a good way to associate comment to a point in the screen, that is responsive too. Will research what Vercel Preview comments do

hmm i think the right approach is a JS script tag / library that works inside of a dev site instead of trying to put the dev site inside a review app

so i can inject a script in dev, then have the review up on featurebranch.myapp.com?critique_review_id=xyz and it will add all of the shit on top

my main client app for example is very hard to deploy, tons of services etc , getting a vercel style preview url is near impossible

but getting a feature branch (or local tunnel url) link with a review system script embedded inside is possible

great idea really

[ajoslin]

Just copy agentation.dev

[ajoslin]

so can we merge this as-is? i know you have a cool feature planned but this would be huge right now! Would be a super minimal kimaki or opencode addon to get it to feed review comments back in 1 by 1

[remorses]

Latest critique has support for agentation to add comments