[jcfs]

Tip

PR walkthrough: Open the visual walkthrough

Large screenshots in ordinary image previews were fitted to the viewport, making fine detail difficult to inspect. The shared viewer now offers actual-size inspection with bounded scrolling, while each opening starts fitted.

Validation

• Focused Vitest: 75 tests passed across the shared viewer, composer, chat messages, and rich-output renderer.
• Managed Playwright: three Chromium and two mobile Chrome scenarios passed, including the existing Quick Chat cases, keyboard and touch scrolling, focus return, and composer previews.
• Scoped ESLint, i18n:check, specification catalog and lint, and public documentation validators passed.
• Normal pre-commit and commit-message hooks passed.

Checklist

• If I do not have repository write access and this is a large architectural change, I discussed the direction in a linked issue before opening this PR.
• This PR contains one logical change; unrelated work is split into separate PRs.
• I have performed a self-review of my code.
• I have manually tested my changes and they work as expected.
• My changes have tests that cover the new functionality and edge cases.
• If my change touches UI files (apps/web/), I have added or updated Playwright e2e tests in apps/web/e2e/ and verified them with make test-e2e.
• I checked whether this affects public docs in docs/public/** and updated them or noted why no docs change is needed.

Screenshots

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	⚠️ Failed 2026-10-28T13:21:59.343439Z We couldn’t complete this review. Comment @codex review to try again.	51006ee	PR opened

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

[jcfs]

Screenshots

[claude]

Claude finished @jcfs's task in 25s —— View job

---

Review of PR #4901 (head 51006ee)

I read the component diff and tests. I did not run the tests or the e2e specs.

Suggestion

1. Focus return depends on DOM order. image-item.tsx (onCloseAutoFocus) uses chipRef.current?.querySelector("button") to find the opener. If ContextChip ever renders its remove button before the chip body, focus returns to the wrong control. The new unit test only checks the case with no onRemove click. Fix: query the opener by a stable attribute (for example a data-testid or aria-label), or have ContextChip accept a ref to the main button.
2. Extra wrapper. The <div className="contents"> wrapper exists only to find the opener. If suggestion 1 is adopted, it can go.
3. Empty spacer. <span aria-hidden /> in the toolbar only pushes the close button to the right. justify-end on the toolbar does the same without the extra element.

Checks

• The i18n keys task:questionImageFit, task:questionImageActualSize and task:questionImageCanvas already exist in the English catalog.
• ImagePreviewContent is used only by image-item.tsx and image-preview-dialog.tsx. Both now rely on the built-in close button being absent, and image-item passes showCloseButton={false}, so there is no duplicate close button.
• Tests cover mode switching, reset on source change, reset on reopen, and focus return. Playwright specs cover the desktop and mobile flows.
• Specs, plan and public docs are updated.

Verdict: Ready with suggestions.

[coderabbitai]

No actionable comments were generated in the recent review.

Recent review info

Run configuration

• Source mode: Auto
• Repository: Unavailable
• Branch: Unavailable
• File: No configuration file from this repository applied
• Commit: Unavailable
• Layers: Organization UI
• Review profile: QUIET
• Plan: Advanced
• Run ID: 59dfe601-ba34-4cca-a801-fe5f27a202d6

Commits

Reviewing files that changed from the base of the PR and between 77b042f and 51006ee.

Files selected for processing: 15

• apps/web/components/task/chat/context-items/image-item.test.tsx
• apps/web/components/task/chat/context-items/image-item.tsx
• apps/web/components/task/chat/image-preview-dialog.test.tsx
• apps/web/components/task/chat/image-preview-dialog.tsx
• apps/web/components/task/chat/messages/kandev/rich-output/rich-output-renderer-file-targets.test.tsx
• apps/web/e2e/tests/chat/image-inspection-helpers.ts
• apps/web/e2e/tests/chat/image-inspection.spec.ts
• apps/web/e2e/tests/chat/mobile-image-inspection.spec.ts
• docs/plans/shared-image-inspection/plan.md
• docs/plans/shared-image-inspection/task-01-shared-inspection.md
• docs/public/automation-and-mcp.md
• docs/public/tasks-and-workflows.md
• docs/specs/agents/requirements/shared-image-inspection.md
• docs/specs/agents/system-design/image-preview-expansion.md
• docs/specs/agents/system-design/shared-image-inspection.md

Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 3 remain after this review.

📝 Summary

Summary by CodeRabbit

• New Features

  • Image previews now support switching between a full-image Fit view and a scrollable Actual size view, including on mobile.
  • Preview dialogs adapt to smaller screens, keep controls accessible, and return focus to the opener when closed.
  • Each time a preview opens, it starts in Fit mode.

• Documentation

  • Updated user guides with instructions for inspecting images at actual size and returning to Fit view.

Image previews now support Fit and Actual size modes, with scrolling in Actual size and Fit restored when the dialog opens or the image source changes. The change also adds focus restoration for the image chip and composer, plus component and browser tests and updated specifications and user guidance.

Changes: Shared image inspection

Layer / File(s)	Summary
Inspection behavior and scope docs/specs/agents/requirements/shared-image-inspection.md, docs/specs/agents/system-design/shared-image-inspection.md, docs/specs/agents/system-design/image-preview-expansion.md, docs/public/automation-and-mcp.md, docs/public/tasks-and-workflows.md, docs/plans/shared-image-inspection/plan.md	Specifications and public guidance describe Fit and Actual size modes, source-change and reopen resets, scrolling, dismissal, and preserved image-source behavior.
Dialog modes and focus restoration apps/web/components/task/chat/image-preview-dialog.tsx, apps/web/components/task/chat/context-items/image-item.tsx, apps/web/components/task/chat/context-items/image-item.test.tsx, apps/web/components/task/chat/image-preview-dialog.test.tsx, apps/web/components/task/chat/messages/kandev/rich-output/rich-output-renderer-file-targets.test.tsx	The dialog toggles between contained Fit mode and scrollable Actual size mode. Mode changes reset canvas scrolling. Closing returns focus to the chip button when available. Tests check mode resets, image identity, focus, callbacks, and file-read behavior.
Browser coverage and verification apps/web/e2e/tests/chat/image-inspection*, docs/plans/shared-image-inspection/*	Desktop, narrow-viewport, and phone tests cover geometry, scrolling, touch targets, dismissal, focus, and composer entry. The work-order documents record acceptance criteria and verification results.

Priority: Normal

Estimated code review effort: 3 (Moderate) | ~25 minutes

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  actor User
  participant ImagePreviewDialog
  participant InspectionCanvas
  User->>ImagePreviewDialog: Open image preview
  ImagePreviewDialog->>InspectionCanvas: Show image in Fit mode
  User->>ImagePreviewDialog: Select Actual size
  ImagePreviewDialog->>InspectionCanvas: Set intrinsic image size and reset scroll
  User->>ImagePreviewDialog: Select Fit
  ImagePreviewDialog->>InspectionCanvas: Contain image and reset scroll

Loading

Suggested labels: medium

Suggested reviewers: zeval, carlosflorencio

Merge Risk: Minimal · up to 51006

Image previews add actual-size inspection. No material merge risk was identified.

Pre-merge checks: 4 · 1

Failed checks: 1 warning

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat…	Write docstrings for the functions missing them to satisfy the coverage threshold.

Passed checks: 4 passed

Check name	Status	Explanation
Title check		The title clearly and concisely describes the primary change: enabling actual-size inspection for image previews.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.
Description check		The description includes a clear two-sentence summary, validation results, the required checklist, and supporting screenshots and preview details. Optional sections are omitted appropriately, and the …

Full details: Description check

Explanation

The description includes a clear two-sentence summary, validation results, the required checklist, and supporting screenshots and preview details. Optional sections are omitted appropriately, and the content is in English and relevant to the change.

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 5 functions across 8 files. (7 skipped: 7 unsupported.)

Resolution

Write docstrings for the functions missing them to satisfy the coverage threshold.

Finishing Touches

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{A rabbit taps Fit, then Actual size,
And follows the scroll where detail lies.
Back to Fit, the whole image gleams,
The opener gets focus, neat as dreams.
“Hop, inspect, and close!” the rabbit beams.}

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Cloudflare Pages docs preview

Open the docs preview

Built from docs commit ab205bb.

Stable PR alias: https://docs-pr-4901.landing-87j.pages.dev/docs

[greptile-apps]

Confidence Score: 5/5

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

Summary

Adds Fit and Actual size controls to shared image previews, including composer images.

• The shared image preview lets people inspect images at actual size.

_{Reviews (1) · Last reviewed commit: "feat: inspect image previews at actual s..." · Reviewed by Greptile}