Skip to content

docs(readme): add generated product showcase - #25

Merged
LRainner merged 1 commit into
masterfrom
codex/readme-screenshots
Jul 29, 2026
Merged

docs(readme): add generated product showcase#25
LRainner merged 1 commit into
masterfrom
codex/readme-screenshots

Conversation

@LRainner

@LRainner LRainner commented Jul 29, 2026

Copy link
Copy Markdown
Owner

Summary

  • add a compact product overview image to both READMEs
  • add a deterministic Playwright screenshot generator with mocked local data
  • keep screenshot-only fixtures under e2e and separate them from regular browser tests

Verification

  • npm run screenshots
  • npm run test:e2e
  • npm test
  • npm run build
  • git diff --check

Summary by CodeRabbit

  • Documentation

    • Added an Agent Cat overview image to the English and Chinese README files.
    • Expanded testing and build instructions, including browser setup, end-to-end tests, and screenshot generation.
    • Updated project structure documentation with documentation and browser-test directories.
  • New Features

    • Added a README product showcase with previews for settings, live status, and the desktop pet.
    • Added deterministic screenshot generation for the README overview image.
  • Tests

    • Organized browser automation into end-to-end testing and screenshot-generation projects.

@coderabbitai

coderabbitai Bot commented Jul 29, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

Adds a deterministic Playwright workflow that renders a README showcase with mocked application data, captures docs/images/agent-cat-overview.png, configures separate e2e and screenshot projects, and documents the workflow in English and Chinese READMEs.

Changes

README showcase workflow

Layer / File(s) Summary
Showcase fixture layout
e2e/fixtures/readme-showcase/*
Adds the HTML and CSS for the README showcase page, including workspace placeholders and settings, status, and pet iframe previews.
Deterministic screenshot generator
e2e/readme-screenshots.screenshot.ts
Mocks Tauri bridge responses and status events, validates the showcase iframe states, disables animations, and saves the overview screenshot.
Playwright wiring and documentation
playwright.config.ts, package.json, README*.md
Adds separate e2e and screenshot projects and scripts, configures deterministic screenshot execution, and documents setup, commands, generated images, and project structure.

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

Sequence Diagram(s)

sequenceDiagram
  participant Playwright
  participant ShowcasePage
  participant TauriMock
  participant DocsImages
  Playwright->>ShowcasePage: Load mocked README showcase
  ShowcasePage->>TauriMock: Request configuration and status data
  TauriMock-->>ShowcasePage: Return deterministic responses
  Playwright->>ShowcasePage: Validate iframes and toggle status
  Playwright->>DocsImages: Save overview screenshot
Loading

Possibly related PRs

  • LRainner/AgentCat#9: Extends Playwright configuration and mocks the same Tauri bridge used by this screenshot workflow.
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title matches the main change: adding a generated README product showcase and related screenshot generation tooling.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@e2e/readme-screenshots.screenshot.ts`:
- Around line 87-92: Replace the Date.now() value in the hook_runtime_status
mock with a fixed timestamp so screenshot fixtures remain deterministic; if the
settings UI computes relative time from lastEventAt, also freeze the page clock
in the screenshot setup.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 1eede323-5737-4b73-9463-dcd4e358421f

📥 Commits

Reviewing files that changed from the base of the PR and between 0819567 and 2243a6f.

⛔ Files ignored due to path filters (1)
  • docs/images/agent-cat-overview.png is excluded by !**/*.png
📒 Files selected for processing (7)
  • README.md
  • README.zh-CN.md
  • e2e/fixtures/readme-showcase/index.html
  • e2e/fixtures/readme-showcase/style.css
  • e2e/readme-screenshots.screenshot.ts
  • package.json
  • playwright.config.ts

Comment on lines +87 to +92
case "hook_runtime_status": return {
receiverRunning: true,
socketPath: "agent-cat.sock",
lastEventAt: Date.now(),
lastEvent: "PermissionRequest",
lastEventIsTest: false,

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Keep the screenshot mock clock deterministic.

Line [90] injects Date.now() into a workflow documented as deterministic. If the settings UI renders or evaluates lastEventAt, repeated screenshot runs can produce different output or status state. Use a fixed mock timestamp and freeze page time if relative-time logic is involved.

Proposed fix
-  await page.addInitScript(({ mockConfig, mockEvents, version }) => {
+  await page.addInitScript(({ mockConfig, mockEvents, version, mockNow }) => {
...
-              lastEventAt: Date.now(),
+              lastEventAt: mockNow,
...
-  }, { mockConfig: config, mockEvents: statusEvents, version: packageVersion });
+  }, {
+    mockConfig: config,
+    mockEvents: statusEvents,
+    version: packageVersion,
+    mockNow: 1_750_000_000_000,
+  });
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@e2e/readme-screenshots.screenshot.ts` around lines 87 - 92, Replace the
Date.now() value in the hook_runtime_status mock with a fixed timestamp so
screenshot fixtures remain deterministic; if the settings UI computes relative
time from lastEventAt, also freeze the page clock in the screenshot setup.

@LRainner
LRainner merged commit 5c58f88 into master Jul 29, 2026
8 checks passed
@LRainner
LRainner deleted the codex/readme-screenshots branch July 29, 2026 07:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant